Web design

web design skills, usability, tools, techniques, and styling

web design skills, usability, tools, techniques, and styling

Designing with Web Standards

July 25, 2009 by Roy Johnson

XHTML + style sheets = creating ‘timeless code’

Jeffrey Zeldman is an evangelist for designing with web standards and browser compatibility. He suggests that we should embrace the latest technologies to design pages that everyone can view. And he shows how it can be done. The standards in this case are methods of what he calls ‘creating timeless code’. What he means by this is using HTML, XHTML, and style sheets to create pages which can be viewed in almost all current browsers. There are two possibilities – both of which combine XHTML and style sheets.

The first is ‘transitional’ and allows light use of tables for positioning page elements. The second is ‘strict’ and requires you to use CSS for all matters of appearance. There’s a lot about browser development and why Netscape and Internet Explorer from versions 1.0 to 6.0 caused the problems for which Web standards are a solution. Then he launches into an enthusiastic account of how XML will be the technology to finally end the browser wars.

After the theory and argument, the second part of the book shows you how to work in XHTML. This will be relatively easy for anyone used to dealing with HTML. The harder part is controlling the layout and appearance of pages using style sheets.

Zeldman adopts a realistic and tolerant line, knowing that most designers will take the transitional route from HTML to XHTML. He designs a sample site using a combination of XHTML, tables, and style sheets, showing how they can be combined and yet still pass the requirements of W3C validation.

His mission all the while is to reduce the amount of code required to render a page, to eliminate ‘bloat’, and make pages available in all browsers. The secret here seems to be that pages can’t be made to look the same, but they can be made to look acceptable.

As a website designer, I would much rather have my users say my web pages ‘look funny’ rather than saying they ‘don’t work’.

He explains style sheets in a simple and clear manner, then shows them in use as he designs an attractive-looking web site one step at a time.

En passant, he reveals an amazingly clever trick for dealing with older browsers which don’t fully support style sheets. It’s to create a second, simpler set of styles, and force old browsers to use them, leaving more recent browsers to pick up the first more sophisticated set.

He also has lots of useful advice about dealing with multiple browser support, though by the time he has explained all the potential difficulties, you begin to wonder how any web page ever gets published at all.

The latter part of the book deals with accessibility issues, and he ends by showing how the interface of his personal site at zeldman.com was re-designed using style sheets. All the code and the style sheets are available as free downloads at his site.

I was surprised that there was no bibliography, and I think the publishers should have treated him to full colour reproduction. This is intermediate to advanced level guidance, but Zeldman does everything he can to make it entertaining and accessible.

Buy the book at Amazon UK

Buy the book at Amazon US

Jeffrey Zeldman, Designing with Web Standards, Indianapolis:IN, New Riders, 2003, pp.435, ISBN: 0735712018

More on web design
More on digital media
More on technology

Developing Online Content

June 26, 2009 by Roy Johnson

The principles of writing and editing for the Web

Anybody who has worked on Web projects will know they can become very complex. And those who provide the textual content are often trapped between graphic designers striving for visual glamour, and clients who want to promote their message. This guide to the entire process offers both detailed advice on writing and editing, plus checklists of help on how to clarify the job of the content provider, and how to survive a project. The authors start out by explaining the role of the web author and editor. This tends to be a mixture – part designer, part content provider, part information architect, plus usability tester and proofreader.

They start with an excellent analysis of why so many business web sites are unappealing, inefficient, and downright bad. There’s a very good example of their makeover of the CIA web site, which spends too much time patting itself on the back. They improve its efficiency by ruthless pruning and making the information user-oriented. This is a master class in converting text from its print brochure origins to web-based delivery.

The focus throughout is on text, but they give plenty of attention to its close relationship with images on web sites. There’s also an interesting consideration of the theory, the psychology, and the creation of hypertext links.

They have a lot of interesting observations on the relationship between the Web page and the screen. The issues are those all Web authors confront: how to minimise scrolling; how to keep content in the reader’s mind; and how to create tight structure and clear navigation.

They also have valuable advice on creating editorial style guides and proofreading, plus an explanation of the latest technology and how it affects the content of a site.

It’s a professionally oriented book, which assumes readers might wish to work in the new medium. And they tell you how to go about it. There are tables and checklists of the skills you will require and even pointers towards the opportunities available and what rates to charge.

