Web Design II

Responsive & Mobile Design

Have you ever wondered about the principles and differences between mobile website design and responsive website design? Mobile design and responsive website design has become the present of surfing the web. Most people now surf the web on their smartphones instead of desktop computers.

Rendering

For mobile sites, rendering becomes essentially a copy of your website but the server does the work to deliver an optimized page that is smaller and easier to navigate. For responsive sites, the device does the work and automatically adjusts according to the device’s screen size. The responsive site serves the same page for all the users and the CSS, and Javascript reformats the user’s web browser.

Content

For mobile sites, the site may not satisfy all the users who expect full features and functions. Mobile sites usually include limited information. Unlike mobile sites, responsive sites will always contain the same information throughout each browser.

Domains

For mobile sites, a new domain must be created for a mobile site. Most sites have a “m.” before the domain of the site. For example, Youtube, Twitter Abercrombie and Fitch, and Nike all have mobile site domains. For responsive sites, you do not need a separate domain; it lets you keep your own domain and only the code changes for the different screen sizes. For responsive site examples, Behance, Panera, and AIGA Baltimore.

For the Future or Present?

For mobile sites, the sites could require higher maintenance and expenses to keep everything updated. However, responsive design is more forward-thinking in terms of technology. It will be a better investment on your end because it will be less maintenance for several domains.

Mobile or Responsive?

Mobile sites are the practical choice if you do not want to completely overhaul your current desktop site. Responsive sites are generally more elegant and more streamlined. Consider a responsive site if the website is being made from scratch. If you are happy with your current desktop site, a mobile site might be a better route to go.  For more information about Mobile sites, check out this website; Affordable Web Design,that describes the importance of mobile websites.

Mobile Design vs. Desktop Design

Mobile Design:

  • It is the present!
  • Twice as social than desktops.
  • Only include the most crucial functions and features.
  • Mobile design most often has a vertical navigation.
  • The screen is just like land; screen space is limited.
  • Also, includes minimal footer information.
  • No hypertext and the use of minimal graphics.

Desktop Design:

  • Includes a wide range of content.
  • Most often has a horizontal navigation.
  • The footers have more information.
  • There is hypertext and most often there is a lot of graphics.

The images above compare the navigation of the different screen resolutions for American Eagle.

This website, UX Matters, offers a good site on the difference between mobile and desktop websites.

Overall, it does not really matter if the website is a mobile website or responsive website, users just want the site to work!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s