Responsive designs have been doing the rounds for quite some time now. Statistics show that a huge proportion of people across the globe prefer using smart-phones or other hand held devices as compared to conventional PC’s or desktops. On the go internet is definitely a major time saver !! Even when it comes to financial transactions people find it easier to do it on a smartphone.
Picking up the trend business owners have already hopped on the “responsive ” bandwagon. Though websites have been optimized to make itself accessible on a variety of devices, owners have often overlooked the user experiences and other best web design practices. Most websites are not designed with a mobile first approach neither are they optimized to handle mobile traffic. But with time one can expect companies to cater to their clients through channels dedicated to these devices.
For todays article I’ve picked out a few very good responsive designs that render a good user experience as well as nail their goals beautifully. Lets begin with what responsive designs actually are.
What are responsive designs?
These are websites that are designed to fit into any screen size without having to lose out on any useful information. The designs have a fluid structure and so resize and rearrange itself to fit the screen of the multitude of devices present in the market. This means there would be just one website and one core set of codes for the site so that it performs perfectly on several devices.
That means the website has to be designed such that on a larger screen it’s displayed depending on the user behavior on those screens and then on a smaller screen it shows a different pattern to render to the usability and UX on smaller screens.
So how do we discern the elements that work for larger displays and those that work for smaller displays.
Conversion elements worth keeping
Sorting out what’s worth keeping and what can be trimmed away is the most important decision. Mobile users prefer click-able elements , easy to scroll navigations, bigger texts and plenty of white space around click-able element to segregate them. Besides these design factors they find it handy if they can easily use and locate the map, get directions, business hours and the tap to call or the click to call functionality.
Basically focus on making it easy for viewers to read (if site is content based) and see, make choices without confusions, highlight the call to action so that it’s easy to click and in short make things a lot simpler.
So focus on integrating mobile features with your design to make the site intuitive and convenient to use. Since the screen size is limited you have to plan and sort out the important aspects that contribute to conversions and make complete use of the sight, sound and media options that are available.
Elements that you can do away with.
Focus on conversion when sorting out the layout or design. Do away with anything that can lead the visitor to click away, get confused or distracted.
A familiar pattern that I’ve come across is that people just remove the ads and deploy stacking to arrange elements on the page for a better layout. This does not ensure you conversions. You have to focus on the user experience and user requirements before you settle in for a design.
Here’s what you can do:
- Keep it to a minimum– To enable easier touch -navigation, mobile pages are optimized by using scrollable images (like a slide show) and several thumbnails instead of a large view.
- Expandable content – This is pretty handy when you don’t want your page to look boring and lengthy with lots of text on it. Group them into subheading and give users the luxury to tap the content they want to read through. This way they would now where to find what and maneuver through your page conveniently.
- Prominentreviews and ratings– This is what any user would want to check out first so keep them aligned and easy to spot – front -and-center on the site, you can further reinforced with social proof.
- Large price and payment options – To display vital information(like the price and how to pay options) clearly without any ambiguity.
- Make Free shipping more noticeable –A Prominent icon to see the shopping cart and also facilities like free shipping etc, are highlighted for better conversions.
Large call-to-action button – They are the most crucial ones have to crystal clear and large so that there is no confusion. Use appropriate colors to set the mood and ensure that it does not require any zooming, tweaking or pinching. Must be as easy as a tap.
The website for United Pixelworks have beautifully crafted their site to cater to mobile users and desktop users. They use a large prominent button for the shopping cart at the top right hand corner where it is easily visible and drop down navigations to save space. They then neatly arranged the contents similar to a Windows 8 OS making it easy to click. They have also cleverly displayed the vital info like the price and a short description upfront making them impossible to miss.
Hiutdenim has paid a lot of attention to the user experience on their mobile versions. On the desktop version they have used white text on a dark background, but for ease or reading they have a white background with black text for their mobile versions. This will help them improve their conversions significantly. They also display their shopping cart with the no. of items in it prominently at the top and employ call to action buttons that are vivid and span the entire width of the screen(Practically urging you to click it !.)
Always riding uses a simple yet crisp and clean website to effectively communicate with its clients. Drop down menus and navigations to save space. Light backgrounds with black text for improved reading. Filter and sorting option are again expandable to save space and make it easier for the customer. Ratings are displayed upfront along with the price. In simple words it’s clear and effective.
Nuts.com is another interesting site, they have used the right balance of colors and text to highlight important aspects of the site. Intuitive display and the design on the whole draws you to it and is easy to use. They have integrated mobile features like tap-to -call and maps to make it easier for their customer to reach them.