Jan 17Screens are getting bigger… and smaller
When I first started building web sites 10 years ago, most people had 15-17″ monitors and the screen resolution was 800 pixels by 600 pixels.
Since this was the most common resolution, you would make this the baseline for your design. Looking back on this now, things were so easy – you designed for one resolution and didn’t really have to worry. As the years have gone by the screens have grown, as has the baseline, now we are designing for around 1,000 pixels wide. The problem today is there are so many different ways a user could view our site – they might be on a 24″ screen, a 13″ laptop, or from their mobile device. So, the same site that supports the 1,920 pixel-wide resolution will have to deal with the same user that has an iPhone with a 480 pixel width.
Here are a few tips to deal with the different ways your site will be viewed:
Background Size
Make sure your background repeats properly or is big enough so it fills most of the screen of the higher-end displays.
There are a couple different techniques to handle backgrounds. The two we most commonly use would be to create a repeatable background along the x-axis with a solid color that sits below for the longer pages. The alternate to this that is becoming more common is to use a large non-repeatable image that takes up most of the screen.
Page Fold
Don’t forget that, as a designer, just because you have a 30″ monitor doesn’t mean the site’s audience does; more likely they don’t, so consider the page fold. It has become fairly popular to build sites with large marketing headers. On large monitors these sites look beautiful, but small, mobile laptops are becoming increasingly popular, and these large header typically take up most of the vertical space, the page fold. A friend of ours, Mike Gowen, recently commented about this. I thought Mike summed it up best with the following: “Content that is not in immediate view is always going to be viewed less than content in immediate view especially if an extra action is needed to view it, such as scrolling.” Our advice is to keep your goals in mind when you are designing your site. If your goal is to get users to book a stay at your resort, it is a good idea to make sure the call out to book is visible while they are looking at the beautiful images of the resort in the header.
Mobile Version
Have a mobile version of your site. The mobile market is exploding, and assuming no one is going to be viewing your site on their mobile device is silly. Visitors could be looking up an address to your store, a telephone number to call, or the time of an event. Having a mobile version can be as simple as a single page that shows contact information. Here is one way to handle it: include a this php script, and then the following code.
include('mobile_device_detect.php'); $mobile = mobile_device_detect(); if ($mobile) { header( 'Location: http://yourdomain.com/mobile' ) ; }
