Mobile Web Design Best Practices #2 – Finding the Right Dimensions for Your Mobile Friendly Website

When designing a mobile-friendly, responsive website, many web designers are curious as to what dimensions they should build their website within. There are several guidelines to follow when designing your site, especially when it comes to the width of your pages and how well they adjust to various screen sizes.

 

One way to keep your site mobile-friendly is to set what are called “breakpoints” in your website’s CSS file. This helps give your site the ability to adjust to different screen resolutions, especially when it comes to width. The last thing you want your website visitors to see, especially on mobile, is horizontal scroll bars! As a typical rule of thumb, if the user’s screen is small than 480 pixels, this is when the site should display a smartphone layout. If the screen size is between 480 and 1024, you’ll want your site to display the tablet layout. Any resolution higher than that should automatically display the “regular” desktop layout.

 

There are many responsive website templates out there that adjust to various mobile screen sizes. But what if the script to detect the screen resolution doesn’t properly recognize it? This can lead to your site being hard to use or even unusable for some mobile users. This is something that you definitely don’t want to happen. But following these width guidelines should eliminate most major issues.

 

Of course, this means that you’ll be creating CSS rules for every one of those three (or more) layouts. However, this can be a good thing, as you can eliminate higher-resolution photos and JavaScript code using these scripts that won’t serve a purpose on mobile devices. Really, the best design template to use for a mobile friendly website is one that is built on columns and rows that adjust automatically based on how they are being viewed. This is done by using what are called fluid containers, some of which are defined using set widths, and others that automatically adjust to resolution. This way, when new devices are released, you don’t have to create a new script for it.
In the long run, you just want to be sure that your website is adaptable to as many screens as it possibly can be. Testing your website on a wide array of devices is crucial.  But trying to have the same website display on all devices without lots of extra fancy CSS scripts is really the best way to go. The less your website has to work to display correctly, the faster it will load, and therefore, the better it will perform.