This is aimed at intermediate to advanced users – but it will be of interest to anybody who wants to extend their writing skills into the digital realm. I read this book whilst engaged on two medium-sized Web projects, and can confirm that all the roles, tasks, and collaborations they describe are 100 per cent accurate.

Buy the book at Amazon UK

Buy the book at Amazon US

Irene Hammerich and Claire Harrison, Developing Online Content: the Principles of Writing and Editing for the Web, New York: John Wiley, 2002, pp.384, ISBN 0471146110

More on online learning
More on technology
More on digital media
More on web design
More on computers

Don’t Make Me Think

July 2, 2009 by Roy Johnson

illustrated guide to new web strategies and usability

This is one of the new generation of web usability manuals. The objective isn’t to produce sophisticated pages full of tricky code. It’s more concerned with general strategies – based not on what web designers can do, but on what web users actually need. Steve Krug’s sub-title makes his approach clear – ‘A Common Sense Approach to Web Usability’. He admits from the outset of Don’t Make Me Think that he will only comment on successful sites. [This is the opposite approach to Flanders and Willis’s very successful Web Pages that Suck]. And like many other instances of successfully applied common sense, his advice comes from carefully observed details. In almost every example of successful implementation here, you feel like saying ‘Oh yes – that seems so obvious now!.’

He’s particularly good at analysing the finer points of positioning instructions on the page, the careful use of navigation devices, and the reduction of all text and choices to an unambiguous minimum. That’s the point of his title. We want to get through web sites with the least possible thought and struggle. He has a light, friendly style, and almost every point he makes is elegantly illustrated by examples from well known web sites which you can check. He offers a detailed study of tabs for navigation, then a few sample pages as tests to see if his theories work – which they do.

There’s also a lot of good advice on the design of home pages – using and organising the screen real estate as efficiently as possible and maximising the information conveyed by visual messages. His arguments are illustrated with analyses and makeovers of well known sites.

He’s very strong on usability testing, and offers good reasons why it should be done as early in the design process as possible. He also shows how it can be done very simply, and even argues that a small group of three or four testers is enough.

This is a pricey but very elegant publication from New Riders – who have set new standards in book production values. It’s amongst their web design best sellers – and quite rightly so.

Buy the book at Amazon UK

Buy the book at Amazon US

Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability, Indianapolis (IN): New Riders, 2000, pp.195, ISBN 0789723107

More on web design
More on digital media
More on technology

Dreamweaver The Missing Manual

July 8, 2009 by Roy Johnson

complete manual and guide to popular web editor

The ‘Missing Manual’ series is the brainchild of best-selling author David Pogue. These guides provide printed instructions for software normally issued without them. Dreamweaver seems to be the web design tool of choice for both serious amateurs and professionals. It offers lots of powerful tools which allow you to control everything from the details of page design to larger issues of style sheets, JavaScript interactivity, and Web management. Dreamweaver is to web pages as a word processor is to normal documents. That is, it has multiple commands which format the page in any way you wish. And the good thing is, you don’t have to learn any of the underlying code.

You can preview the results in multiple browsers – whichever you have installed. This manual covers all the conventional topics of web design – tables, frames, links, text formatting, and layout – but without once discussing the hieroglyphics of coding which must deter so many people wishing to design their own pages. It also deals with the more advanced features of web design, using style sheets, forms, layers, and multimedia such as Flash and Shockwave.

I think this is what has made Dreamweaver so popular – it caters for the amateur who doesn’t need to learn code; the semi-pro who needs power tools on a reasonable budget; and even the pro who wants site maintenance and management. It handles all these levels of task with ease.

Dreamweaver has lots of terrific features – such as a tool which will convert tags from upper to lower case – that is from from <B> to <b>. Why is this important? Because XML – to which we’re all heading – requires lower case tags. This makes it a powerful conversion tool, amongst other things.

There’s even a feature for re-organising existing sites which will automatically update all your links and folders. In addition, you can run a site past the program and it will show you any orphaned pages and broken links. These are excellent features for both amateur and professional users.

David McFarland’s explanations are painstaking and thorough, and these Missing Manuals are produced at O’Reilly Associates – which guarantees high quality production values.

Buy the book at Amazon UK

Buy the book at Amazon US

