Responsive Web Site Design

Objective:

Find and read 3 online articles about responsive web site design. For each article, provide the complete citation (using American Psychological Association (APA) format) and a 75-100 word summary of the key points of each article.

Article 1

I chose to review this article first because it goes in-depth, especially about media-queries, about planning and designing a responsive web site. Following are some key points that this articles makes:

• The author discusses how Mobile browsing is expected to outpace desktop-based browsing within three to five years.
• He mentions how more and more of his clients are specifically requesting “iPhone websites”, and credits this request mostly to mobile WebKit’s quality as a browser.
• The author talks about CSS “media types” and how they were designed to target a specific class of web-ready device, but that most browsers didn’t support all of them and thus many times they were implemented poorly. He also discusses “media queries” and how they are more friendy in tageting many different devices, and he goes in depth and gives specific coding examples for various situations from scaling images and text in responsive design, as well as going from a multi-column layout to a single-column layout.
• One last tip the author gave which I found worth mentioning is that you may download a jQuery plugin (http://plugins.jquery.com/project/MediaQueries) from 2007 which offers somewhat limited media query support (min-width and max-width) to support older browsers.

Citation:

Author, Ethan Marcotte, A List Apart (May 25, 2010). Responsive Web Design.

An A List Apart Article, issue number 306, pages 1-11. Retrieved from

A Primer on Responsive Design

Article 2

I chose this article because it gives some important points and tips for not only designing for a responsive web site, but also emphasizes site architecture based on content being the most important asset and how to design responsively based on the “context” of your device. Here are some key points the author makes:

• The author states, “Responsive design is about putting the right content in users’ hands according to the context of their interaction.”  This couldn’t more true! He discusses content strategy that will guide to deliver ONLY what is necessary at the appropriate points in the user’s journey based on the users’ device.

• Some of the tips he gives for designing responsively are to:

1. Plan for a responsive design at the very beginning of the design process in order to adapt to future changes and browser compatibility.
2. Start design with the smallest device in mind FIRST and then scale up from there.
3. Focus on designing for the “key-content” based on the users’ device so that ONLY the most important content will be displayed for the smaller screens.
4. Always make sure the lines of COMMUNICATION are flowing between the front-end and the back-end, and to do frequent testing for the delivery methods of content.

Citation:

Author, Kevin Stakem, Lindy Roux, Matt Holland  (June 12, 2012). A Primer on Responsive Design: From Content to Development.

UX Magazine, article number 837, pages 1-6. Retrieved from

A Primer on Responsive Design

Article 3

I chose this article because of its’ title, Responsive Design – What Is So Responsive About It?  But after reading it I found it didn’t offer any ‘new’ information but rather regergitated from other articles. However, it did make a couple of great points that I never really gave second thought to. They are as follows:

• How laptops have been devoured by tablets and mobile phones due to the sheer accessibility and convienence of the mobile device; and
• that most mobile and tablet users never tend to think about how much work a web designer has to go through in order for their pages to display and function properly for the mobile device they may be using.

Citation:

Author, Kartik Mehta, (April 11, 2013). Responsive Design – What Is So Responsive About It?

Ezine articles,  page 1. Retrieved from

http://ezinearticles.com/?Responsive-Design—What-Is-So-Responsive-About-It?&id=7626880

Mobile versus Desktop Web Sites

Objective:

Review 3 company websites on a PC or Mac plus the mobile version of each website. List the folowing information, for each company, in your blog post.

• Name of company
• URL for desktop web site
• URL for mobile web site (if different)
• Key diferences between the site versions (design, color, page layout, categories, content).
• Key similarities between the site versioins (same sample categories for differences)

Results of My Research:

In my research on how mobile web sites differ from desktop web sites, I gained much insight on the multitude of additional questions I need to consider from the user’s point of view than I would have ever thought to ask when designing for a desktop web site.

First and foremost, just the fact that a user is in a mobile state changes the way they access and consume information from the web. I never really gave it much thought before now, but that’s really very important!

The 3 web sites I chose to do my blog on are listed below. I chose these particular sites because I use each one of them on my desktop but never on my mobile cell phone. So I thought it would be interesting to see their differences between desktop and mobile.

1. http://www.ehow.com
2. http://www.amazon.com
3. http://www.lynda.com

I will begin with ehow.com and explain the key differences between the mobile version versus the desktop version.

Below are screenshots of both the desktop version and mobile version of the ehow.com sites. Beneath the screenshots I discuss some key differences and key similarities between the 2 site versions.

 Desktop version of ehow.com – URL: http://www.ehow.com/

 Mobile version of ehow.com – URL: http://www.ehow.com/

Key differences between the desktop and mobile versions of ehow.com:

• The main navigation is located in different areas of each version of the site.
• The color on the main navigation buttons within the desktop version are using white text on a green background, whereas on the mobile version the main nav uses large clickable colored buttons for each category, with each lying on a different colored background.
• On the desktop version, for each main nav category it also shows (beneath the slideshow at the top of the page) featured articles for those categories again with each category using a picture, a link to an article that is relevant to the subject matter, and clickable sub-category links leading the user to related articles, information and tips.   Whereas on the mobile version the layout is much narrower and only shows an area titled “Browse Categories” which have these topics listed beneath vertically as clickable text links using blue text on a white background.
• The layout of the page is much wider on the desktop version.
• The image slide show at the top of the desktop site is set to automatically fade from one picture to another, whereas in the mobile version the user has to manually swipe your finger from one picture to another to view them.

 Key similarities between the desktop and mobile versions of ehow.com:

• Each site seems to offer the same content.
• Each site offers a “Search” area at both the top and bottom of each site.
• The URL’s are the same for both versions of the site.
• Each site uses the same color scheme.

Now let’s take a look at the Amazon.com desktop and mobile versions.

 Desktop version of amazon.com – URL: http://www.amazon.com

 

 Mobile version of amazon.com – URL: http://www.amazon.com/gp/aw/h.html

Key differences between the desktop and mobile versions of amazon.com:

• The desktop layout is much wider than is the mobile version, and each site subtley uses different colors.
• The main navigation categories on the desktop version are at the top of the page above the slide show, whereas on the mobile version the main navigation categories are displayed as a list of clickable text links found beneath the slide show.
• The “Your Account” button is listed at the very top of the page on the desktop version, whereas on the mobile version you have to scroll down about halfway to access it.
• On the desktop version there are advertising links running down the right side of the page, whereas on the mobile version there are none.
• On the mobile version at the bottom of the page they offer an “Amazon.com Full Site” link, whereas the desktop version does not offer a link to the mobile version.
• The desktop version shows your “Recent History” of recently viewed items; the desktop version does not offer this.
• The desktop version offers related links to other sites; the mobile version does not.
• The URL’s are different for each site.

Key similarities between the desktop and mobile versions of amazon.com:

• Each site has a prominent “Search” bar at the top ONLY.
• Each site is advertising the same products within a slide show at the top of the home page.
• The slide show at the top of each site’s home page is one in which you manually have to swipe to see the next image.
• Each site uses the same fonts.

Now let’s take a look at the Lynda.com desktop and mobile versions.

Desktop version of Lynda.com – URL: http://www.lynda.com

Mobile version of Lynda.com – URL: m.lynda.com/?rp=http://www.lynda.com/

Key differences between the desktop and mobile versions of amazon.com:

• The mobile version has a video at the top of the page just beneath the main nav titled “About lynda.com: Who we are”; the desktop version does not, it simply has a picture at the top of the page.
• The URL’s are different for each site.
• On the desktop version the “log in” button is at the top right of the page; on the mobile version it is located beneath the video at the top of the page.
• On the desktop version you’re offered 4 types of subscriptions: “Individual Memberships”, “Business”, “School”, “Government”. The mobile version only offers a “Subscribe” button, and when clicked on it still does not offer the same categories as the desktop version.
• The desktop version layout is much wider than is the mobile version; 2 completely different layouts.
• The desktop version offers more information than does the mobile version.

Key similarities between the desktop and mobile versions of amazon.com:

• Each site offers a prominent “Search” bar at the top of each page.
• Each site displays the main navigation at the top of each page.
• Each site uses the same color scheme and fonts.