9 responsive design mistakes you don’t want to make

Featured Image

As per UX Design Trends 2015 & 2016, responsive Web design has become an essential factor for website design in the industries to support multiple screen sizes and devices but not every responsive site is made similarly.

Whether you’re creating a small company website or an eCommerce program, let’s know about common mistakes to avoid while working on your next responsive Web design project.

 

responsive-design-mistakes-to-avoid-big

 

1.    Focusing on Devices Instead of Screens
According to information provided by Open Signal, at present, there are  24,093 various Android devices on the grocery store, increased from 18,796 just last year (and this is without counting iOS and other devices). This incredible diversity makes it unacceptable to target each device. Instead, you must focus on the screen’s size.

 

General device classifications such as:

  •  Wearables
  •  Phones
  • Tablets
  • Desktops

Alternatively, you should design website for screen sizes given below

  • Small screens
  • Mid-range
  • Large
  • Extra-large

Using a screen size instead of device classification for a responsive design is crucial as different devices are being crawled slowly outside of their categories. You give the sack no longer lump all phones into one category because of the wildly disparate sizes of their covers. There are many phones available now that are larger than some of the smallest tablets as well as computer screens.
The device classification itself is no longer a clear indication of the size of the display, and that’s the reason the device size cannot be the only criteria when developing the responsive website and their standards.

 

2.     Using the Only Device Sizes as Breakpoints
As new devices reach to the market, New Display sizes will inevitably introduce themselves into the design landscape.
If you just practice the current device sizes as breakpoints, your website will feel strained on these newly introduced screens. To take on this challenge, you can use a method I call “building to the blueprint, not the device.”

  • Begin with the Mobile First approach and develop your website with the smallest screen that’s relevant to your users. In most instances, a phone will be the smallest relevant screen size. The iPhone’s screen resolution (in portrait mode) is 320 pixels wide.
  • If wearable devices are significant to you, and so you will require studying micro-screens with even smaller settlements. The Apple Watch has a breadth of 272 pixels, which is the smallest smartwatch outside of the Pebble Time (144 pixels wide). If you desire to fit these micro-screens, designing for 272 pixels and above will have you pretty much covered.
  • At one time, you build your small screen layout, slowly scale your screen size bigger.
  • As your design starts to feel stressed, add media queries to produce any necessary layout changes so that your design is easy and works well every step of the path
  • Persist in this procedure until you get to the largest screen sizes you are aiming for. A maximum screen size of 2000 pixels wide will cover all but the maximum displays available today. According to W3Schools, 99 percent of visitors have solutions that come under 2000 pixel size.
  • Persist in this procedure until you get to the largest screen sizes you are aiming for. A maximum screen size of 2000 pixels wide will cover all but the maximum displays available today. According to W3Schools, 99 percent of visitors have solutions that come under 2000 pixel size.

You create a web design that scales to all screen sizes available today and also upcoming devices in future.

 

3.    Only Thinking Small
Despite the significance of small screens, responsive design is not just about mobile devices. An expert designer considers both big and small screen sizes with their layouts.
Mobile Internet usage has been increasing for years. Now Only 42% of traffic comes from desktop visitors. A designer who only consider small screens with their responsive website is missing the great picture.

  • Give the same level of attention larger screens as you give small screens.
  • Don’t act only to scale your design “fits” on those large screens. Take full benefit of the extra space you have available to you.
  • Make a content hierarchy to demonstrate the key content or feature content in your design and make sure that they are set properly in widescreen layout.
  • Make sure that images do not lose quality on the largest sized screens.
  • Consider line lengths as your design scales larger. Line lengths between 45 and 75 characters are optimal. You can use a bookmarklet from Chris Coyer to test your design’s line lengths.
  • Don’t scale font sizes too large, even if you have space to do so. Too Large Fonts take up significant horizontal space, which can drive readers to slow down or skip ahead in the content. Take the usability tests using these large screens to hold in for readability.

4.    Hiding Content
Earlier, Designers used to hide some content in mobile devices considering the fact that visitors are in the hurry on mobile devices, and they will not read the full content. Content like contact information and directions were prioritized while other content was hidden on those mobile versions. But later This creates a problem for anyone who wants access to all the same content found on the desktop site.

Don’t hide the content on the mobile device. Keep the same content as Desktop devices.

According to Recent surveys, “rushed mobile visitor” scenario is a myth. In fact, a recent report by InMobi found that “61% of mobile Internet users are on their device while viewing TV.”

