The rush to be tablet and mobile friendly
In the last couple of years there has been a rush by many corporations and big brand names to get their websites to work on tablets and mobiles in addition to desktops, and make them friendly and easy to use. In addition, there has been an explosion in development and deployment website apps by firms both big and small.
However, website designers should keep wider screen sizes in mind when designing websites because there are many web users who have wider screen desktop monitors and laptop screens both at home and in the office. Websites that have a small width will in many cases show wasted or unused screen space. Screen sizes do keep growing little by little. Just go in to the local PC world and take a look.
Chris Lake from Econsultancy pointed out in his article “12 upwardly responsive websites designed for big screens” some interesting findings about the number their visitors who use wide screens compared to visitors who use mobile devices.
For example a majority of their visitors use 1,280 wide screens while a smaller number use 1,680 and 1,920 wide screens.
How designers can consider wider screens
There are various ways that designers can make use of the space provided by wider screens. These include using the HTML5 boilerplate system that is used in Adobe’s Dreamweaver, attractive background images, size adjusting images
Dreamweaver CS6 makes use of HTML5 boilerplate. This creates a cascading style sheet layout that incorporates three design layouts using fluid html div tags. Each design layout has a default size range for desktop, tablet and mobile.
Designers who use this method will be able to design their website and take into consideration the different screen sizes on devices. In Dreamweaver CS6, the default size range for desktops is from 769px to a maximum size of 1232px. This can be changed and made wider by increasing the range to a higher size.
Attractive background images
Background images were all the range a when the web was fairly young and before CSS really took off. They are back again in more friendly ways.
In many cases background images feature in websites two ways. The first way is that an actual background image is used and is typically either an image using single colour or various colours. This image sits at the top of the page and repeats across the page. This repeat action is set by CSS and allows the space behind the content to the filled.
The second way is through full CSS3. Using various behaviors you can replicate what has been done in the past by background images. Examples include making gradients from left to right, top to bottom or even bottom to top.
Together with the HTML5 boilerplate method a website would adjust to being viewed on a larger screen very well.
All websites use images and can be made to adjust to different screen sizes. This can be achieved by removing the image height and width HTML code when inserting an image into a webpage.
In order to fit the wider screens images should ideally be contained in a fluid div tag accompanied by additional content or not.