THE SPARK  by Phosphor Creative

Responsive Web Design Best Practices

By Chris Strange in  
March 14, 2015
phosphor-blog-featured-responsive-ux

According to ComScore statistics, we passed the tipping point of mobile browsing in 2014

The majority of US users have been consuming media through mobile , not desktop , applications.  It therefore makes sense to use responsive design techniques that scale across all devices and screen resolutions, so you don’t leave any users behind.

Let’s  examine some of the best practices in setting up a website that works for all users:

  1. Design around ALL screens, not just mobile
    Of course it makes sense to start with the “mobile first” design approach and scale up, but learn to think multi-dimensionally.   Let the amount of content be your primary guide here. 
  2. Prioritize your content
    Sometimes, it’s ok to eliminate certain content, such as extra images or copy, in order to fit a single-column / vertically – oriented design.  Put the most important content above the fold & don’t make users hunt & peck for these items.
  3. Balance features with load time and quality
    Do you really need that  image carousel on the mobile device, which uses extra javascript code to work?  Or will a better approach involve a single, high-quality image for impact, while minimizing page load time?
  4. Watch out for large fonts
    Make sure your typography is appropriately sized,  noone like to “pinch and zoom” when browsing a mobile site
  5. Make sure your site navigation works on mobile!
    Using a 3-line icon by itself may not be great usability on mobile.  Having a simple text label titled “MENU” for mobile users makes navigation easier.  Also, make sure the nav structure is consistent across mobile/tablet/desktop.
  6.  

Join the discussion

    Leave a Reply

    Your email address will not be published. Required fields are marked *