Responsive Web Design

by Edward J
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

9 thoughts on “Responsive Web Design

  • April 20, 2013 at 10:40 pm
    Permalink

    Great Blog! It made me look at all of my mobile apps in a new light. I found it particularly interesting that developers can now encapsulate certain conditions can help determine what devices are being used. I suppose that as more and more tablets become the norm, more websites will follow the trend, creating more tablet/phone friendly sites.

  • April 21, 2013 at 11:19 pm
    Permalink

    I find this blog goes really well hand in hand with Twitter’s Bootstrap in terms of creating responsive websites and making they very dynamic. It is nice to have many websites user-friendly on mobile devices but there are times when I would think it’s unnecessary. For instance when I look at content in Wikipedia for research, I still find using a computer or laptop more convenient because of the amount of text it has, the ease of searching keywords, and being able to read it on a wider screen to allow more content per scroll. Having a comparison of a desktop and mobile version of a website to show responsiveness would also enhance this blog a bit more.

  • April 28, 2013 at 6:31 pm
    Permalink

    Good blog! I am also one of those user who uses mobile, tablet, laptop, and notebook. I really find these functionality and quality of the apps useful and user friendly. I am most of the time on my phone doing search, checking email, Facebook, or my Blackboard. I like how developers nowadays with this great technologies can make adjustments to all the website or apps to fit on all devices.

  • April 29, 2013 at 5:14 pm
    Permalink

    In your blog you discussed the idea of websites having different versions for mobile clients, and for laptops/desktops. You also discussed the ideology that this entire blog talks about, which is designing a website that works well on both. I think it’s a relatively universally agreeable thing to pursue; but I think I am a little more alone than I would have initially thought on this opinion, as I am still encountering hundreds of websites that don’t even have a mobile version and instead offer 40 ads that push the content into a single column of characters, as well as others whose mobile versions are entirely too stripped down, and still others who offer my phone a proprietary app to view their forums.
    What do you personally think about the best response to a versatile website for mobile and stationary internet devices? Ignore, separate, or integrate?

  • May 1, 2013 at 12:56 pm
    Permalink

    Nice Blog! It’s amazing how technology changes every single day. I like how you shed light on how multiple designs are needed for different website platforms (desktop / mobile) and how hopefully in the future like HTML5 will help solve this. I too like Brent “am still encountering hundreds of websites that don’t even have a mobile version.”

  • May 6, 2013 at 3:04 pm
    Permalink

    Well written however I wish you would have shown screen shots on how some of these views differentiate from one another. Perhaps you could have shown the code on how we can use that for our sites and how separate css files can be used. I understand you pointed it out in your presentation, but would have been nice for reference.

    ie:

    just notes that the media type changes depending on what it detects.

    Otherwise, well done

  • June 4, 2013 at 11:47 am
    Permalink

    Wonderful content on the blog, I really like the focus on how much responsive design has improved how we browse the web on mobile devices such as phones, as well as this history of how this occurred. While the content may be good, you could definitely reorganize your blog to be more readable, and include images or screenshots to make it more entertaining to read.

  • June 8, 2013 at 8:37 pm
    Permalink

    Very nice blog Edward! While I’m not a big fan of browsing the web on mobile devices I do understand its usefulness and convenience. I bet many developers were banging their heads on walls when it came to user friendly designs on mobile websites. Silva’s blog on creating effective content for websites listed many do’s and don’ts. I’m sure when creating a web design for a mobile device is just as difficult, if not more, due to the screen size limitations and text size. I also didn’t know that developers took extra measures to determine what device is accessing content.

  • March 21, 2014 at 12:27 am
    Permalink

    Responsive web design, especially on mobile devices, has become such a huge deal because of the amount of mobile devices being used regularly for internet services. For example, when visiting a website, a mobile version often is presented to the user (with the option of using the regular site as well). The mobile sites tend to be more responsive, which is actually quite accommodating and convenient when on the go. Great insight on the blog, Edward.

Comments are closed.