30 Days to Your First Website Design

None!

Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to look at prepping your design.

We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• First off we’ll look at what exactly I mean by prepping
• Then we’ll examine our layout psd and think about the possibilities where images and CSS are concerned.
• And before we jump into the next video, I’ll leave you with an assignment.

Well, as we’re rounding off our design phase, this really is a quick part of the process. In days gone by, when CSS was in the early stages of implementation, and designers weren’t used to controlling it anyway, websites were constructed with tables. If you’re not sure what I mean, I’m certainly not going to drag that story from its grave. Needless to say it was an horrendous workflow of chopping up tiny bitmap images, and using them to decorate and form complex table layouts. Almost every inch of a PSD design required slicing and saving in order to decorate a web page.

This made building a design for the web difficult and drawn-out, plus altering a design an absolute nightmare. Take a look at this quick example (yes, there are still examples out there).

Thankfully, things have moved on, and with modern techniques, much of what you design in photoshop can be recreated with CSS alone. Drop shadows, rounded corners, textured backgrounds, (to name but a few examples) all help to speed up build time, page load time, and editing time.

Of course, older browsers are still in use, so by using modern CSS techniques, you’ll have to include fallback options if you want those browsers to render your website correctly. We can compromise however, and it’s therefore up to us to decide which elements of our design can be recreated with CSS, and which we’ll rely on images for.

[Live screencast demo portions not available in transcript.]

Let’s refer back to our design, and analyze how we could prep things. Firstly, there’s the background. Our footer is a solid color, so that can be defined with simple CSS. The background texture of the upper section, and the darker version of the contact area, will need to be saved as two small tiles, which we’ll repeat across the page. There’s also the logo, which will of course have to be an image.

The large CALL TO ACTION button can be recreated without too much difficulty with CSS – a simple red square with completely rounded corners, with a slight transparency, plus the symbol used for the arrow – that’s all doable, but Internet Explorer can only handle those properties from version 9 onwards. Unless we’re prepared to consider a fallback technique, we’ll probably have to settle with a straight-forward image (actually, the image itself could be our fallback – if we use it only for IE8 or earlier).

Our staff thumbnails will be images, of course. The fonts will all be dealt with webfonts from Google. Our map will be provided by a javascript snippet from google maps. And the send button background, along with the three social buttons, can be (just as with the CALL TO ACTION) built largely with CSS, unless we opt to go for images. One advantage of using CSS would be that we could very quickly change the background colors, without having to edit and re-save any images.

OK, it’s time for some further reading: There are several tutorials on Webdesigntuts+ which discuss the merits of CSS over Photoshop where certain things are concerned, but this series does so very thoroughly: CSS3 vs Photoshop: Complex Backgrounds. Take a look and they will help you work out what can be done in CSS3, which we have traditionally relied on graphics programs for.

And before we jump into the next video, I’d like to you go over our document and decide for yourself which elements you think would be appropriate for building using CSS, and which we should rely on images for.

Next time on 30 Days to Your First Website Design we’re going to take this step a bit further and look at CSS spritesheets. I’m Ian Yates and from all of us at Tuts+ thanks for watching!