is my site mobile friendly? (Part 1)

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability. 
  
In this article I'll introduce some fundamental steps that, will help you avoid the pitfalls that have caused many other mobile sites to fail. By the end of this article you'll know exactly where to focus your efforts in order to build a successful mobile site.

For our purposes, we divided all mobile devices into three categories.

1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone, the G1 and many Android devices. We will refer to this group collectively as the iPhone. These devices will be able to support all of the optimizations we put in place.

 2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.

3. Devices that don't support CSS. These devices will render our content from the markup only. We don't have to provide any special optimizations for this group. Since our CMS allows us to use HTML standards, it will still render effectively on these devices.

 

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?
Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

 

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.