New Blog Address: http://blog.grayjunior.com/

Mobile Web: What and How?

Back to top ↑

Introduction

Before you go wondering what this is all about, I have to say that it has nothing to do with “popular mobile of the year”, “2010 best smartphones”, nor any advertising of any of the listed phones. This post is only meant for additional information for anyone who loves designing. Be it web, app, or any possible other things, mobile is now in our list of device and screen resolutions to be considered.

As the mobile devices gain popularity, the usage of mobiles to surf the web increases. As a result, when we design a website, we have to develop a seperate design for the mobile devices. There are quite a number of popular smartphones in the market now, and here’s a short list of screen resolutions for those devices:

  • Apple iPhone 3GS – 320 x 480 pixels
  • Apple iPhone 4 – 960 x 640 pixels
  • Samsung Galaxy S – 800 x 480 pixels
  • Samsung Epic 4G – 800 x 480 pixels
  • HTC Evo 4G black (Sprint) – 800 x 480 pixels
  • Verizon HTC Droid Incredible – 480 x 800 pixels

CSS3 For Mobile

Now that we know the sizes, how do we detect if user is using a smaller resolution? CSS’s @media queries allows you to style your layout based on the screen size the users are browsing with. An example of such technique:

    The Code: 

  • @media screen and (max-width: 1400px) { background: #000; }
  • @media screen and (min-width: 900px) { background: #fff; }

The “screen” after @media, simply refers to the type of presentation. E.g. print, screen, etc. By default, @media queries targets all type of presentations, unless specified otherwise. Therefore, putting an “all” into the @media queries is the same as not putting any, as shown below:

    The Code: 

  • @media all and (max-width: 1400px) { background: #000; }
  • @media (min-width: 900px) { background: #fff; }

The “max-width” and “min-width” condition applies for the size of the browser the user is on, but to specifically target a device, there is a seperate set of condition you could apply for better results.

    The Code: 

  • @media screen and (max-device-width: 800px) { background: #000; }
  • @media screen and (min-device-width: 600px) { background: #fff; }

Alternatively, if you think its best to seperate different set of CSS for devices, you may wish to use this particular HTML coding.

    The Code: 

  • < link rel=”stylesheet” media=”screen and (max-device-width: 800px)” href=”example.css” />
  • < link rel=”stylesheet” media=”screen and (device-aspect-ratio: 16/9)” href=”example.css” />

For best practices, I would suggest separating a device CSS from the standard CSS styling. Speed – It is only logical to load the stuffs that are required for the website to work. Why load something more? This particular factor is important for mobile devices as speed is the key. We have limited speed, usage and connectivity as we move.

Inspirations For Mobile Web

 

Mail Chimp Mobile

Mail Chimp Mobile: http://mobile.mailchimp.com

Kt Tape Mobile

Kt Tape Mobile: http://m.kttape.com

In most mobile web, styles and graphics are reduced to the minimal to keep a clean and neat interface for users to browse easily. In some cases, JQuery and ajax are still used to maximize the potential a mobile device is capable of giving. Such technique creates an interactive user interface without having users to re-load or leaving the page.

Conclusion

I believe that web on mobile shall continue to increase its popularity, all thanks to iphone which started to heavily influence its consumers in using it anywhere and everywhere. With their larger screens, its so easy to read and surf the web now compared to the past. Now, the entire mobile market starts using the same concept, and the trend is born.

If I do miss out any important key points to note, or mistakenly assume something please do tell me, as I made this post in the hopes of sharing what I have already know to everyone.

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

%d bloggers like this: