As a web designer I’m always keen to keep on top of new trends and technologies. 2011 seems to have been a interesting year so far for web designers. Typography has taken a new level with the release of new technologies such as Google Fonts, creativity seems to have increased ten fold with the new coding techniques and standards available to web developers such as HTML5/CSS3.

One of the best aspects of the past few years is the lack of constrains once put on websites to have all the content ‘fit’ into a certain visible space before the viewer needs to scroll the web page.  Back in the early ‘noughties’ we had standard monitor screen sizes to develop to (800×600/1024×728) , but nowadays these screen sizes are so varied because of the different viewing platforms such as small screens like mobile phones/iPads to huge 72″ HD TV’s,  developing to fit a particular screen size has become less important.

It definitely make us more aware of how scrolling has to be accepted and used in web design. I still work to a width of 1000px but I have no restrictions on the height.

Mobile Web Browsing

Mobile web browsing has become more popular the past few years. I think there is a huge push now to start developing mobile companion websites as standard, especially for e-commerce website and other content heavy sites.

Designing for mobiles or hand held devices requires a certain level of creativity as you have less space to work with. It need to be clear and concise but still hold the feel for the original website counterpart.

QR: Quick Response

Square barcodes have started popping up all over the place, busines cards, magazines, brochures to name a few. They are called QR (Quick Response).  They work by taking a photo with your camera phone, with the right app your phone will recognise the information in the QR such as a telephone number, contact address ,website URL or other specific information.

For web design this works brilliantly,  the beautiful thing about QR is that you can use it in a variety of ways such as featuring your QR on your website so that site visitors can use the QR to shortcut to your mobile site. You can also track your visitors through QR by placing a special referral code on your URL used through printed media.

Try the above to QR to find the URL link to my website.

Already Facebook has spotted this trend and has updated their website to allow custom landing pages. On closer inspection these ‘pages’ allow for your facebook page to become a website within Facebook, below I have created a Welcome page, which is basically and iFrame feed. I could continue to build more pages to fully sell my company within the Facebook platform.

Flash vs jQuery

I’ve always held Flash close to my heart and began my university life designing with Adobe Flash. However these days I find myself preferring jQuery for most of my website animations. Since Apple made the decision to exclude the Adobe Flash plugin from the iPhone and iPad website designers have sought alternatives to Flash. The results have been amazing. I only use Flash now for application based projects and online games.

Technologies such as jQuery are allowing for more interactive elements in websites with relative ease, whilst still retaining clean code and accessibility. There are certainly some excellent examples of how jQuery can bring a website to life… Check out 35 really useful jQuery plugins.

Typographic Revolution?

One of my frustration as a web designer is the lack of font choice in websites. There have been many techniques available to overcome this but each has their own pit falls. With ever more emphasis on SEO (Search Engine Optimisation) the only true clean solution is using new fonts, as fonts, rather than sliced and diced images or SIfr or other almost OK solutions.

Recently I’ve seen a number of companies providing web fonts as a servce, where the third party company host fonts (and licenses) that designers can use in live development environments, but at a cost. This is great if you can afford that, but what if your on a budget?

Google Fonts

I’ve been using Google Fonts, which makes web fonts quick and easy to use for everyone, including professional designers and developers. They believe that there should not be any barriers to making great websites, and I agree.

Their font collection is growing and the results are good. Like most fonts they display a lot nicer on Mac than PC and some of them really need to be tested before using in a production environment. However this opens up a whole new world of creativity.

For me there seems to be a U turn back to brochure designed websites, where websites mimick printed media, once this was hard to achieve within websites without compromising on web standards and accessibility but perhaps now with the help of Typography and HTML5 the ‘brochure design’ might be making a comeback.

Here are a few awesome typographic designs to think on…

Photography Overdrive

Broadband speeds are increasing, download times are becoming less of a concern for web designers with better image optimisation. Photography is becoming more widely available with the likes of iStockphoto and other stock photography websites. Huge images in web design have become less of a challenge, websites are popping up where the central focus is the huge image, see examples below:

This trend has been building for many years, but the trend seems to be leaning towards more of an illustrative use, in that the images become part of the experience rather that just a huge image (see GotoChina above)

CSS3 Takes Hold

It’s been around a while, designers have been following it’s progress, but the past years it seems to have become mainstream.

Not every CSS3 features work in all browsers (checkout this  handy link to see which browsers have adopted what parts of CSS3) but it’s use has been seen across the net, such as rounded corners, box shadows, glow effects, CSS3 animation, @font-face.

Check out these examples…

Emboss-Looking Text

Subtle Rounded Corners and Shadow

A few things to note however….

• Don’t rely on CSS3 to do your layout. They should only be used as enhancement.
• Ensure your layout doesn’t look extremely different when CSS3 features are not supported.
• When using @font-face feature, always include web-safe fonts with similar width, kerning, and x-height for backup.