The topic of the conference was CSS3. The first couple of speakers covered the more technical aspects of CSS3. Then one speaker in particular, Andy Clarke, grabbed everyone’s attention when he started talking about what it meant to be “hardboiled” and showed us some pretty cool things you could do with CSS3.

At this point rounded corners was about as far into CSS3 as we had gone and when Andy began to show us cards flipping over, pictures moving around and things fading in and out, well we sat up and got really interested.

Andy also stressed that it should be expected that websites look different between browsers and that we should be designing for the best most capable browser.

Our next step towards becoming “hardboiled” happened, a couple of months later, when Lewis and I attended the Future of Web Design conference in London.

We were really impressed by two fantastic speakers, Aral Balkan and Aarron Walter, who presented on User Experience (UX) and how we shouldn’t be building websites that just do the job, we should build websites that are truly enjoyable for the user and can evoke emotional responses from them.

Aarron Walter at FOWD

CSS Guru and Dribbble founder Dan Cederholm re-enforced this notion on UX and explained how we can use CSS3 to enhance and enrich a user’s experience. Dan’s ideas seemed to fit very well with what we had heard previously from Andy Clarke.

When returning to Forepoint we adopted a very clear development methodology, in which we develop first for all contemporary web browsers, using HTML5 and applying CSS3 techniques then degrading for the less capable browsers. This methodology can be seen in our own website, the WANO website and on some imminent websites we are working on right now.

World Association of Nuclear Operators Website

Last week saw the launch of Andy Clarke’s book Hardboiled Web Design. We had been waiting eagerly for this since Andy first spoke to us about his “Hardboiled” ideas on the Carsonified Conference. So last Tuesday Lewis and I waited rather impatiently for the book to launch – this basically involved us repeatedly refreshing the fivesimplesteps website until the book launched.

So far I have only managed to make my way through a few of the chapters, but I’m already completely hooked.

The book takes a no-nonsense look at the current state of working in web and casts a lot of the outdated ideas away. In the first few chapters Andy explains how it’s neither feasible nor cost effective in these modern times to expect websites to be pixel perfect across browsers. He then goes on to say:

“When we shift focus from looking backwards to looking forwards, invest time in design instead of in lengthy workarounds for less capable browsers, our bosses and customers will see real improvements in brand experience.”

And

“[T]hat designing from the top down ensures that everybody will see and experience a website in a way that’s appropriately crafted and responsive to the capabilities of their browser. Most importantly, no one will be left out.”

So far this book has confirmed that Forepoint’s development methodology is on the right path – we are getting hardboiled! The advantages are clear all round. Clients get the best website for their money, users get the best experience, crafted for their browser and we get to use the latest technologies to build our websites.

Hardboiled Web Design CSS3 Transformers & Transitions

Hardboiled Web Design is well on its way to being crowned the best book I have read this year … so I’m off to read to some more so that we can get even more “hardboiled”.

As a result, web designers have to keep their eye out for the latest trends but more importantly what the next big trend is going to be in order to keep their websites looking new and fresh for as long as possible.

We are now well into 2010 and so far this year it’s clear trends are changing quickly. With more designers and developers becoming aware of the powerful new features of CSS3 (Cascading Style Sheets), and to some extent HTML5, we are constantly looking for ways to utilise these new features to produce creative, impressive designs. With this, the differences in a website’s design between browsers continues to expand and what was once considered voodoo is now considered the norm.

So what are current trends?

Typography

Typography in web design was often frowned upon by usability experts, claiming that any deviation from the standard web fonts and font sizes will render the site inaccessible. The idea of mixing custom fonts and varying font sizes together was considered unthinkable. In reflection, web design has taken a complete U-turn on this and typography is now being used as a critical design element of websites. Designer & Writer Jacqueline Thomas explains:

“Fonts are meant to be explored, twisted, and moulded to fit your purposes. With the correct placement, a website that utilizes typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.”

Zurb

Custom Fonts

What was previously a difficult task and considered inaccessible; there are now a multitude of ways to use custom fonts on websites. From font embedding services such as Typekit and Font Squirrel, to text replacement techniques such as Sifr or Cufon. This use of custom fonts is now considered standard practice.

Magnox Exerience

Springfields Gradutes

Text Shadows & Letter-pressing

It would be very hard to look through a collection of inspirational websites or CSS galleries without finding websites using Letter-pressing techniques and text shadows to add depth to websites. By simply adding borders to the top of elements or adding inner shadows it is possible to create the illusion that text or an element has been ‘pressed’ into the design. By flipping it around and using drop shadows and borders on the bottom of elements, the illusion that text and elements is raised out of the design. This is a very subtle technique that can be employed to enhance the design of website. The trick is not to overkill it and use it on every bit of text and element on a page but to be selective.

