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.

Designing Responsive Design? Reconsider your Design Breakpoints

Responsive web design has been in our world for a number of years now, but most businesses are only just warming up to the technique. In responsive web designer Singapore, changes are made to the layout (rather than the design itself) of a website in order to make it fit different screens perfectly, regardless of size or orientations.

What are breakpoints?

You have probably noticed that when you visit some sites on browser screens in different devices, they tend to show, hide or resize the page content depending on the size of the screen you’re looking at. Now, for this to occur, the website designer or developer sets specific breakpoints which will determine where changes will happen.

It is more common to use breakpoints determined by the standard resolutions of the different devices available on the market. An important point to note is that the resolution, rather than the actual screen size, is what is considered with responsive layouts.

There are three units that are used to position layouts, content and breakpoints: percentage, ems and pixels. Of the three, only pixels are fixed, the other two are dependent and fluid. Most designers prefer using pixels to determine breakpoints since they are standard. Ems and percentages are more useful for layouts and content.

When to embrace responsiveness

It is a common assumption that responsive layouts are the answer to all design and maintenance issues. Too many clients believe that just investing in responsive design is enough to kill three birds with one stone.

The real truth is that full responsive websites are most ideal for small e-commerce sites, text intensive sites, corporate sites, bios and portfolios, all regardless of actual size. However, large video and photo sites as well as large e-commerce and complex navigation sites are better served by having native site layouts which are specially designed for a specific viewport.

When to limit the breakpoints:

These are a few reasons you might consider holding off on being responsive, or at least keeping the breakpoints to a minimum:

•          To help save on loading times and bandwidths especially on mobile networks

•          Large forms requiring user input

•        Where there are two devices which have similar pixel sizes e.g. a medium desktop/notebook computer and a tablet on landscape orientation, resulting in impractical usage

•          Half-baked or duplicate layouts in resolutions or devices

•          When the better option is to have a native app

•          For creation and maintenance of graphical assets e.g. marketing banners

•          On data-centered websites

•          Online libraries that have links to third-party documentation e.g. (.doc, .pdf etc.)

In these, and many more situations, you may want to consider minimizing the responsiveness of your website by having fewer breakpoints.

Final word

While it’s true that having a responsive website can help to increase the opportunities open to a business and reduce the scheduled maintenance activities, it’s important to keep in mind the practical aspects of user access to various sites when deciding the degree of responsiveness to go for.

For instance, it makes better sense to have native apps for mobile devices where the site needs access to the device’s hardware e.g. microphone, GPS and/or camera. A few companies opt to have both the website and native app for mobile devices, but each serves a different purpose. The important thing is to go responsive because you need it, not just because it’s the current fad. For more details, Visit: http://www.create360.com.sg/.