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.

Advertisements

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.

Standards, Accessibility and Usability

Standards are something I hadn’t really thought about before I learnt about them. Not because I felt they unimportant but because I assumed something like the Web had to have them. I knew they might not be perfect but surely designers conformed to them such as they were.

Now though I know better. Are there standards for the Web? Absolutely. Do designers conform to them? Not as much as you would expect. The same goes for usability and accessibility. Often, or so it was not long ago, accessibility and usability were thought of last. They were tagged on at the end of the design process and not surprisingly suffered as a result.

What are ‘Standards’?
At their basic, standards can be seen from two perspectives. One that of the browser vendors and developer of languages and technologies on the Web. The other is a how they are implemented — best practices and the like. They both have in common the notion of uniformity though and work together (or try to).

Browser Standards
From the technical side, standards are a bit iffy. You’d expect after all these years that browsers would do things the same. That they would display pages the same way, use the same technologies. They certainly do not. In their defence, they are all a lot closer now than they were even 5 years ago but they don’t render the same. They all have their own take on how pixels are calculated for example, which can shift page elements around.

The main example would be Internet Explorer [IE]. Once a pioneer of Web standards, it was great. Though it quickly was followed by other browsers such as Opera, Firefox and Safari. All of which followed in the footsteps of IE. But after years of no upgrades IE just stagnated and didn’t conform to the latest standards and didn’t render things the same as any of it’s brethren (due in part to how it calculated the box model and pixels). Until that is IE9, which marks a major improvement in all areas over previous versions.

Design Standards
Design standards or best practices are how the technologies or programming languages are implemented and used. For example, this would partially govern how XHTML is implemented and which elements are used where. So if you wanted to put an address on your website, you would use <address>.

Another example would be layout. Layout should be done through CSS. However, before standards were in full effect and before designers started to appreciate the need for accessibility as well, they used tables. Tables are not meant to be used for layout. They are for tabular data. That is to say rows and columns of information. A table. And so a big part of standards is using elements correctly and semantically. Semantically means that you name divs correctly and nest elements.

It means using an the address tag correctly. In short, it’s giving meaning to your code and it’s relation. Using <br /> to create paragraphs for example isn’t semantic.

You can read more about standards on Smashing Magazine or you can read about them on the W3C.

Accessibility
This is an area of increasing interest. Nowadays designers, developers, browser vendors and the general community of Web professionals are taking this quite seriously. They’ve realised for the most part the importance of accessibility. Partly due to the emergence of legislation for disabled users on the Web and partly through the emergence of mobile devices.

Accessibility is being able to use a site on a variety of devices and being accessible for disabled users too. Such as blind users who would use the site with screen readers. This is when using the correct elements is important. If you used a table layout it would be very cumbersome for them to use.

Usability
Usability is a lot like accessibility. You need to be able to use the website. Therefore, links need to be obvious, such as bolder or underlined. Similarly buttons need to be obvious and change state when you hover.

As well as having obvious links and buttons, you need the site to make sense. You need to look at the site and easily find the navigation, the main areas of the page and find what you want quickly. It’s estimated that in 10 seconds of loading the page a user has made up their mind as to whether it’s usable or relevant.

Steve Krug’s book on usability Don’t Make me Think is all about best practices on usability and accessibility. He has written another similar book that has additional content. I highly recommend you pick up a copy of Don’t Make me Think. His point is that you should think about it from the user’s perspective.

If you can’t find the search area or you are wondering “can I click that?” then you’re doing something wrong. The aim is to make it easy for the user not befuddle them. The latter will more likely make them turn away in frustration and never return.

I’ll finish this section with a quote from Steve Krug himself which sums up my point:

“…much of what I do is just common sense… Usability really just means making sure something works well: that a person of average (or even below average) ability can use the [website] for its intended purpose without getting hopelessly frustrated.”

So all 3 of the things we talked about in this post are quite relevant to each other. I hope that from this post or from the references provided you can start to see the importance of these topics. My great wish is that you will start to think more about these issues and take them into consideration when building your own sites.

