Responsive Web Design

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows.
Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”- Jeffrey Veen

According to the above statistic from gs.statcounter.com, from August 2011 to August 2014, global mobile usage had risen steadily from less than 10% to nearly 30% whereas desktop usage had dropped from almost 90% to nearly 60%. From the above statistics, we could clearly see that there are significant uses of small devices to browse internet through websites.

To accommodate the needs, the browsers of those small devices shrink the standard of the website to fit the viewable area of the device. As a result, users of those devices need to zoom in/out on the area of content they are interested in.  It is frustrating and tedious to constantly zoom in/out to see the content in readable size.

However, while not everyone demand the sophistication of viewing readable content in different devices, it will be still preferable to let users view the website with tailored view of content depending upon the size of their devices viewports.

There are two possible ways to meet the demand of the different viewports such as (1) designing a website which is responsive to the devices’ viewport or (2) designing a separate mobile version for the existing website.

For the website which is developed using responsive web design can share the same web link for both desktop and other devices which gives the website a better chance of achieving content parity.

For the separate mobile website, there is a need of device detection to route mobile users to separate mobile websites since it doesn’t share the same website link. The main problem with separate mobile website is that only a fraction of the full website features can be implemented in it.

Responsive website designing can be achieved by using HTML 5 markup language which offered more meaningful semantic elements than HTML 4 does. Furthermore, Cascading Style Sheet 3 (CSS3) media queries and additional modules also play an essential role in allowing unseen level of flexibility to design responsive websites.

In conclusion, responsive web designing is in its early stage where all technologies are in continuously evolvement to help web designers to deal with different web related issues and ever changing world of devices’ need. As part of continuous improvement, TMC will offer above latest technologies so that students will be equipped with necessary knowledge of technologies and to get ready for the upcoming industrial challenges in future.

Khin Thu Zar
Ex-Lecturer
School of Information Technology, Digital Media and Mass Communication
TMC Academy

References:

  1. [online] [Accessed 9th September 2014].Available from World Wide Web: <http://johnpolacek.github.io/scrolldeck.js/decks/responsive/>
  2. [online] [Accessed 9th September 2014].Available from World Wide Web: <http://www.smashingmagazine.com/2012/08/22/separate-mobile-website-vs-responsive-website-presidential-smackdown-edition/ >
  3. [online] [Accessed 9th September 2014].Available from World Wide Web: <http://gs.statcounter.com/#all-comparison-ww-monthly-201108-201408>
  4. [online] [Accessed 9th September 2014].Available from World Wide Web: <http://alistapart.com/article/responsive-web-design>
  5. Ben Frain. (April 2012) Responsive web design with HTML 5 and CSS3, PACKT publishing.

Check out our courses:

Higher Diploma in InfoComm Technology

Bsc(Hons) Computing (Top-up)