The person sitting on their couch surfing the Web is the exact antonym of that “in a rush” scenario. Many of these visitors are “multi-device users”, signifying they are accessing the same substance from different devices throughout the daytime. As such, they expect content to be reproducible across all those gimmicks.

You might present and prioritize content differently for different screen sizes according, but never hide content in the mobile responsive website.

 

5.    Insisting on Consistent Navigation
Different screen sizes and devices require different kinds of site navigation. It’s a mistake to take a firm stand on absolute consistency across the different layouts of a responsive situation.

 

Proficient example of how to alter the navigation for responsive design

When developing responsive navigation, the following points should stay uniform:

  • Link or button labels
  • Typefaces
  • Color treatments

The following ingredients should not remain consistent as they fit the nuances of specific screen sizes:

  • Button size
  • Visual layout

How the navigation functions, including the differences required for touch screens. For instance, a desktop navigation can sit still at the pinnacle of a display. When you redesign the layout for the mobile screen, you can prepare the navigation with persistently and shorten in size to display perfectly on mobile.

 

6.    Failing to Design For Touch
Different screens allow for different input methods, including touch.
One common mistake that designers make with responsive websites is failing to design for touch functionality mentioned below:

  • Using the corners: On small screens, the lower left corner is the easiest point for users to access, most often with their thumb. On tablets, the top corners are prime touch area. When planning your small screen layout, place CTA buttons or other important links in that lower left corner to assure ease of approach. For mid-range screens, put these important buttons and links in those upper corners.
  • CTA buttons must be adequately sized. A minimum of 44 points is usually sufficient.
  • Do not place items too closely together to avoid someone accessing the wrong item by mistake. Keep the minimum spacing of 23pt to avoid interface errors.
  • Use natural interactions and design navigation that works easily with the common hand gestures, like pinching.

7.    Linking To Non-Mobile Friendly Content
The power to easily link visitors to other pages or content is one of the key ingredients that form the Web so powerful. The problem for responsive experiences is when your device website links to another site with non-responsive web pages. If your responsive site links to other websites that you do not control, you will not hold the power to reach those sites multi-device friendly. In these instances, you may instead want to wait for an alternative site to connect to.
If you are linking to sites and resources that you do control, including micro-websites or partner websites, you want to assure that all of them offer a consistently & good responsive experience.

 

8.    Ignoring Performance
A few extra minutes may seem like nothing, but it is an eternity for someone waiting for a site to load. Responsive websites must be optimized for speed to load fast regardless of the device or internet connection.

Some keys to optimizing for performance include:

  • Limiting images to only those which are indispensable
  • Optimizing any images used on the website
  • Removing unnecessary dependencies, like Javascript libraries or other 3rd party instruments
  • Taking advantage of browser caching. This allows commonly used files on your internet site, including HTML, CSS, Javascript, etc., to be stored locally. It will speed up page load for return visitors.
  • Slimming down the entire number of HTTP requests. Every file or resource that a web page needs, including each image, java script files, and the CSS, requires the internet browser to fetch them from a Webhost. The more trips to the server that are commanded, the slower a page load. Reducing this number of trips is still another means to increase the loading speed of the website.

9.    Forgetting to Test Your Design
What works on your system may not always work in the real world. Running usability tests for responsive sites with real users on real devices will permit you to fix UX issues to resolve before a wide waiver.
Try loading a site yourself on specific devices and check your pattern to test development decisions.
If time and resources permit, services like User Testing provide incredible value for $50 a test. They’ll help recruit, create tasks, record the test, and examine results. At the absolute minimum, you should regularly run your website through Google’s Mobile-Friendly Test to identify likely events.

 

Conclusion
To determine more about best practices to design responsive design and other UX techniques, check out the free guide UX Design Trends 2015 & 2016. By analyzing 71 of today’s best UX examples, the guide deconstructs helpful trends into simple design tactics.

Ready to Take the Next Step?


icons

Atul Gupta

Content Writer

Atul is a Tech Lead at Promatics and has around 6 years of experience in web based application development using PHP and latest PHP based frameworks. His expertises is in managing and delivering complex and medium to large scale projects including CMS, eCommerce deployment, payment gateways integration, using next gen web frameworks, Cloud Computing and APIs. He has a good understanding of analysing the technical need of client and providing them the best solution.

Still have your concerns?

Your concerns are legit, and we know how to deal with them. Hook us up for a discussion, no strings attached, and we will show how we can add value to your operations!

+91-95010-82999 or hi@promaticsindia.com