Web Design for Different Screen Sizes

When you design for print media you work with graphics and text and arrange them in a way that is both pleasing to the eye and conveys your message. With the web you have to do the same but there’s a whole lot more to it.

With print, the publication has a fixed size. With web design, the size of the page can vary. Imagine trying to paint a picture when your canvas keeps changing size. Users view web pages through different devices and different software with different screen resolutions. Most web pages are still viewed on a computer screen but these days can equally be viewed on mobile phones, PDAs, web books, even games consoles. In terms of software, the main web browsers are Microsoft Internet Explorer and Mozilla Firefox but there is a whole host of others. You may have heard of Chrome, Safari, Opera and beyond that mobile devices use their own. Each web browser is a program designed to interpret and display web page code (HTML) but they all interpret it slightly differently so when writing the code you have to be sure it will display as you want it to. As well as conventional web browsers there are also specialised screen readers which read the text on a web page aloud for those with visual impairments. This is where accessible design comes into play. As if that wasn’t enough to contend with, individual users also have different screen resolutions, some viewing the same content on a screen resolution 4 times larger than others.

Areas of the screen can be stretched or squashed to fit with the screen size and, rather than being given fixed heights and widths, are given maximum and minimum dimensions within which they can move.

So, when you look at a web page, you need to realise that what you see will probably not be exactly the same as what others see. The content should be the same but the layout will vary.

As people buy newer computers with larger monitors and higher resolutions websites need to be redesigned. The majority of users in the UK use a Windows PC with Internet Explorer 7 and a screen resolution of 1024×768 pixels. Three years ago the typical UK user would have been using Internet Explorer version 6 with a screen resolution of only 800×600 pixels. If you haven’t redesigned your website in the last 3 years it’s time it was optimised for the new generation of visitors.

Google Chrome – first impressions

I thought I’d just give my tuppence worth on Google‘s new BETA browser, Chrome.

When I first heard about Google’s new browser it was with dread. As a web developer an important part of developing any web page or application is testing that it works in the major browsers. Having another browser on the scene, and with a big name like Google behind it you know it’s going to have a lot of users, means more testing and increases my chances of having to recode.

Before downloading it I read Google‘s page on Why We Built A Browser. The page itself is titled “A fresh take on the browser”. On it Google openly admits “We’ve used components from Apple‘s WebKit and Mozilla‘s Firefox“. So, maybe not an entirely fresh take then?

So, on going in, what are my first impressions? Well, first thought, it looks pretty much the same as IE and Firefox. The browsing tabs have been shifted above the address bar, which, as far as I can see, is just a change for change’s sake rather than serving any useful purpose – why make people have to get used to something new when the browers they are used to work just fine? Other than that, without delving too deep, I’m struggling to find anything radically different.

On the plus side, it doesn’t have loads of toolbars, keeping a nice clean, simple appearance – one of the great strengths of Google’s search engine. After using it for a while, I noticed that it remembers the sites you visit and uses this data intelligently to make it quicker to revisit them. It’s fast too, noticeably quicker than IE.

On the negative side, it doesn’t seem to handle RSS feeds and feed reading as well as IE or Firefox (with RSS add-ons) but I’m sure this will come.

Firefox has been the web professional‘s choice for years now and with good reason. So, will Chrome offer us anything new that Firefox can’t? As I see it, the reason for Firefox‘s success hasn’t been about speed or security but freedom. It’s great strength is that it’s so easy to customise and ease of using add-ons make it much more than a tool for reading web content. I’m assuming that, being an open source project, Chrome will follow suit.

It seems a shame to me that all of the excellent developers out there who have been building add-ons for Firefox will now be split between Firefox and Chrome.

I don’t think that Google will better Firefox but they will be able to match it and with their finances and history of buying up big web companies (YouTube, FeedBurner) I wouldn’t be a bit surprised if we saw Google Firefox before too long.

See what you think – Google Chrome