On Writing

Writing is one of my hobbies so it’s something I’m quite passionate about. It’s how we communicate and it’s how we inspire our audiences and convey ideas. Without writing we’d be quite stuck. Well, we’d have pictographs and older languages but still, writing is uniquely inspiring.

Magnifying Glass over Internet in the dictionary

Writing is also how businesses convey their business. It’s how we tell people what we do. How is it then a lot of people, businesses and web designers alike get it so wrong?

Whenever I’m looking for a business online or even looking for design tutorials I tend to think less of them whenever I see spelling mistakes. It might be that you aren’t great at spelling and that’s not really my issue. My issue is that you’ve typed it up on a computer and computers have spellcheckers. Browsers and online blogging software often have spellcheckers, as well as Word, InDesign or other word processors. Therefore, it’s not really a problem to check spelling, is it?

Punctuation tends to bother me too as well as grammar. The use of ‘alot’ or ‘atleast’ or other phrases is baffling.  Where did they come from?! If you type it into the computer with a spellchecker then it’s going to come up wrong…

As well as this people who misuse commas and put things like “:-“, tends to irritate me. I can understand people who aren’t good at English, but people who are designers really should be competent. Even if you aren’t good at spelling there’s no real excuse for punctuation or grammar issues. Not nowadays, anyway.

I would suggest Penguin’s Guide to Punctuation or maybe Grammar Girl.

Sketchbook

Ah, the sketchbook. Among the experience it’s something to be revered and is taken anywhere and everywhere. It’s very beaten and battered from use and holds thoughts and ideas and inspiration.

An open sketchbook

Among beginners, such as in college/university it’s something of a chore. “Why do we need them?” was something I remember hearing a lot! A lot of people genuinely didn’t see the point of them, beyond for academia.

Those that did feel that way though often were those whose designs suffered from neglecting the sketchbook. Those that kept comprehensive and well-documented sketchbooks of inspiration, sketches and ideas had a lot more on offer in their work. In turn their work had a lot more creative and productive potential. Not to say you have to be an amazing artist though.

We were told time and again that by using the sketchbook it promotes ideas and more creativity. You get more ideas if you just draw and don’t concentrate too much on it because thought isn’t hindered by detail or specifics. Concepts can be drawn from thumbnails but the more intiial ideas the more rich a concept can be.

This and the notion of collating inspiration is something lost on beginners and even some experienced designers. I can see the allure of going straight to the computer but actually, I’d say it can take longer to develop a concept that way than it would by sketching first.

My advise to anyone, experienced or not is to use their sketchbook. If you don’t own one then buy one! It will be one of the best investments you ever make.

Image Optimisation

Image optimisation is quite straightforward once you understand it. The idea is that images you save in Photoshop or other programs will be shrank in file size for the Web. Whether your site is optimised can make or break it, in terms of how quickly it loads.

Save for Web and Devices: 4-Up View

Once people were happy to wait with dial-up connections but not any more. People want sites to load quickly and demand it. It could be seen as impatience, but you don’t wait for a book to load or a business card, so I can appreciate the frustration.

Optimising an image starts with the file type. Do you save as GIF, JPG, PNG, TIFF… Which is right? Well, the simple answer is it depends. Photos or images with a lot of different colours/tones are often saved as JPG (or TIFF if lossless quality is required). PNG or GIFs are similar insofar as they require flat colour or limited colours/non-complex graphics. For example, text is saved as GIFs or a PNG.

PNG-8 is seen as a the successor to GIF. PNG-24 and above is similar and hopes to succeed JPG and above. However, if you save as PNG-24 in Photoshop it’s usually huge! If you save in Fireworks then it’s sometimes considerably lower. While Photoshop is a great piece of software, the Save for Web and Devices option isn’t as good as Fireworks.

So you might be wise to open a file a PSD in FW and resave. Also take note of the resolution. When saving for the screen it should be 72 DPI, but 300+ for print. Note well, you cannot upscale the DPI from 72 to 300! Some people do that and end up with awful-looking graphics.

Saving for the Web is also finding a balance between file size and artifacting. This where colours and detail to bleed or lose detail (described as being ‘soft’). So you should be careful and evaluate the image(s).

Z-Index

This is, according to some, one of the most misunderstood concepts in CSS. For the life of me though I can’t see why that is!

Z-index Stack

The general concept of z-index is fairly straightforward. You have X and Y, controlling the width and height. The Z-axis then is the depth. That is to say the order of elements in a stack.

Put simply, this of Photoshop and how you use layers. You put layers on top of each or under each other. These can have different effects, but the gist is the same.

In CSS, z-index says whether an object is on top or below an element. For example, if you had a box and an image on top of that box, it would be above the image. Therefore, it would have a higher z-index. It would be higher in the stack.

Z-indexed elements should start at around 1,000 for the first object and then 2,000 onwards. Incrementing by 1,000 can help avoid some issues with the construct of the property. Which is to say that by default, it displays as 1 and doesn’t always translate properly — or like you’d expect.

For a more visual look at the z-index, then you can see Chris Coyer’s screen cast. You can also read a great article on Smashing Magazine.

Floats Vs. Positoning

Before I begin, I would like to make a point. Neither floats nor positioning are perfect. They are, for all intents and purposes a stopgap between how we do layouts now to a defacto or standardised method in the future. Indeed, there are a few layout modals in the works, but when they’re fully implemented is years away.

