Tips for Responsive Website Design

Responsive design has become the new web standard. Many companies have accepted the challenge and have created specific design solutions (such as mobile only) or have attempted to address the issue cross-platform. In this article we look at several tips to help with your design process and make it more efficient.  

One such program is Adobe Edge Reflow, which allows you to make use of media queries, set breakpoints within the program and design your layouts to fit desktop, tablet and mobile. You can then copy the CSS into another program such as Adobe Dreamweaver or other HTML editor to further refine your design.

Consider a Mobile First Strategy: This is where you build the mobile site first, then scale up and build the tablet and desktop designs. One of the major concerns for all three is the logo and/or text. If the text is easy to read on the mobile device then you shouldn’t  have any issues with the tablet or desktop.

  

Beware of Navigation: If your site has only 2-3 navigational menus, you could include those in a simple menu on the screen. If there are more menu elements, you might want to consider creating a single icon that opens into a drop down menu of additional menu items.

other option is to make use of an icon menu style as one would see with a GoMobi site.

Build the Look and Feel of Your Site(s) First: Some companies, like Jiffy Software, build the entire layout of the interface first, before doing any coding. This ensures they have the look and feel the client wants before they do any coding. When building a layout for a mobile site, one very important consideration is making the buttons large enough for a fingertip. Another consideration is keeping the design both simple, yet functional. Many designers tend to add too much to a mobile interface, which can cause design and usability problems. When in doubt, keep it simple.  

  

Be Prepared to Use Many Software Programs: For many users, using a template with WordPress will be enough but if you want to build a complex design, you might have to use custom programs and you might have to code each site individually.

As an example, if your layout is fairly straightforward you might use a template such as Moboom but for a more complex layout you might need to use programs such as Adobe Dreamweaver for the desktop and a standalone program such as GoMobi for the mobile layout. 

Images: When building responsive design layouts, create optimized images for each layout. This reduces scaling and bandwidth issues. Make use of JPEG, GIF and PNG-8 file formats. Never use PNG because it can bloat your files sizes by 5-10 times.

Use Exact Measurements with Images: (i.e. 500x350px at 100ppi) and set image dimensions to match. This will eliminate scaling and will also preserve the resolution and quality of your images. If your images scale this could cause color depth and resolution problems.

 Must Read: Quick Tips to Improve Your Web Design Skills

Use Parallax Scrolling: Here is a tutorial on how to make your site responsive. As with many design elements, the effect can be overdone, so here are some examples of several sites which use the technique well. 

About Updates: If your site is to be a one-off production then updates won’t be an issue but if you plan to build the site then hand it off to others for updates, make sure that it’s easy to do so. Include instructions for those who come after you. Make sure you place comments in the code along with written documentation so those who come after you can see what you’ve done. This will make it easier for them to make updates/changes as necessary. 

Limit the Use of Text on Mobile Devices: Only use what’s necessary, rather than trying to reproduce your desktop site on mobile device. The latter tends to create long scrolling pages, which can cause you to lose viewers.

  

Take Advantage of Google Design Standards: On this page, you will learn what Google recommends when designing sites for use with smartphones. Among other things, you’ll find out what you need to do to make your smartphone pages load quickly.

Test Code Snippets and Templates: As in some of our earlier articles on the use of API’s, be careful. You might accidentally slow down the performance of your site. If in doubt, test the components, first.

Build a toolkit of Frameworks: One fast way of creating responsive designs is to build on what is already there, using existing themes (such as Genesis or Thesis) and use these to create custom child themes. This will save an enormous amount of time since you won’t have to build a new layout from scratch. 

Clean Design: This is especially important with responsive design. Make sure you strip away all non-essentials when designing your site(s). This will improve page loading time.