David McFarland, Dreamweaver: The Missing Manual, Sebastopol (CA): Pogue Press/O’Reilly, 2006, pp.960, ISBN: 0596100566

More on web design
More on digital media
More on technology

Eric Meyer on CSS

July 9, 2009 by Roy Johnson

web design using cascading style sheets

This is essentially a series of practical tutorials on using style sheets. Eric Meyer on CSS talks you through a series of web page makeovers in fine detail, illustrating the tips and tricks of a professional designer. It’s a book for people who already know HTML, but who want to move on into using style sheets. In fact that’s the point from which he starts – showing you how to convert an existing HTML page. The advantages of using CSS are threefold. Your web pages will be smaller and will download more quickly; you gain fine control over the layout of the page; and if you change the appearance of your site, it can be done with no more than one or two lines of code in the style sheet.

He goes through one makeover project in each chapter, showing how each additional line of coding affects the layout of the page. The changes are illustrated with screenshots each step of the way. For those who are really keen to learn, the book has its own web site where you can download all the pages and style sheets used in the tutorials. The idea is you can read his advice and work through the pages in a text editor at the same time.

His examples include styling a press release and an events calendar; bringing hyperlinks to life; controlling and styling navigation menus; and dealing with forms and background images using layers.

One of the most interesting chapters for me was creating style sheets for producing print versions of Web pages – something we have been asked to do a lot recently.

He also covers how to float and position page elements, how to create multi-column pages, and even how to combine sliced graphics with style sheet positioning to make non-rectangular pages.

It all becomes quite technically advanced, but he sticks to his one step at a time approach and explains every change of code and what effect it will have.

This will appeal to those people who want to get hands-on experience of style sheets, and I imagine it will also be useful as a reference for checking the effect of using any coding element – including the often unforeseen side effects.

Buy the book at Amazon UK

Buy the book at Amazon US

Eric A. Mayer, Eric Mayer on CSS: Mastering the Language of Web Design, Indianapolis: IN, New Riders, 2003, pp.322, ISBN 073571245X

More on technology
More on digital media
More on web design
More on computers

Free style sheet tutorials

November 17, 2009 by Roy Johnson

XML School

This is a comprehensive introduction to the basic issues of style sheets. The tutorials deal with a single issue on each page, and the site includes interactive examples, a quiz test, plus book reviews. It’s also a model of site design in terms of clarity and usability.
http://www.w3schools.com/css/

Webmonkey
This is everything you need to know about style sheet basics, written by Steve Mulder for Webmonkey.
http://www.webmonkey.com/tutorial/Mulders_Stylesheets_Tutorial

www.w3.org
The home of Web standards. This is a collection of resources and technical specifications from the World Wide Web Consortium. This body looks after the protocols and standards, so the site is always up to date. It also has online validators, so you can check your work.
http://www.w3.org/Style/CSS/

Dave Raggett’s Introduction to CSS
A thorough explanation of style sheet basics – written by somebody who is a member of the W3 organisation which defines style sheet protocols. The tutorial includes useful tips on browser-safe colours.
http://www.w3.org/MarkUp/Guide/Style

Jacob Nielsen’s ‘Effective Use of Style Sheets’
This article is now a little dated – but Nielsen is always worth reading. His emphasis here is on the advantages of style sheets, and how to avoid the most common mistakes.
http://www.useit.com/alertbox/9707a.html

Page Resource.com
Straightforward explanation of how style sheets work written by John Pollock. A bit dated in appearance now, but suitable for beginners.
http://www.pageresource.com/dhtml/indexcss.htm

Web Design Group
Another text-based primer on CSS basics, written by John Pozadzides and Liam Quinn. This too is bit dated in appearance now, but suitable for beginners.
http://htmlhelp.com/reference/css/

More on technology
More on digital media
More on web design
More on computers

Free web design tutorials

November 16, 2009 by Roy Johnson

learn the basics of HTML coding to make web pages

NB! All these links work at the time of publishing the page – but these sites have a habit of moving. That’s the bad news. The good news is that more established sites have the equally good habit of adding to their tutorials. So what starts out as a simple HTML tutorial might well now include guidance on cascading style sheets, XML, and much else. Be prepared to click around and search. You’ve nothing to lose – because it’s all free.