In the meantime, I’ll explain the differences between floating an element and positioning an element. Oftentimes, they end up with very similar looking results (though not always).

Floats: can be used to create navigation, columns or text wraps (around an image). They’re usually straightforward (though bugs persist, particularly in IE6)  in that you float the element. This means that an element floated left is on the left-hand side of the page and an element float right is in the right.

Floating Left and Right

Floating Left and Right

From here you can create columns. With floating elements they ‘float’ in relation to another element in the ‘flow’ of the document. For example, if you had two columns that are both floated left and zoomed in far enough the second column would display under the first. This means it’s intuitive enough to change at certain lengths. This is also how wrapping text around images is achieved.

Positioning: is quite similar and often works in tangent to floating elements. For example, to get navigation system to be horizontal you would float: left; and display: inline;.

This would display them in a line as well as adapting to the flow of the document. However, positioning alone isn’t the same. If you had columns positioned then they are likely to stay where they are regardless of how much or little you are zoomed in.

Absolute Positioning

Now the flow of the document can be retained to a degree by relative positioning, which changes with the flow. But absolute positioning is, well, absolute! Things will stay the same with the latter regardless of text sizing etc. This would, for example, be bad in developing for mobile devices as it would require a different stylesheet or media query per device! Imagine how much that would take/slow down HTTP requests (loading).

So a very, very basic introduction to both floating elements and positioned elements. You can read more about them on the Web but I thought it might help you get an idea of how they work. See Chris Coyer’s article explaining ‘All About Floats‘ or his video screencast.

Box Modal

Diagram of Box Modal

The box modal refers to how an element is displayed on the page. It controls everything from margins to borders to the general and overall size of an element (or series of elements).

Alternative Box Modal View

The box modal is for any elements and any element’s internal content conforms to the modal. For example, everything from images to hyperlinks to a box on the page (e.g. vertical navigation).

There are 4 sections to the box modal. These can be explained as thus:

Content: This is the content within the box. Such as text or an image and includes the height and width of these elements.

Padding: Outside of the content it is (or can be) surrounded by padding. This is the whitespace around the content.

Border: The border is after the padding. So if you had put a bottom (of the element) padding of 5px then the border would start 5px below the content.

Margin: The margin is the outside whitespace. This is after the border. Often, padding and margins are confused as the same thing. I can see why, they both add extra whitespace between elements on the page.

This is partly why some browsers seem to act weirdly. For example, because padding and margins are similar in their usage some browsers calculate margin + width as the width, meaning no real margins. Or it calculates padding + margins as part of the width. While I can see how padding and margins are part of the width, the fact you get elements that are 2x wider than expected says a lot about the box modal implementation.

However, mostly all browsers get this right nowadays. Including IE9, which, as I’ve said before, is a step above previous versions.  Though it should be rememebered that while the box modal is calculated insofar as content width/height + padding + border + margin, the means of calculating pixels, percentages and ems is different per browser. A pain? I agree, but I can’t say how pixels, percentages, ems etc should be calculated either. Neither can vendors, I suppose!

Hopefully from this fairly brief introduction to the box modal, you can get the general gist. If you can understand this then CSS is pretty straightforward for the most part herein.

Browsers

Web browsers are one of, if not the most used applications on a computer. They are a designer’s canvas, of sorts. Browsers have also come a very long way since the early 90s when Tim Burners-Lee introduced the ‘first’ browser in NeXTSTEP.

So why is it then that the main browsers are so different? Well there’s a lot of possible answers. From the operating system’s method of computation, which reflect on how the browser handles measurements (meaning layout inconsistencies), to the way vendors implement the box model. And so it goes on.

Nowadays though browsers are a lot more consistent than they were even a couple of years ago. Whether that’s because of wanting standards compliant browsers, or perhaps they are all starting to agree on how browsers render content. Or even because clever people out there have spent a very long time fixing problems and circumventing them!

By far the worst browser in terms of being out-of-sorts with how the Web is today and how other browsers display content has to be Internet Explorer. Particularly IE6, which displays the box model differently to all other commonly used browsers. It’s also particularly buggy in a variety of other ways.

However, I think browsers in general have come along way to the point where — if you develop the site properly — you don’t have to worry about it looking different across browsers and platforms. They display content differently, yes, but not so radically different that it should make a difference.

Unless you’re doing browser-specific hacks and stylesheets the site will display slightly differently. So long as people can use it, I don’t see the problem. Not insofar as it warrents bloating the site with more unnecessary code so a header isn’t offset by a pixel compared to an alternative browser.

Anyway, my point is that you should watch out for consistency and be aware there will be differences. If you really think it needs to be identical then naturally you can change it, though that incurs more time on the project.

One final point worth mentioning is that, while you hear people bitching about how awful IE is and how you shouldn’t ever do sites that are compliant with IE (or charge more for it), they’re talking (usually) about IE6.

Recently, IE9 was released which seems to be a massive step up for the browser. It renders things properly, has HTML5 and CSS3 support so that’s something. So I don’t really see it as something to be avoided. Perhaps older versions, but IE9 should take care of that for a lot of people… If they upgrade…

Still, it heralds a new era of the what we can do with browsers, right? Right.