3 Feb 2014

Responsive Design The Good And The Bad

No comments

Responsive Design is becoming synonymous with mobile friendly websites. With the rapid growth of mobile devices and more so with tablets, there is a need for websites to fit the different screen sizes and screen orientation. Some people claim that responsive design is the solution to create one design that works in all mediums. I am in the other group that believes that the best user experience is when there is a site design for the web and another version for mobile. But with all the buzz around responsive design, I think it is worth discussing it further.

What is responsive design
From Wkipedia:
"Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)."

Full article: en.wikipedia.org/wiki/Responsive_web_design. It is important to keep in mind that many supporters of responsive design advocate for designing for mobile first. Mobile-first because content heavy and image, big sites don't create great user experiences on mobile devices.

To see responsive design in action, look at this site http://www.acescholarships.org/Home?Lang=en-US on your desk top and then using your mouse minimize the size of your screen, you will see how the design adapts to the size of the screen.

Advantage of responsive design
The advantage of responsive design is that your entire website is mobile ready, it will conform to the visitors screen size and you only need to update content once (which with the right backend can be done without responsive design). Although the appearance of your site changes based on the screen you are viewing it on, because elements stack or spread out accordingly, the content, images and illustrations are all the same from one medium to the other.

Disadvantages of responsive design
The resizing and reorganizing of the different elements on a web page is achieved by using CSS (Cascading Style Sheets) and JavaScript, these are scripts that check the type of the device and size of screen the visitor is using. The more devices you want to accommodate there more code those scripts needs, increasing the weight of the page to be downloaded to the visitor's phone. You add this to the content of the page in question and it could be a painful experience for the mobile user, not to mention the data that will be used in their cellular plan.

As referred to above good responsive design often leads to mobile first. This often means smaller images, less graphics and less content - even on your desktop site. When desktop leads responsive design, content heavy, image rich sites create a further drag on data and a less than ideal situation on a mobile device.

What you really need is Adaptive Design
"Adaptive Web Design also encompasses a range of other strategies which can be combined with responsive web design." (Wikipedia article: Adaptive Web Design)

You need a website that delivers the best user experience for the medium. I have learned that on mobile you need to get to the point. This mean that you need to think what your website needs to do for you or your business. Does your website need to collect registrations, sell products or get people to call you? Whatever it is, make sure the visitor gets to do that right on the home page or let them know they are one tap away to get there.

With content, on mobile devices users are not likely to read as much, you may want to create custom content that is shorter or gives users a synopsis with the option to link to more.

As far as navigation, just concentrate on the pages your visitor wants to look at when using their phones. This might change with time or what you thought would be useful for the visitor experience could get proven wrong. Check your website stats and see what gets viewed or not viewed on mobile, this will give you a good indication on what to add or remove from the navigation.

It doesn't mean that the rest of the website doesn't need to be mobile ready. We are in the era of sharing social media and email marketing campaigns (newsletters) are a major source of traffic for most business websites.
Both social media and checking emails are activities that people prefer doing on their mobile device; you can't predict which page of your site is your mobile visitor going to land.

In my experience sites designed for each medium often create the most successful user experience. At the end of the day, responsive design is just one of the latest design fads looking for ways to create better mobile experiences, I am sure we will see many more mobile focused design trends as mobile use continues to grow.

No comments :

Post a Comment