Thursday 29 January 2015

6 things you are doing wrong in responsive design

The art of responsive web design is continuously evolving. As the times pass, we learn better ways to tackle different challenges and improve the technique of building responsive websites. Because of this, something that was right and spot-on a few months ago could be wrong or not as effective right now.

This is not like fashion; rather it’s the natural process of continuous improvement, furnishing us with newer and more effective ways to achieve the same goals. Below we highlight a few outdated practices in responsive web designer singapore. If you've made them, not to worry, I've made all of them before learning not to:

1.   Don’t disable the magnification

You know this block of code, commonly used to disable the zoom facility on a responsive site:
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=no">
By so doing, you’re taking control out of the hands of the users, which can be taken very antagonistically. You’ll make users think you don’t like them, and that’s not nice.

2.   Don’t use device widths to set breakpoints

In the beginning, it was common to design style sheets catering to widths of well-known devices. It was easy enough because there was just 480, 768 and 1024 pixel devices. Right now, you have the iPhone 5, Kindle Fire, HTC and a vast array of mini-tablets and phones of varying screen size. You can’t set style sheet for all of them, I promise.

A better way is to place a breakpoint where the design breaks, meaning a new layout is necessary from that point. It’s a bit tedious, since you’ll have to test it on as many devices as possible, but it works.

3.   Don’t have ginormous file sizes

You may think nothing of using images as large as 100 or even 200kb as backgrounds for web pages until you try to load them on a phone. If you’ve been spoilt by broadband and its crazy-fast speeds you know what I’m saying. Think about the user who’s got a slow 3G connection and will think nothing of aborting because your site is taking eons to load.

4.   Don’t hide content

You know this, hiding content simply because you’re unable to fit it into your smaller screen:
Forget this code, bury it for good. Work with the assumption that your mobile visitors want to do everything that the desktop user would want, perhaps even more!

5.   Don’t compromise on the design

Tempting though it might be to design a webpage or site that seamlessly folds down into a neat view on mobile devices by prioritizing ease of development over visual design, be careful. Avoid the trap of allowing technology to suppress your creative muscle, otherwise you’ll have similar looking responsive websites, and that’s just boring.

Responsive web design is not easy, but when done properly, you’ll love the result. Don’t be afraid to put in the work.


6.   Don’t forget the touch

Everything that is clickable should be the size of a thumb-click. Put your buttons too small and close together and the ‘fat-fingered’ users will take out a hit man on you. Ensure links are adequately spaced, and have acceptably sized mobile controls (Apple recommends 44 pixels).

Now go ye forth and be a great designer! Visit http://www.create360.com.sg/ for more details.



No comments:

Post a Comment