Responsive Web Design{9}


Making software easy to use has been a major focal point for developers since the dawn of the microchip.  Whether or not an application or website is successful often depends on how quickly users come to familiarize themselves with an interface.  Applications that inundate users with too many buttons or options often struggle to find a wide user base. Similarly, websites that are ‘clunky’ or difficult to navigate are often left in the dust.  Even sites with solid accessibility but that are visually unappealing will find themselves with a timid following. These two issues have historically been major pains for programmers and developers who are trying to add mobile functionality to their software.  Now with the advent of CSS 3 modules, it is easier than ever for developers to provide media rich content that is customized for any type of mobile device; tablet smart phone or otherwise.

With the recent explosion of mobile devices making your piece of software or website ‘user friendly’ has become much more challenging.  Today a young adult may access a website with 3 or 4 different devices in a one day period.  For instance, yesterday I checked an online purchase order on my desktop, then tracked the shipping of that order during class, and wound down my evening shopping on that same site browsing with my tablet.  Many users take the ability to use their favorite sites on all their favorite devices for granted. But developers spend a lot of time and energy making such features possible.

We all undoubtedly remember to the not-so-long-ago past where websites handled this issue by directing uses to either one of two different sites a full version or a mobile version depending on what type of device was used.  The mobile versions are often much more watered down with only the primary content offered.  They commonly are much easier to navigate do to there being far less options for users to choose from.  According to Smashing Magazine some users, particularly older users, find these mobile sites and their ease of use much more preferable.  However most users don’t want the amount of content available determined by the type of device they use.  Forums like Androidforums.com where you can find tips on how to avoid mobile sites when using your mobile device are a dime a dozen.

As phones became much more advanced with processing speeds that often reach that of their desktop counterparts, we found ourselves amidst the ‘app’ rush where all types of software and media providers found themselves developing a more media rich and interactive way for users to access their content.  Every mid-major to major website has its own app available to iPhone and android users, everything from reddit.com to giants like Facebook have fairly advanced applications for smart phones.  With the success of apps one may have thought that all was well and figured out; content rich apps for mobile users and full sites for desktop and laptop users.  With rapid pace of technological advancement that conclusion was soon found to be unlikely.

Apple once again changed the scene with their massively successful iPad line of tablets.  The other hardware companies soon followed suit and together with android tablets became easily accessible to most users.  The increased processing power and screen resolutions made some web apps work oddly or look unappealing.  Many tablet users wanted full access to content and wanted to make use of their high resolution screens.  While it is true that mobile app developers adjusted fairly quickly and changed their apps to work better on tablets, users still started adjusting to using full featured sites with touch screens.

This change in user preference led to a type of development that allows for various levels of media in depending on what type of device a person is using. According to sitepoint.com, the new stylesheets standard in CSS3 has made responsive web design much easier.  Developers can now create classes that are encapsulated within conditional statements that determine what type of device is accessing content.  For instance these conditional statements can determine a device’s window size and orientation.  With that information a website can make use of flexible design grids that grow and shrink the number of content columns are visible.  This technology can even change the quality level of images being displayed.  For instance visiting kotaku.com on my desktop shows users large and high quality images that nearly fill the screen.  The same site on my mobile phone shows almost the same exact content just neatly adjusted to fit on my much smaller screen.  The images have been scaled down and the font size has been ramped up for easy reading.  All of this accomplished without Kotaku.com having to redirect me to separate mobile site.

This responsive programming ideology has been adopted widely by major content providers.  Its ease of use and seamless appearance for end users has led it to be favored by users and publishers alike, according to copyblogger.com. There are times when tech giant Facebook’s extremely robust mobile app directs users to the full featured site which is now designed in a responsive way.  This improved technology allows web servers to adapt to the type of device being used ‘on the fly’ without companies having to maintain multiple versions of their website.  Content automatically adjusts from 3 or 4 columns of pictures, texts, and videos on a desktop to 2 which better suits tablets, and finally 1 column which is best suited for the very small phone screens.  The user experience hardly changes at all from one device to the next.  This consistency and familiarity lends itself to repeat visitors.

According to web designer Neal Cabbage, he prefers a hybrid approach. He takes advantage of responsive web design techniques for his desktop and tablet versions of his website enlogica.com, yet sticks with a mobile version of his site for smart phones.  Similarly, many other content providers are adopting responsive web design but still maintain mobile apps which allow users a strong sense of familiarity and even options for customization. These new and improved features will become more and more important.  According to slashgear.com PC sales have declined for the first time in 11 years during 2012, while on the other hand mobile devices and tablets sales have been exploding.

So who is the main benefactor of these new developments in web design? That would definitely be the end users who are constantly receiving improvements in the way they interact with media.

 

Works Cited

Byers, J. (n.d.). A Beginner’s Guide to Mobile Responsive Design | Copyblogger. copyblogger.com. Retrieved April 17, 2013, from http://www.copyblogger.com/mobile-responsive-design-101/

Cabage, N. (n.d.). Website Design for Tablets and Mobile – SitePoint. Sitepoint. Retrieved April 17, 2013, from http://www.sitepoint.com/website-design-for-tablets-and-mobile/

Cashmore, P. (n.d.). Why 2013 Is the Year of Responsive Web Design. Mashable. Retrieved April 17, 2013, from http://mashable.com/2012/12/11/responsive-web-design/

Ecommerce, Analytics, Optimization, Design & Development Services. (n.d.).Enlogica. Retrieved April 17, 2013, from http://enlogica.com

Kotaku – The Gamer’s Guide. (n.d.).Kotaku. Retrieved April 17, 2013, from http://kotaku.com/recommended

Lawson, B. (n.d.). Why We Shouldn’t Make Separate Mobile Websites | Smashing Mobile. Retrieved April 17, 2013, from http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/

Mitchell, A. (n.d.). Future of Mobile News | Project for Excellence in Journalism (PEJ). Retrieved April 17, 2013, from http://www.journalism.org/analysis_report/future_mobile_news

Stop being hijacked to useless “mobile” websites – Android Forums. (n.d.).phandroid. Retrieved April 17, 2013, from http://androidforums.com/epic-4g-tips-tricks/221485-stop-being-hijacked-useless-mobile-websites.html