Tuesday 27 January 2015

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/.

No comments:

Post a Comment