Web design for tablets



Web designing for tabletsWith the recent arrival of tablets on the computing scene we are about to see a game changing event in that mobile computing will be bigger then desktops and laptops. (my prediction lets see how it goes)

What does this mean for web design

This will mean that web designers will need to be taking a few steps back to optimise designs for smaller screens and lower speck systems. Optimising for the smaller screen shouldn’t be to big a deal as at the moment to encompass a bigger audience the target for a fixed width design is 960px for most new tablets this should display fine. I for one will be designing with a fluid interface in mind to allow the widest possible audience to view the websites. For the smaller devices we should be looking at a revised css targeting those systems

 

Interactivity

 

Many web designers may use flash or JavaScript for interactivity or video I have found that some tablets struggle (speed wise) with javascript and as we know the apple ipad does not use flash and if we use these in our designs we may be shutting out a large part of our audience

 

Navigation

 

for the first time we have had a change in input device from the humble but very effective mouse to the finger. The finger is somewhat larger then the pointer of a mouse this growth in our pointing device means we have to pay particular attention to our navigation size making sure there is enough room for even the most think fingered people to click the correct link. I know from experience how frustrating it can be trying to click links that are to close together.

 

CSS Frameworks targeting mobile web

Inuit CSS

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

1140 css

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
 

About The Author

Leave a Reply

Your email address will not be published.