| As a front-end web developer, I've struggled with | | | | experience that ranges from elegant to tolerable on |
| trying to accommodate for a variety of screen sizes | | | | the majority of people who will be access your site. |
| and resolutions. It's a hassle, but it's necessary to | | | | A new standard resolution: 240x320. |
| ensure your work is accessible by the largest amount | | | | With all this talk about different screen sizes, it's |
| of people possible. This is no different with the mobile | | | | important to note something important: |
| web and in fact can be more challenging since there's | | | | The trend in display size is moving towards a common |
| a wider spectrum of screen sizes to develop for than | | | | resolution of 240x320. It's becoming something of a |
| with traditional desktop design. | | | | standard in the same way that modern desktop web |
| I find what works best with the desktop also translates | | | | sites are optimized to display at roughly 1280x800. |
| well with mobile devices: Cater the the most common | | | | 75% of phones provide a screen resolution of |
| sizes and code your site in a way that will degrade | | | | 240x320 pixels or more. This number is only increasing. |
| nicely for other devices. | | | | It will become more of a standard. |
| Designing for the mobile web is not about finding new | | | | Keeping 240 pixels as your optimal screen width will |
| ways to fit the bells in whistles in into these devices. Its | | | | ensure the best user experience for the majority of |
| about deciding what is valuable to the site and what is | | | | mobile web browsers. |
| expendable in this format. This often means removing | | | | Now, this doesn't mean you should strictly code widths |
| extraneous elements and really thinking about what's | | | | of 240 pixels into your divs or images, it just means |
| valuable to the core of the site. | | | | you should design with the thought in mind that most |
| Phones come in a variety of sizes. | | | | people will be viewing your site at this resolution. A |
| True, there are a ton of phones out there. Different | | | | good standards compliant layout will adapt to many |
| shapes, sizes, operating systems, web capabilities. This | | | | screen sizes. |
| is important to know when developing for mobile | | | | A word about Height. |
| platforms, but what's more important is to know how | | | | While width is the real obstacle in designing for mobile |
| many of these people are really in your target | | | | platforms, height doesn't seem to be as challenging. |
| audience. I've found the answer is not many. | | | | Touch interfaces make navigating and scrolling through |
| Do you need to target all sizes? | | | | content a breeze. Common sense should tell you not |
| I don't think so. | | | | to drop a 5 inch high header at the top of your mobile |
| I've chosen to cater mobile web development to | | | | site, but height of site is generally not much an issue. |
| devices that it really shines on. Smartphones. | | | | Those who frequently browse the web from |
| That's not to say that you shouldn't strive to make the | | | | well-equipped devices are accustomed to scrolling. |
| site accessible on as many devices as possible, but | | | | Advise on creating layouts that work on all phones. |
| browsing the web on the majority of phones is a | | | | So how do we cater to all of these devices? Do we |
| cumbersome experience and not an activity most | | | | create a separate site for each devices, similar to the |
| users of lower end phones even engage in. | | | | Netscape 4 days of the past? |
| Let's look at the numbers from an article at published in | | | | No. |
| November of 2009. | | | | The vast majority of modern phones -- over 80% |
| * Based on their findings, iPhone accounts for half of all | | | | offer full xHTML (WAP 2.0) capabilities. Take |
| smartphone traffic worldwide. | | | | advantage of this to create standards compliant, |
| * The Symbian OS, acquired by Nokia, accounts for | | | | flexible CSS based layouts. |
| 25%, but is on the decline. | | | | This will allow you to write semantic code, separate |
| * Google's android based phone (Droid, HTC Magic, | | | | your content from presentation, and to create sites |
| myTouch 3G and HTC Hero) have grown to 11% -- | | | | that degrade nicely for the majority of users. |
| and increasing rapidly. | | | | Here are a few tips: |
| * BlackBerry OS accounts for 7% of the traffic and is | | | | * Don't constrain proportions. We've established 320 |
| on the decline. | | | | pixels as the optimal width for mobile devices. Does |
| * Windows Mobile OS, Palm OS and others account | | | | that mean fix all the values at 320, forcing viewers on |
| for the remaining web browsers. | | | | small devices to side-scroll the to view all of your |
| The iPhone's 50% share a pretty big number. | | | | content? No. Rather, create a fluid site that will adapt |
| Fortunately for us, getting our sites to shine on an | | | | to many screen sizes. |
| iPhone is relatively simple task. After all, the full | | | | * Make use of standard HTML tags like H1, H2, ul and |
| featured Safari browser will do a good job of | | | | strong to format your text. Don't expect each devices |
| rendering our site in the phone as long as it already | | | | to format your custom.title CSS class properly in each |
| looks great on a desktop machine. | | | | browser. But expect that they will have their browser |
| That's not enough, though, as we want to create sites | | | | will be sophisticated enough to display your h1 tags in a |
| fully optimized for mobile browsing. Not just shrink | | | | larger font than your h2's. |
| down the existing site to display on the phone. | | | | * Use CSS to redefine these standard tags, but don't |
| But the basic point is, the iPhone offers an environment | | | | get bent out of shape if they don't look the same |
| that is very conducive to displaying beautiful mobile | | | | everything. It may not appear in your particular font |
| sites. | | | | and color, but it'll still be an H1 tag and that's what's |
| What can we gather from this? | | | | really important from the SEO side of things. |
| If you design and market sites that cater to iPhone, | | | | * Design sites in a stacked fashion. Don't float divs or |
| Android based phones and Symbian OS and you've | | | | create side-by-side layouts using tables. There's just |
| got over 85% of your potential market covered. | | | | not a lot of real estate to work with and a linear, or |
| Put the forethought in to building these sites in a | | | | stacked display on content is more intuitive on mobile |
| standards compliant way and they will degrade nicely | | | | device. |
| to the majority of devices. This should create an | | | | |