For most people school was great, especially when looking back through rose tinted glasses.

For others school wasn’t so great. Especially when taking the step from junior school to senior school, or “big” school as it’s known in the UK.

Going from all cutie, cuite, nicey, nicey junior school to rough and tumble big school is a culture shock for many kids, mostly because of the mix of ages and the change in people as they reach and surpass puberty. Kids in the first year of senior school are so much more immature than kids in the final year, yet they mix in the playground and other social areas.

This obviously has it’s good points as it aids personal development and helps youngsters prepare for life outside of school and away from their families, where they will have to stand up for themselves.

But it can also have a downside too – bullying.

The downside of having a bad time in school, for whatever reason, is leaving without a good education. The young often don’t realise how important it is to have at least a good education, even though parents, aunts and uncles keep telling them.

If you left school with a bad education you can still improve it. The first place to look is online. You can learn about anything you like in cyberspace. If you are looking for more formal qualifications you could try adult learning centres, night schools and colleges.

What you shouldn’t do is give up on your education; people are always learning, and just because you don’t have formal qualifications doesn’t mean you can’t get on in life.

All great designers take risks, possibly you included. They try to push themselves to their limits and beyond. They test new ideas and quite often they win. Awards and praise and recognition. Sometimes they loose too but hey, you can’t win all the time.

But when was the last time that you took a risk in your web project?
No, I don’t mean that new javascript gallery you used or a sliding menu. I mean taking all the knowledge of design, technology, web and usability you have and coming up with a design that does not follow the standard. Navigation, just like on any bike racks for garage site across and content in the middle and maybe some extra navigation down the side. When was the last time you went beyond that?

And what really stops you from doing so? Why you are eager to go beyond your limitations in print but you dread a thought of doing the same in web.

One word: confidence.

I recently interviewed some of our clients. Many of them replied that when it comes to graphic design they know what they’re doing. With the web though they prefer to stay on the safe side. Not that they are happy with that but also not many of them had any idea what to do about that.

Are you the same?

If so, here is a list of few things to get you started.

1. Stop thinking that graphic and web design are the same.
2. Make usability your priority, let the design come second.
3. Every time you are about to start a project make a list of all limitations of your material. Make this list for every project. Analyze it. You will notice that many of limitations will force new solution on you. Of course given that you will decide to find a solution to a limitation.
4. And possibly the most important one, analyze the work of designers who constantly take risks. You do that with your graphic design skills, why not do the same with the web?

Of course gaining confidence in web will take time but once you do, you will notice a new world of possibilities awaiting you. Just like it is now with your graphic design work.

When you get there though, don’t forget that usability always has to come first.

2. Don’t design only to please your client

3. Don’t create your HTML sites using Flash

4. Don’t code in tables

5. Don’t design in mm/inches

6. Don’t break web conventions

7. Don’t consider your design as a most important element of the site

8. Don’t think that websites do not grow

9. Don’t use IE6 as an excuse

10. Don’t think that website is just a collection of pages

11. Don’t think users will browse the site just as you envisaged it

12. Don’t use scripts off the web that you don’t understand

13. Don’t forget that there are disabled internet users out there as well

14. Don’t use PDF’s as pages on the website

15. Don’t think that a website does not mean a hell lot to it’s owner

Our task for today then is to find out how does this code work. And just like last week I will try to find some similarities to design for print.

What is worth noting at this stage is that even though we will not be beginning any work with the actual CSS yet we will introduce some code nonetheless. You can consider it a warm up before next week.

So, to begin at the beginning.

How does the code work?

Just like last week let’s start design for print. Once the project is completed you output it to a print ready file and send to the printers. A print software analyzes it to see where each element goes and what are it’s attributes and once that’s done it simply prints the job. It’s a simplified version of the process but pretty much this is what happens.

When it comes to a website, once the design is done, it is recreate with code and save as set of various files. Those files are uploaded on a server from where they are accessed by a web browser which analyzes them to check what elements constitute your page, what are their properties and positioning and displays them on screen according to a spec given.

It’s practically the same, isn’t it?

Now, but what are those various files then, you ask.

To answer this as simply as possible, there are two main file types we will be working with, a HTML file and a CSS one.

HTML file is used to arrange the content, to tell the browser what elements constitute the page, what is their order (although this can be altered by the CSS,  we will skip this for the moment though) and their content (text, images etc.) if they have any.

All presentation such as sizes, positions, fonts, colors, backgrounds is handled by a CSS file.

Let’s look at the boxes example from last week:

Each of those boxes on the image have been first described in a HTML file and then their specifics have been coded in a CSS file which accompanies the first one. Browser, upon accessing both files checks which boxes to display (HTML) and how to style them (CSS).

I guess this could remind you of one function within every page layout software (such as inDesign or QuarkXpress) – stylesheets.

As you know stylesheets allow to style page content within a box placed on a page. If you want to edit an element or group of elements styled by a particular stylesheet you simply amend it, not each box individually.

And in reality CSS works by the same principle. It allows you to style your elements, so if you want to make a change to them, all you have to do is modify their CSS style.

I guess you know very well how to create a stylesheet in your page layout software, so let’s look at how to create one for a website.

There are various ways of doing this. One way is to place your CSS code within your HTML file, the other is to use an external CSS file and link to it from the HTML code. You can also mix the two although we will skip this particular method as I personally do not consider it a good idea.

So, let’s talk about the two then:

