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.
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 44x44 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 28x28
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.
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.