Jo Barta’s tutorial
This is a very popular free downloadable guide for beginners. It’s strong point is that Jo Barta takes everything one step at a time – and shows what the results should look like. It also contains a useful guide to web-safe colours.
http://www.pagetutor.com/download.html

XML School
This is a very comprehensive site which covers every aspect of HTML and web page design – as well as style sheets, XML, and other refinements. It’s also a model of clarity in site design itself.
http://www.w3schools.com/

Yale Web Style Manual
This does not teach the details of coding – but it’s a wonderful guide to site structure, navigation, and page design. Use it in conjunction with Joe Barta’s tutorial, and you’ve got everything you need.
http://info.med.yale.edu/caim/manual/

HTML 4.0 Reference
An authoritative guide to the HTML language by the Web Design Group, in easily searchable HTML format. You will find full explanations of elements, tags and attributes, and how they are used in an HTML 4.0 document.
http:/www.htmlhelp.com/distribution/

Web Design Group Web Authoring FAQ
Lots of how-to’s and information on overcoming common problems.
http://www.htmlhelp.com/faq/html/all.html

Scott Brady’s ‘Unofficial’ alt.html FAQ
More answers to problems that are often encountered.
http://www.sbrady.com/hotsource/toc.html

Introduction to HTML
A tutorial guide written in plain language with clear explanations of the HTML 4.0 specification from the University of Toronto.
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html

Sizzling HTML Jalfrezi
This is an A to Z reference guide to HTML specification 4.0.
http://vzone.virgin.net/sizzling.jalfrezi/intro.htm

Web Techniques
This an online version of the magazine Web Techniques – with a browsable archive of tutorial articles.
http://www.webtechniques.com

World Wide Web Consortium
This is the official body which co-ordinates all the latest developments in HTML and other Web standards. Visit the site for exact descriptions of cascading style sheets (CCSS) XML, and XHTML – but don’t expect any user-friendly tips and tricks.
http://www.w3.org

MSDN Online Web Workshop
This is Microsoft’s huge collection of tutorial guides for Web developers. Fairly advanced stuff – but very thorough.
http://msdn.microsoft.com/en-us/library/aa155133.aspx

HTML Code Tutorial
http://www.htmlcodetutorial.com/

HTML: An Interactive Tutorial for Beginners
http://www.davesite.com/webstation/html/

BigNoseBird.com
http://www.bignosebird.com/

More on technology
More on digital media
More on web design
More on computers

Free XML tutorials

November 17, 2009 by Roy Johnson

XML School
This is a concise introduction to the basic issues of XML design, including its syntax, elements, Cascading Style Sheets, and ‘behaviours’. It’s also a model of good site design in terms of clarity and usability.
http://www.w3schools.com/xml/

The XML Elements of Style
In honor of Strunk and White, who wrote the inimitable writing guide, Elements of Style, O’Reilly author Steve Muench presents his own succinct and lucid list of rules for creating a well-formed XML document.
http://oracle.oreilly.com/news/oraclexml_1000.html

Tizag.com
This is a slightly geeky, but reasonably useable introduction to XML.
www.tizag.com/xmlTutorial/

XML Files
This is a bare-bones introduction to XML set at intermediate to advanced level. It assumes you already know about HTML coding and protocols.
http://www.xmlfiles.com/xml/

XMLhack
This site offers a digest of the latest XML news, opinions, and tips. Very useful for keeping up to date.
http://www.xmlhack.com

Quackit.com
The designer of this site says – “My aim with Quackit is to ‘de-mystify’ web technologies as quickly as possible and to provide a general overview of each technology first, rather than jumping straight into the technical details.”
http://www.quackit.com/xml/tutorial/

W3CXML
This is the official site of XML standards, provided by the World Wide Web Consortium (W3C). Their documents are extremely thorough, but notoriously dry. Don’t expect any ‘useful tips’ or hand-holding. The site also has online validators for checking your work.
http://www.w3c.org

The Apache XML Project
This is Open Source XML software, provided by Apache, the free, industrial-strength Web server.
http://xml.apache.org

More on technology
More on digital media
More on web design
More on computers

Fresh Styles for Web Designers

June 8, 2009 by Roy Johnson

new web design strategies and techniques