1. Internal Stylesheet

Every HTML file is build of two elements, <head>, which includes all information for the browser that doesn’t get displayed on screen and <body> which includes your actual content elements.

As CSS is a set of styles intended for the browser only and the code itself is not displayed on screen, we place it within the <head> element of your page.

After placing a CSS code inside our HTML file our example code will look like this:

where #box is a style for an object called box (we will discuss CSS syntax in depth next week so I will leave it for now). As you can see we tell the browser that a specific object will have a width of 200px and height of 200 pixels as well.

Let’s take this code apart and look in detail what each element does:

<head> - this is a command that opens head section of a file

now we tell the browser that what we start our CSS styles now:
<style type=”text/css”> - tells the browser that the code that comes after this tag is CSS
#box { width: 200px; height: 200px; } – that’s our CSS code
</style> - this element tells the browser that there is no more CSS styles
</head> - this element closes the head section

<body> tag opens body section of the file

Of course there are more elements that can be placed within <head> section but they are not relevant to this series and we will be skipping them altogether.

This method is particularly good if you need to style only one page, or if you want different pages to have different and varying styles.

Otherwise you can use the external stylesheet

2. External Stylesheet

In this method a HTML file contains no CSS whatsoever, a CSS is stored in a separate file.
You marry the two by simply linking to your CSS file with the following link placed in the head section of every HTML file.

<link rel=”stylesheet” type=”text/css” href=“your-css-file.css” />

And your head element of your HTML code will now look like this:

As you can see we replaced styles placed within <style type=”text/css> and </style> elements with one simple link. Inspite of that though the code will work exactly the same.

As I wrote above, any of the two methods described is equally good and you can choose the one you prefer.
My personal choice is the external method as it makes it much easier to control the file and keeps the two codes separate from each other, makes it easier to keep the code clean.

Our next task will be to familiarize ourselves with CSS syntax and we will start looking at it from next week, until then …. design well.

See Also:

Part 1 of the series: You already know most of it, you just don’t know how to use it

I think one of the biggest misconceptions in relation to front-end development is a belief that it actually is programming and thus requires such skills from a person doing it.

Of course saying that there’s no programming in front-end development at all wouldn’t be completely true although those elements do not appear on a basic level. What we will be discovering is in fact closer to what you do everyday as designers than to programming.

But let’s start with what css coding is all about, in simplest terms, skipping the history and ideology behind it. Coding with CSS is just a way of recreating your layout with code, words, commands and numbers, nothing else. It is a way of telling web browser where elements are positioned on a page, what they are made of and how they behave if they are interactive.

That sounds familiar right?
If you look at a text-layout software that you would use in your everyday work (I will be using inDesign or QuarkXpress as examples here) and open any already designed document in it, if you look up (inDesign) or down (Quark)  you will notice a properties bar (inD) or measurements palette (QX) containing no more no less but your artwork described with commands (type, text formatting etc.) and numbers (positioning, sizes). In fact, although it would be a hideous task, you could recreate your artwork using those values (well, with some exceptions but they are of no importance here right now)

CSS works in almost exactly the same way, it is just a way of recreating your artwork with commands and numbers although this task in much less hideous.

inDesign properties bar showing X and Y position of a box as well as it’s width and height.

An excerpt from a CSS code showing size of an element (width and height) and it’s positon on a page (distance from top and left edge of a page)

Another similarity is the way you place elements on the page. With CSS, just like your design elements on a page, elements are placed in boxed or containers. Of course in most cases you can’t see them, they are just virtual containers that you create especially for the object or element but the general idea is the same.

A fragment of a web page with all boxes shown in red, those boxes, their positions, what they contain and how big or small they are have been described in CSS. Web browser interprets the code and displays what you see above.

Of course there are some differences between the two media, quite a lot of them actually and we will be going through them during the course of this series but the most important thing for now is to realize that the principal of the two is very similar and the rest will be plain simple.

As I said, you already know most of it, you just don’t know how to use it.

(all copyright to examples shown: myself, no other graphics than my own have been used here)

See Also:

Part 2 of the series: How does the code work?

The series will commence on Wednesday the 22nd of April and will be published weekly. Through it I am planning to help you understand how css works, how to create your layouts with it and introduce some advanced features as well.

So what’s the plan?

We will start at the very beginning and work our way to a point where you will be able to create a simple layout with css. After that we will look at some more advanced features but the main objective is to learn css syntax, all it’s elements and then start creating css based layouts.

What are the benefits for you?

1. you will learn basics of css – inspite of how obvious this sounds I thought this has to be mentioned as a first benefit
2. you will discover more how it all works behind the scenes, this is inevitable when it comes to web design. A knowledge of css, even if you don’t use it and still decide on using a front-end developer will make you more confident with designing for the web
3. it will hopefully be fun and I will do my best to make that happen

I have to stress one thing, the series will not teach you everything. It will prepare you for further exploration of front-end development techniques. Although it will give you a good, solid base on which you will still have to build, everyday. But the fact is, this is what I do and have been doing for years as well.

Subscribe to receive email alerts

You can subscribe here to receive email notification of each post in the series along with some additional materials and references. Of course you don’t have to do it, you will still have access to all posts in the series but to get the full benefits from it I ask that you do.

If you signup for the series you’re more than welcome to unsubscribe at any point if you feel it is not helpful or not quite what you were looking for.

I’m looking forward to the series and hope that you’ll join me.