Mobile Web and Responsive Design

When it comes to web design, Gone are the days when web design was just for a desktop or laptop computer. As technology has increased, people are able to access the web from their cellphones, tablets, game consoles, cars and even refrigerators. As web designers, we must design with these accessibility discrepancies in mind. Having a website with a responsive design or a mobile version of a website are great ways to make your website accessible to more people across different platforms.
At first glance, it may seem that mobile website design and responsive website design are the same. They both:

  • Are designed with a small screen in mind
  • Are set using ems or percentages instead of pixels
  • Try to avoid excessive scrolling

However, they are different. According to wegraphics.net, mobile sites include a separate url (usually “mobile.yoursite.com or m.yoursite.com) and should implement:

  • One column layout. Users shouldn’t have to zoom in on mobile to view all the content at a comfortable size.
  • Simplify and optimize content. Remove the sidebar and keep only the necessary information.
  • Reduce navigation. Have the navigation exist in the form of a dropdown menu so that it’s easier for users to click.
  • Avoid Flash, Javascript and pop ups. Mobile does not support them.

Responsive websites on the other hand enhance the original website. According to coding.smashingmagazine.com, these are some elements of a responsive website:

  • Images and text resize proportionately. As you change the width of the window from desktop view to smaller screens, all of the content changes its position on the page so that it is still viewable, but able to be comfortable accessed depending on the screen size.
  • Media queries allow you to maximize control of how your content looks to your user depending on screen size. In your CSS, you can set @media with a minimum width to have a certain style.

An example of a website with a responsive design is amazon.com. This shopping website for all types of products has a responsive design. If you resize your browser window, the layout conforms to the shape like liquid. There is, however, a min-width set, so that it stops resizing at a certain point. With this liquid layout, a user can comfortably browse their website whether using a desktop or a tablet.

Twitter
has a great desktop website as well as mobile website (mobile.twitter.com). They look similar except where on the desktop website you can see twitter backgrounds, the mobile version omits that completely. What you get instead is just the tweets displayed down your timeline. The icons for visiting your profile, writing a new tweet, seeing your mentions and checking your direct messages remain the same on both pages. The mobile version is also web responsive, so it fits to however small your screen is. It lays things out in a one column format and the tweets on your timeline become the first thing you see.

In conclusion, designing a website with responsive design and designing a mobile website has similarities as well as differences. No matter what, you want to make sure that your user is viewing the most important elements first. An ideal website is able to be scaled and viewed across all platforms with virtually no load time and very little scrolling.

Advertisements