Photoshop

If you asked most designers “what do you use to design websites?” — which is to say what software — the common answer is likely to be “Photoshop”. If you look on the Web for resources or search Google then you’ll be bombarded with Photoshop.

Google's autocomplete suggesting Photoshop

And there certainly isn’t anything wrong per se about that. Photoshop can be used to make some great artwork and even mockups. The downside is that it can take somebody who has never used it a very long time to get to grips. I know when I started using it I was totally overwhelmed by the options and tools available to me.

Which is where my point sort of lies. Often new designers see so many things that they can get into a comfort zone. They see the Fx option and that is sometimes it and all they ever use. Which is fine if it’s done correctly. But when your mockups and designs all have shadows, bevels and really obvious gradients there’s something wrong. There, that’s the crux of the post: subtlety.

Gradients are excellent but they should also be used sparingly and subtly. It has a much more professional impact when it’s a hint of colour shading than really obvious transitions. Of course sometimes this isn’t true, sometimes big and bold works too. But everywhere and in every instance? Not so much.

Drop shadows are something we see a lot of nowadays, especially with CSS3 coming along. They too are something that should be used subtly and also not to go overboard with. By default, Photoshop uses true black for shadows and uses the multiply mode. Therein lies the problem: shadows are never true black. Dark grey or some variation of black yes, but never solid, full-blown black. So it should be that either the colour is changed with the colour picker or the opacity is reduced. Or a combination of the two would work too. Also minimising the size of the shadow should be taken into consideration.

Bevels can work. Apple have used them as well as more obvious gradients and even fairly obvious shadowing. But they don’t use them on everything. I’ve seen sites in the past and even print work that have had bevels on body text, headings, backgrounds and everything in between. Needless to say less is more.

My point, then?
Well yes you should use gradients, shadows, borders (1px borders are usually quite good) and so forth. You don’t have to but it can improve the impact of the design. However it should be done so responsibly, professionally and not done to death.

Again, JCD has an article on Photoshop tips that sums up my post quite well and shows examples. For tutorials on Photoshop you should head over to PSD Tuts+, and as always check out Smashing Magazine’s articles. They have a pretty good one on gradients, noise and a few other things. Also, Chris Coyer has some videos and articles on Photoshop over at CSS Tricks.

A word on mockups
While Photoshop is obviously a really good piece of software there are things it doesn’t do so well. Mockups for a website can be done in FireWorks a lot quicker, but there are pros and cons for either. Vector tools in FireWorks are arguably better and so are other tools, but people tend to go with what they know.

Whatever software you are using though remember that it shouldn’t be your first port-of-call when it comes to ideas generation. You should design and even mockup in a good old sketchbook first. A lot of people, especially those who enter into universities expect (and want) to go straight into Photoshop etc. This often leads to less creative products and can even slow down production time because it’s harder to generate ideas quickly on a computer.

Additionally, good designs don’t use Photoshop for text or designing vectors (e.g. a logo). Illustrator, FireWorks or InDesign should be used to put the text onto the design. At the end of the day, if you’ve built a site in photoshop and are converting it to website in XHTML/CSS, you wouldn’t — or shouldn’t — have body text done in Photoshop. What I mean to say is the text shouldn’t be an image or series of images.

Typography

Typography is arguably one of the most important areas of design. It’s something we’re all familiar with and something we can all appreciate the beauty of without necessary being able to understand what the writing says (that is, if it’s in another language). And yet, despite this it’s shockingly easy to do badly — very badly.

If there is one thing that should be done right then I argue it would be type. There really isn’t — at least in my opinion — any good reason for shoddy typography. So what then causes so-called ‘bad’ typography? Mostly it’s ignorance. People simply don’t know they’re doing it badly.

Features of Good Typography

Leading (Line Height): Vertical space between lines (such as in a paragraph). In InDesign and other similar programs, the leading is set to something around 125%. Say you set something in 12pt, the leading would be 14pt. This seems to be the minimum distance between lines. I personally tweak this a bit to let text breath.

The line height is something that can be done really badly. It can be too little and makes text unreadable because text is touching (or nearly) or entirely overlapping! Either that or you get that ‘reading the same line over and over’ thing. That is usually the reason for that. If too much, text can seem like they have a clear line of space between them and this usually looks, well, a bit ridiculous. With the middle ground you not only get a nice space.

Line Length: As the name suggests, line length is the length of each line. Long lines can cause eyestrain and also slow the ability to read and scan text. In fact the other reason a reader might re-read the same line repeatedly is because lines are so long it disorientates them. Likewise, with short lines it can be difficult to read if there’s a lot of text.

A short amount is fine but entire websites is going to be a little overboard, and why would you want to? The optimum line length is approximately 7–8 words per line 40–80 characters (or just over).

Tracking (Letter Spacing): Tracking is the gap between letters in words. Sometimes increasing the tracking helps legibility and speeds up the ability to read. Also reduction of the space in some instances can be just as useful.

Word Spacing: Word spacing is similar to tracking. However rather than the space between letters that is increased or decreased. This, as well as letter spacing and kerning can be used for a given effect as well as legibility.

Kerning: This is the space between pairs of letters. This can be very useful because in some instances characters can ‘bump’ each other. In other instances it can make things easier to read. For example the pair ‘AV’ would be have negative kerning so it’s easier to read. Obviously this can be very subtle but can have a great impact on how the user is able to read text.

Sans-Serif Vs. Serif: These are two types of typeface. Basically a serif is the little decorative bit added to parts of the letter (character/glyph). Take this blog as an example. The text you are reading now (the body copy) is written in a serif typeface, while the blog title (my name) at the top and navigation is in a sans-serif. Do you see how they are different? How one has ‘extras bits’? That’s the basic difference. There is of course more to it than that and different types of serifs and sans serifs, etc.

Traditional thinking is that serif typefaces are used for body text in print. This is because the serifs are meant to lead the eye easily along the line and suggest a joined-up type effect (unless tracking is increase too much!). This is typically true with print because serifs are easy to read when printed. However, some argue that when designing for the screen we should use sans-serifs for body text and serifs for headlines. This idea, it seems, is a controversial issue among typophiles so I’ll let you make up your own mind.

To read more about typography, including how to use type you should invest time in looking through The Elements of Typographic Style Applied to the Web. For a diagram of features of a typeface you can also look at this handy typographic anatomy wallpaper. Further, you can look at Just Creative Design and Smashing Magazine, as well as Typophile and I Love Typography.

The Wonderful World of Logos

When I first started out (pre-university), I wondered what all the fuss was about. I mean what’s so special about a logo and why did companies feel the need to charge £150+ just for the logo?! Extortion perhaps? I had after all seen friends, teachers and even some companies use Microsoft’s ‘WordArt‘ and the like. And now? Well now I would think that nothing short of criminal.

The Twitter logo and bird. A good example of logo design.

Twitter: Good example of a logo

In my opinion logo design is an art form in itself. But what exactly makes a good logo. Why can’t you just use WordArt or something? Well, the answer it turns out is pretty straightforward.

A logo is something you want to be memorable, right? You don’t want every website or company out there with the same logo or it renders that design pointless. A good logo should be memorable.

How?
The answer is simple and often the same: simplicity. Think of computer giant Apple and their logo.While it is true the logo has gone through a number of changes throughout the years the logo itself — as a shape or feature — it has stayed the same. And it’s simple, right? An apple with a bite taken out of it.

Think of Niké and their ‘swoosh’. In what way does that swoosh or tick have anything to do with sport or even footwear?! Well it turns out it isn’t a tick or a swoosh but actually a wing. It (and the company name) represents the wing of the Greek goddess of victory. The point is that it’s simple and easily recognisable.

I’m sure you get the idea. Logos are pretty simple recognisable. McDonalds, FedEx, IBM, Microsoft… the list goes on. They all have reasons and justifications behind them. They are also all simple because the brain remembers and recognises simple geometric and common shapes (like the circle of an apple or the shape of an M).

So if you’re putting 101 features into your logo and embellishing it, you could actually be making the logo worse. A lot of the time even just a nice typeface set against a background can be used as a good logo.

JCD's awesome logo

A logo often comprises of only a few colours —around 2 or 3. It’s part of the brand or identity of a business and/or product so the colours obviously need to conform to the rest of the colour scheme. You can’t have blue for the corporate feel and then have a bright lime green logo, for example!

Furthermore, if a logo had a lot of colours in it then it would be harder to remember and recognise, reducing the impact the business makes. From a business point-of-view would be more expensive: embellishing a logo with bells-and-whistles and a myriad of colours or tints makes it a lot harder to printer your work.

Harder to print means more expensive. Also if you were designing your logo in RGB then it’s more likely it will look washed out (not to mention garish and amateur) if you use every colour under the RGB-looking Sun. (Something to be careful with in general when going doing print work.)

My point is that logos should be professional, in-keeping with your corporate theme and simple. That’s not to say they can’t be unimaginative though! For more details on logos Smashing Magazine have an excellent article. Alternatively, I recommend you look at Just Creative Design’s logo design process.

In the Beginning

The Why:
I’m getting around to assessing a few hosting services now that my hosting package/domain name has expired. Also working on a new portfolio and potential (maybe freelancing) company.

For a short while my portfolio may be housed on Dropbox or something similar for clients but no doubt would be limited since it’s not really meant for hosting. Like I said though, would only be a temporary affair while I sort a hosting account and new domain.

Until that time I’ve moved over a few posts and will use WordPress’s free version so I can at least keep up with this blog when I feel like it. Or at least keep some of my entries intact.

The Who:
Hi! I’m Clare. I’ve recently(ish) graduated from university as a web designer. I love websites and design.

After a childhood of enjoying web design, (high) school where I built them on occasion (both as part of the school life and for pleasure), then college where it was much the same theme (though I also learnt about general computing and troubleshooting), I did a higher education course.

I had the honour of working along side some very excellent and talented people. Some who had been in the graphic design industry for years, some who wanted a change in their career. I also got the opportunity of hearing from a number of design studios and — on occasion — a freelancer or two.

Needless to say it was quite inspiring. The course was very different from what I expected and I’m very appreciative of that. It was a lot more in-depth, complex and surprisingly more interesting.

What I Can Do:
I won’t go into a long ramble about how I did this and that. I’ll just list what I learnt and can do, then leave it there.

Design:

  1. Attention to detail: All but me and one other student failed the first unit because the tutor wanted to impress this point and they strayed from the brief/specs, or didn’t meet it’s requirements).
  2. Typography: Identification of typefaces; general spelling, punctuation and grammar (SPG); anatomy of type.
  3. Print Design/Logo development: As well as typography we learnt about grids, newspaper/journalist print, magazine articles, business cards. Also learnt logo design as an entire unit.
  4. Colour Theory: We learnt about the technical aspects and design aspects of colour. From the various spaces to contrast.
  5. Industry Printing: We learnt which program to use and where. When to use Photoshop and when to use Illustrator. We had a unit dedicated to print production process. Including sending off work to a printer.

Developer:

  1. W3C: We learnt about Web Standards, usability, accessibility and the need for valid code, semantic code.
  2. XHTML: We learnt how to use XHTML and the right code to use not the depreciated tags (e.g. B, I). We learnt XHTML to the Strict framework, rather than Transitional.
  3. CSS: My particular favourite. We learnt all about CSS and various browser inconsistencies. Particularly those found in Internet Explorer 5–6. In fact, if I were asked what my speciality was, I would probably say CSS.
  4. Self-Managed Learning: A big ethos of the course was self-learning and taking responsibility for it. That we should learn regardless of whether we’ve been asked to.As such I learnt PHP, JavaScript and CMS (WordPress) in this unit. All of which were then developed later, including in client work.