Web Design News 08/07/10

Paul Boag

This week: A new BBC News homepage on the way, Using CSS3 and media queries to make robust background images that fill the browser and learning to love vendor prefixes.

BBC News redesign on the way

This week the BBC announced that they’re nearly ready to launch a major redesign of its web site, stating: “We have focused on design and navigation, looking to see how we can make all the existing content we produce each day easier for you to find, use and share”

The BBC are one of the leaders in usability and accessibility and it will be interesting to see what changes come with the new design and I’m sure you’ll see a raft of posts dissecting the new site when it’s launched. This post by Sitepoint highlights some of the upcoming changes focusing on the areas where sections have been cleaned up and streamlined.

Given the BBC website’s ubiquity when clients refer to other sites to be ‘inspired by’, I’d recommend taking the time to get really familiar with the new site when it’s launched, not only learning what they have done, but why they’ve done it too.

Supersize that background, please!

Using large images that fill the viewport of a users’ browser has long been a popular technique among web designers, especially when it comes to marketing and photography sites, however the age old issue of viewport size is a constant worry when deciding on the size of image to use. Over the past few years we’ve seen an increase in screen resolutions with the most popular being 1024x768px, 1280x800px, 1280x1024px, and 1440x900px and we’re also seeing an increase in smaller resolutions as mobile devices access our sites more and more.

Supersize that Background, Please!

This article by A List Apart shows how you can use both CSS3 backgrounds and Media Queries to deliver large backgrounds tailored to the specific viewport size of the visiting user and which will work in just about any modern browser you may encounter.

Learning to love vendor prefixes

Vendor prefixes (such as -o- -moz- -webkit-) can, at times, be annoying and cause us to duplicate our code to suit the requirements of the browsers on the market today. This duplication has caused many to call for them to be dropped, or rolled into a specific prefix like -beta-, however this article by Eric Meyer takes you back in time to the browser wars of the nineties where Microsoft and Netscape implemented wildly different versions of the box model and wreaked havoc for years, causing us pain even today when catering for older browsers.

Browser icons

Eric points out that the vendors still implement things differently today, and that the vendor prefixes are necessary for designers today to ensure their code works around these inconsistencies without hacking the CSS parsers like we used to do ‘back in the day’ so while prefixes may be annoying at times, it’s better than nothing at all.