So far, web design theory has been split between usability minimalism as urged by gurus such as Jakob Nielsen at one end of the spectrum, and the bandwidth-hogging graphic designs of David Siegel at the other. Now Curt Cloninger suggests we can combine the two approaches – and he shows how it can be done. This is one of those Web strategy guides which assume you know the details of designing pages.

What it offers is a survey of new strategies in structure and graphic presentation – some of them on the edge of the avant garde. Cloninger takes the line that these are the early days of the Web, that there are severe limitations on what is possible, but that inventive designers will embrace the limitations and turn them into positives.

The reasons he offers are that not all sites are driven by e-commerce or a desire to maximise hits. Some are exhibition or display sites; galleries or individual portfolios of work – something like an elaborate visiting card. There is no reason why such sites shouldn’t indulge themselves with the sorts of glamorous graphics and ‘entry pages’ supported by designers such as David Siegel.

He categorises sites as ‘Gothic’, ‘Grid-based’, ‘Grunge’, ‘Mondrian poster’, ‘Paper Bag’, and ‘HTMinimaLism’ – and despite his post-hippy approach these distinctions do eventually make sense. Designers in these camps treat the page design, the Web strategy, and the visitor experience in significantly different ways.

One of my favourites was the minimalist style – sites from the competition www.the5K.org which feature pages of games, puzzles and art collections the total size which must come in under five kilobytes. [Try it!] The other was the sci-fi look of what he calls ‘Drafting/Table Transformer’ style led by Mike Young, whose work is featured in the recently published book of animated graphics.

Each chapter describes the features of one style. It then analyses examples, with well-produced screenshots of sites which are often private and experimental. Then he tells you how to achieve these effects. It’s a very good formula – no matter what you think of the sites.

He’s quite keen on distressed backgrounds and the grunge typography of designers such as David Carson – and he tells you how to create the effects. This will appeal to those who want to make a visual impact. He has favoured designers who he claims have been influential – Mike Cina, Miika Saksi, and a Chicago design group 37signals.

There’s a lot of detailed instruction on how to achieve special effects – most of them done in Photoshop. The general strategy is to maximise visual effects whilst minimising download time. And it has to be said that all the effects are beautifully illustrated, with full pages of elegantly presented coding.

Buy the book at Amazon UK

Buy the book at Amazon US

Curt Cloninger, Fresh Styles for Web Designers, Indianapolis IN: New Riders, 2001, pp.211, ISBN: 0735710740

More on design
More on media
More on web design

Graphic Design School

June 14, 2009 by Roy Johnson

basic design principles using all modern media

This is a structured self-teaching guide to the principles of graphic design which provides up-to-date information on computer aided design and the use of software applications. Graphic Design School itself is beautifully designed and printed – in full colour, with excellent design and layout fully illustrating the principles it espouses. First of all it deals with basic design principles – layout, space, colour, typography, and graphics.

Each topic is presented on one double-page spread in a stylish layout which shows off some of the best principles the book is designed to promote. The second part of the book looks in more detail at what effects are possible with detailed manipulation of typeface selection. It also looks at the secret ingredient which lies beneath most examples of good design – grids.

The last part looks at examples of professional design practice – magazines, corporate design, books, presentations, and of course web design.

It’s a visually exciting overview of what’s required in the increasingly complex and sophisticated word of graphic design. The illustrations are wonderfully fresh and well chosen. There wasn’t one I had seen in any publication before.

This will be suitable for people working in newspapers, magazines, books, packaging, advertising, web design, and digital media in general. It’s packed with practical guidance for students and practising designers.

It’s an introductory guide to a discipline with many facets. I imagine that readers will come across a topic that touches a creative nerve – layout, typography, animation, or image manipulation – then shoot off to follow up the subject elsewhere. That’s exactly as it should be – and there’s a glossary and bibliography to help too.

Buy the book at Amazon UK

Buy the book at Amazon US

David Dabner, Graphic Design School: The Principles and Practices of Graphic Design, London: Thames and Hudson, 2004, pp.192, ISBN: 0500285268

More on design
More on media
More on web design
More on typography

Web design

web design skills, usability, tools, techniques, and styling

XHTML + style sheets = creating ‘timeless code’

The principles of writing and editing for the Web

illustrated guide to new web strategies and usability

complete manual and guide to popular web editor

web design using cascading style sheets

learn the basics of HTML coding to make web pages

new web design strategies and techniques

basic design principles using all modern media

Get in touch