Friday, March 29, 2024

8 Responsive Design Mistakes to Avoid

Creating a responsive design is one of the biggest challenges facing designers. To make matters worse, it can be difficult to know what approach is correct. Usually the number one problem is planning though an even bigger problem is being overwhelmed by the many software programs available. In this article we look at several design mistakes to avoid. Doing so will help you build better designs.

1. Not Testing 3rd Party Code: Testing is usually the last step before deploying a website but in this case it refers to using template code to build your site. In an earlier article developer Shawn DeWolfe spoke about using a JavaScript API as part of a web page. Initially it seemed like a good idea until Shawn realized that the page was loading slowly. With some testing he realized that the API was adding seven seconds to the page loading time.

 

2. Using One Program for All Designs: Many software companies have stepped up to the plate and have created all-in-one design programs. The only problem with that approach is it might not be the best solution. As an example, mobile platforms are often in a class by themselves and require special attention. Jiffy Software (an app development company), takes the coding process seriously and they do not use any off-the-shelf software programs, simply because they are too slow. As an example when working with iOS, they mostly use Xcode and Cocoa and build the entire mobile site from scratch.

 

3. One Size Fits All: This primarily refers to images, where a designer uses one image for all platforms. This is a huge mistake for several reasons. An incorrect image size will affect loading times, and if the image is designed for the desktop, the loading times will be quite noticeable on mobile devices. There will also be scaling issues, which could affect the quality. As an example, if your images are built for mobile devices but not for the tablet or desktop, the images could “fall apart” (become pixelated) due to scaling issues.

 

4. Mobile Navigational Issues: If you have more than three items on a menu it’s a good idea to turn that into a drop down menu, rather than trying to fit all the menu options on a screen.

 

 Another option is to build a mobile site with an icons-based menu or a layout. This was the foundation of the GoMobi interface and is still used on many of their mobile layouts.

 

5. Not Taking Screen Icon Size into Account: According to this article in Smashing Magazine, icon sizes should be 44×44 pixels (these are the Apple specifications). The only problem is that these specifications are not consistent with different manufacturers. As an example, Nokia recommends an icon size of no smaller than 28×28 pixels and the design guide the Microsoft Windows phone recommends “a touch target size of 34px with a minimum touch target size of 26px.” Later in the same article, it was found that the ideal size of the human fingertip ranges from 45-57 pixels. It’s easy to see how this can cause confusion for designers and potentially create havoc for the end user.

 

6. Not Enough Negative Space: The small size of the mobile interface can lead to a problem where designers cram multiple icons onto the screen in an attempt to make the most out of the available space. This is a mistake (according to the iOS Developer Guidelines).

 

Here is the Willie’s Bakery layout again using an iPhone emulator. Note the negative space around each icon.

 

The use of negative space helps screen elements stand out and, according to Apple “can also impart a sense of calm and tranquility.” Also, according to Apple, it’s good to design icons without borders.

 

7. Hiding Content: Some designers hide content as a shortcut when building a layout for mobile devices. The down side is the content will be loaded regardless, even if the user doesn’t see it. A better solution is to take the time to build a new, clean layout which omits the unnecessary content. The end result is a mobile site which loads faster.

 

8. Lack of Clarity: This affects all platforms. Since many layouts contain a lot of information, designers might build an interface where all the elements need to stand out. The result will be competing visual elements and confusion. In order to have clarity, the design must be clean, free of distractions (such as unnecessary animations), with text that is easy to read. If it’s important for certain elements to stand out, create additional pages, if necessary.

 

 

Conclusion

Building responsive web sites offers great potential for designers and businesses. The down side is that things are constantly changing. Each designer will have to come up with core competencies for building sites and will also need to be flexible, as standards change. In some ways, building web sites today is a potential minefield for designers because there are no set standards.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured