`

Reconsider Responsive Design (Layout)

Micha Goldfine - Thursday, June 12, 2014

It’s been a a few years since the term “responsive design" has entered the overwhelming world of tech terms, titles and acronyms. I prefer using the term ‘layout’ rather then’ design as we are not altering the design but rather changing the layout to fit a certain screen (viewport to be exact) size and/ or orientation.

Responsive Viewport

Breakpoints

Responsive layouts change or adapt to new screen sizes and orientation. You probably have noticed that websites show, hide and resize content based on the screen or device you are viewing from. These new layouts change at a specific breakpoint determined by the designer or developer. 

We mostly use common breakpoints that are based on standard resolutions popular devices such as iPhones, desktops and tablets. Note that it’s the resolution that is important here not the actual physical screen size.

Breakpoints, layouts and content are based mostly on three types of units. Pixel, ems and percentage.

Pixels are a fixed unit of measurement while ems and percentage are fluid and dependable.

When determining breakpoints, I prefer using pixel units as it’s easier for me to understand and communicate designs with peers and clients. For the layout and content I will mostly use ems and percentage as it allows for content to be fluid and responsive.


responsive design layouts

Reconsider responsiveness

Too often we assume that having a responsive layout will solve our on-going design and maintenance issues. In reality it’s not the case and more website owners realise it after spending a lot of money and time.

Many clients also tend to think that by going responsive they are killing three (or a few) birds in one shot. I must admit that I thought the same for a while especially when using responsive frameworks such as Twitter Bootstrap and Zurb Foundation.

So when should you consider going responsive? I would say that for text intensive sites, portfolios, bios, corporate and small e-commerce sites, responsive all the way (from small to large) can be a good idea.

Large e-commerce sites, large photo and video sites and portfolios and complex navigation sites would be better off having a native website layout specifically designed for the targeted viewport.

There are a few reason not to go responsive or at least limit the breakpoints:


  • Save bandwidth and loading time on mobile networks.
  • Duplication or half-baked layouts between resolution/ devices.
  • Impractical usage between two devices that share the same pixel sizes (i.e medium desktop and landscape tablet).
  • Production and maintenance of graphical assets such as marketing banners.
  • Large forms and user input.
  • When a native app will simply be a much better choice.
  • Data-centric websites
  • Libraries with links to third party documents (PDF, DOC etc).

There are many other reasons to to go responsive or at least minimal it’s usage to a certain extent.

Conclusion

Having a responsive site opens up many possibilities and can reduce on-going maintenance work but as you can see it’s not the case for every type of website.

Another factor to take into consideration is the physical environment in which users use there various devices. Mobile phone websites are accessed in places and times different then desktops. For instance, I might read or search car insurance websites while commuting but will do comparisons or get quotes from a desktop or tablet (if you OK with filling forms on a tablet).

Another reason when a native app will make more sense on a mobile device is when we want to access the device’s hardware such as the camera, microphone and GPS.

Then again, we see many companies using both native apps and websites where each is used for different proposes.

A good example is www.linkedin.com. The desktop website doesn’t ‘respond’ to viewport change. You can access the web

site on a phone but you will be presented with the app design layout rather then altering the desktop one.

So. don’t get into responsive just because it’s there and is a ‘hot’ topic. Get into responsive for your specific needs, budget and user experience.

Recent Posts

Tags

 

Archive

    Resources