Gowalla

365 Days of Astronomy

Textured Backgrounds

“Textures, textures, textures. The design community, both print and web, seems to be going absolutely texture mad” Skellie, PSDTUTS

A previous trend of large abstract background images is out and subtle textured background is in. As Skellie explains with very little effort, a texture can dramatically change the mood of your work. From paint brush strokes to scrunched paper and wood to metal, the list of textures is endless and they can be found anywhere.

This is one of my favourite trends that has developed, as the slightest little texture added to a website can make a big impact on the look and feel of the site.

One Vision Housing

Elliot Jay Stocks

A Massive Textures Showcase

Illustrative Designs

The use of illustration in websites can make a website look very ‘clean, bright and modern’. They tend to be very warm, welcoming and inviting which is what you want from a website. At the end of the day you want people to come to your site and have a nice experience. Illustrative designs were once only considered suitable for personal blogs and designer showcases; however they are now being implemented by professional and corporate websites.

We've Got A Ticket to Ride

Flourish

Carsonified

40 Brilliantly Illustrated Web Designs

CSS3 Techniques

As mentioned previously, CSS3 techniques offer web designers and developers a myriad of new ways to construct pages. However, these techniques are currently on supported by modern browsers such as Firefox, Safari or Chrome, thus meaning any enhancements added using CSS3 techniques will only be visiable to certain users.

CSS3 gives developers and designers a whole new level of control to the elements on a page. We are now able to animate the movement of elements using only CSS. Currently this is only available in webkit browsers such as Safari and Chrome but is still a very exciting prospect. Other design elements, which previously required a cornucopia of images and additional mark-up such as rounded corners or opacity, can now be completed using a single line of CSS3.

Partical Lab

Future of Web Design

(This examples are currently only supported in Safari or Chrome)

I am very much looking forward to a time when CSS3 becomes more widely adopted so that all the little design tweaks and enhancements we are currently employing become available to a wider audience.

As with every field though, trends come and go. It will probably not be long before these trends are considered yesterday’s news. So what do you think the next big thing is going to be?

One Vision Housing Website

One Vision Housing Website

One Vision Housing Website

February started with the launch of the newly redesigned Moto website. The website has matured in its function, mirroring the requirements of the Moto customers as we enter 2010. A bold functional design frames the newly introduced technologies whilst expressing Moto’s key brands and delivers wholly individual service area information. The website relies highly on the Google Mapping API (Application Programming Interface) to allow Moto customers to search Moto locations, brands and even plan routes. This shift in focus of the website provides a new and useful service to its customers. This website is powered by a totally customised version of Forepoint CMS, featuring a completely new look and feel compared to the previous version of the CMS.

Moto Website

Moto Website

Moto Website

Another project in its infancy is Cheetham & Jackson, a new investment company based in Chorley. We’re hoping to launch towards the end of February and we shall be updating the blog as we edge closer to the site launching.

Cheetham & Jackson

Improved Accessibility

By carefully structuring and coding your website, it is possible to ensure that people with visual, auditory or motive disabilities can access the content on you site just as able-bodied people can. In practice, this means the code used to create the pages of your website can be understood by screen-readers and modern web browsers alike, with no loss of context or message.

Compatibility with future web browsers

When defined standards and valid code are used, documents become future-proofed and the risk of future web browsers not being able to understand your code is reduced.

Fast Downloaded and Rendering of web pages

Less HTML results in smaller file sizes and quicker downloads. Modern web browsers are able to render pages faster when the code follows defined standards.

Better search engine rankings

The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic mark-up this makes it easier for search engines such as Google, Bing and Yahoo to index your page, and provide more accurate search results determined by the actual content on the page. Google, Yahoo & Bing all reward websites that are built using structural and semantic mark-up.

Web standards can make it easier for developers to create websites and provide a better user experience to the visitors. If you’re website is not using web standards already, now is the time to start or you will risk being left behind.

If you are interested in updating your website so it adheres to the latest web standards, here at Forepoint we comply to the strictest web standards and strive to meet all accessibility guidelines, so why not contact us below.

And could this finally mean an end to Web Designers spending hours ensuring that their latest creations are backward compatible with this last remaining relic of a time long forgotten?

Here’s looking to a brighter, happier and more standards compliant IE6-less future, fingers crossed!