Mantex

Tutorials, Study Guides & More

  • HOME
  • REVIEWS
  • TUTORIALS
  • HOW-TO
  • CONTACT
>> Home / Archives for Web design

72 dpi

July 2, 2009 by Roy Johnson

showcase of the latest in web design techniques

This is a handsome collection of web site illustrations – with a difference. All the designers wish to challenge conventional web design principles and exploit the possibilities of the new medium to achieve dramatically innovative effects. 72 dpi is a book with superb graphics and production values, but you have to be prepared for some challenging visual concepts. The pages make few concessions to what Jakob Nielsen calls ‘usability’. Plus the authors are not very good at explaining what they’re up to. Details of navigation and who produced what are almost wilfully obscure. But it’s all there if you’re patient.

72 dpi What the designers have in common is seemingly a desire to get away from standard navigation devices and text-dominated explanations of content. Their home pages offer instead visual dramas which are more like modernist paintings. Black and dark grey are the most popular screen colours, and there’s lots of imaginative use of typography as a graphic design element. When I checked some the sites, many of them were using Flash and Shockwave [no surprise there then].

The elegant page spreads are interspersed by brief policy statements from the designers, some of them interestingly thoughtful on the subject of web design and its new challenges, others lapsing badly into art school manifesto babble.

Some of the designs show exquisite use of colour. I particularly liked Matt Owens’ deeply layered pages which are reminiscent of Francis Bacon portraits. And indeed, some of these creations are very close to being works of art in a new medium.

Most of the latest avant-garde styles are represented – what Curt Cloninger calls HTML minimalism, Lo-Fi grunge, Mondrian poster, and Drafting table / transformer. What they certainly have in common is an imaginative approach to creating web sites. You are sure to find fresh ideas and visual stimulation here, even if they don’t reveal how their special effects are achieved.

© Roy Johnson 2000

72 dpi   Buy the book at Amazon UK
72 dpi   Buy the book at Amazon US


Robert Klanten (ed), 72 dpi , Berlin: Die Gestalten Verlag, 2000, pp.345, ISBN: 3931126358


More on design
More on media
More on web design


Filed Under: Graphic design, Web design Tagged With: Graphic design, Web design

A Pattern Language for Web Usability

June 20, 2009 by Roy Johnson

improve web site efficiency and usability

Pattern language is a notion borrowed from architecture. It means ‘standard solutions to recurring problems’. This is rather like ‘learning objects; in the design of training courses or standard solutions to problems in computer programming. In terms of Web design, this means using templates and lowest common denominator solutions to graphic interface design, following common routes, and using ‘patterns’ of what users normally expect to see on screen.

In software development, a pattern (or design pattern) is a written document that describes a general solution to a design problem that recurs repeatedly in many projects.

A Pattern Language for Web UsabilityThe first three chapters of this book discusses these issues theoretically. The topics are also linked to questions of usability, navigation, and information architecture. It has to be said that these pages make for rather dry reading. But then in the second, larger part of the book, everything comes to life. What follows is a series of seventy-eight case studies in which a problem is posed, analysed, and solved using the pattern language model.

This is as much business studies and project management as web design. But then anyone who has had to decide what to put on a homepage and where to place it will have already been engaged in such decisions.

It includes very good tips such as resisting the urge to add help features in place of removing anything which impedes a user’s intuitive navigation of the site. He draws heavily on the work of Jakob Nielsen, Jeffrey Veen, Steve Krug, and Edward Tufte – all of whom are reliable sources.

What emerges is good, brief advice notes on how to create site maps, where to position search boxes, use of colour-coding for navigation, breadcrumb trails, and where to place navigation bars.

These suggestions eventually include the more sophisticated issues of server side includes, cookies, and even security and encryption.

You won’t be surprised to hear that he advises against the use of frames. I wish somebody had told me that earlier. Converting from a framed to a non-framed structure has cost me more time, energy, and money than anything else on the site you are visiting now. Thank goodness for the arrival of WordPress and its content management system. Now that is a pattern that’s worth repeating.

© Roy Johnson 2003

Buy the book at Amazon UK

Buy the book at Amazon US


Ian Graham, A Pattern Language for Web Usability, London: Addison Wesley, 2003, pp.283, ISBN 0201788888


More on web design
More on digital media
More on technology


Filed Under: Web design Tagged With: A Pattern Language for Web Usability, Information design, Usability, Web design

Ambient Findability

July 10, 2009 by Roy Johnson

why designers must keep users in mind

Peter Morville was co-author (with Louis Rosenfeld) of one of the essential books on information architecture, Information Architecture for the World Wide Web. This is his solo follow-up, which looks at the latest features of on-line life and tries to see what lies ahead. Ambient Findability is a very positive, almost excited, view of the last decade in web development. His central thesis is that information literacy, information architecture, and usability are all critical components of a new world order.

Ambient Findability He believes we have almost an ethical imperative to design the best possible software and web services to enhance the quality of our online life. All this has come about because of the unprecedented developments in data manipulation, connectivity, hyperlinking, and interactive services which have emerged in the last few years.

His new take on arranging information and navigational systems insists that they must be constructed around what the user requires, not the designer, and that they must be constructed with maximum findability in mind. The users, purchasers, or consumers are now Kings – because of their experiences on sites such as eBay and Amazon.

Never before has the consumer had so much access to product information before the point of purchase.

He looks at wayfinding systems in the natural world, then considers the relationship between language and information retrieval, including how we define meta-data. He sets great store by the theory of information analyst Calvin Moores, who suggested that people will not seek information that makes their jobs harder, even if it might benefit the organisation they work for.

For this reason, he has positive things to say about gossip and browsing. We are conditioned by evolution to pick up signals and recognise what he calls ‘textual landmarks’ in our search for information and our interpretation of the world. “Technology moves fast. Evolution moves slow.”

Because computers are becoming smaller and smaller, he then moves on to an encomium for the mobile device. This is followed by the technology which comes closest to fulfilling his desire for maximum findability – GPS (Global Positioning Systems).

He then looks at the issues of reconciling good web design with the competing demands of usability and efficient marketing – and solves the problem with a mantra that summarises his principal thesis: “Findability precedes usability. You can’t use what you can’t find.”

This leads into what I take to be the heart of the book – his take on the state of information architecture today. First he explains the competing views regarding the ‘semantic web’, which centre around definitions of meta-data so far as I understand it. Then he argues that these views can be reconciled if we accept the traditional roles of taxonomies for defining data – along with what he called ‘folksonomies’ whereby people put their own definitions on tagged objects.

This is not as important a book as Information Architecture for the World Wide Web, but it’s a thought-provoking guide to recent web developments and what might happen next in the online world. It’s full of interesting and provocative ideas, relevant graphics (first time I’ve seen colour in an O’Reilly publication!) and all the references are fully sourced.

© Roy Johnson 2005

Ambient Findability   Buy the book at Amazon UK

Ambient Findability   Buy the book at Amazon US


Peter Morville, Ambient Findability, Sebastopol, CA: O’Reilly, 2005, pp.188, ISBN: 0596007655


More on information design
More on design
More on media
More on web design


Filed Under: Information Design, Web design Tagged With: Ambient Findability, Findability, Information design, Navigation, Search, Usability, Web design

Anime

July 1, 2009 by Roy Johnson

Showcase of the latest digital animation – print and DVD

Don’t be misled if you see this book in a shop. It’s a dazzlingly attractive publication – an elegant catalogue of full-colour screenshots housed in a translucent plastic case. But the heart of the production is a huge collection of animated graphics on the enclosed DVD. These are movie clips, motion graphics, linear narrative sequences, interactive web pages, and vector presentations – some as long as promotional videos. They range from avant-guard art-school productions – fuzzy, out-of-focus, and granular – to slick commercial projects by some of the best designers in this new field.

AnimeQuite a few of the most stylish examples are rendered in the manner of French bandes dessinées and graphic novels – hard outlines, block colour, and a predominance of black and grey highlighted by occasional dark brown, blue, or citron. I’ve watched them over and over again, and I’m still amazed.

There’s lots of deliberately jerky editing, overlayering, jumpcuts, and out-of-focus images set to the rhythms of stripped-down, heavily sampled techno-music – sometimes drum-and-base dance style, and occasionally ‘ambient’ sound.

A lot of them are in what Web designer Curt Cloninger in his recent Fresh Styles for Web Designers calls ‘Drafting Table/Transformer’ style – the kind of things that look like docking station accidents in outer space. Others favour the ‘Mondrian poster style’ – screen filled with block colour in muted tones, and pared down text in lower-case sans-serif font.

There are lots of recurrent images and themes – architecture, motorways, metal fabrications, skyscrapers – and the spirit of Ridley Scott’s Bladerunner hangs over the majority. It’s a great pity there isn’t more technical detail on how these pieces were made – though Flash seems to be the prevalent technology.

Most of the movies seem to be from the ‘Yellow Submarine’ school of graphic design – lots of semi-surreal cartoon figures morphing in and out of each other. There’s also a popular streak of sci-fi comic book characters and their icons brought to life.

For me, the simplest and the shortest pieces are the best. There are two wonderful movie title sequences designed by YU + CO for ‘Mercury Rising’ and ‘Lost Souls’. These are in black and white, and they are largely composed of motion typography with a moody soundtrack. They show how a simple combination of image, movement, and music can create stunning effects.

This is not just a book with DVD attached, it’s an outstanding DVD gallery of motion graphics with a first rate printed catalogue. There is an amazing amount of visual stimulation material here for those studying or working in the digital arts. Anybody who is interested in graphic animation and the latest developments in Web technology should see these works.

© Roy Johnson 2001

Anime   Buy the book at Amazon UK

Anime   Buy the book at Amazon US


Robert Klanten (editor), Anime, Die Gestalten Verlag, 2001, pp.192 pages ISBN: 3931126722


More on design
More on media
More on web design


Filed Under: Graphic design, Media Tagged With: Anime, Graphic design, Media, Video animation, Web design

Cascading Style Sheets

July 4, 2009 by Roy Johnson

explanation – by the guys who invented them

What are cascading style sheets (CSS)? Answer – “a simple mechanism for adding style (fonts, colors, spacing) to Web documents”. If you have spent any time at all wrestling with HTML code, trying to control the layout and appearance of text on a page, you will know one thing. It’s an almost hopeless task. What looks good in Netscape might be a dog’s breakfast in Internet Explorer, and it will probably look even worse in Opera. The same would be true of more recent browsers such as FireFox and Google Chrome.

Cascading Style SheetsAs Lie and Bos explain: “HTML doesn’t pay much attention to the document’s appearance” – so CSS offers “a simple language that can be read by humans”. It’s basically another system of coding which can be added to .htm pages which allows the author more control over the physical appearance of what’s on the page. It also begins the process of separating appearance from content. They start with an introduction to basic HTML (which they claim can be learned in less than a day!) before describing CSS in all its detail. This is where any normal user will encounter the first difficulty – because the code is defined in a relentlessly arbitrary jargon – of ‘selectors’, ‘declarations’, ‘properties’, and ‘values’.

Then they go on to describe the variety of ways in with a style sheet can be ‘glued’ to a document. This fortunately offers the user more than one way to achieve a particular effect. But there’s no escape from the abstract style:

Recall from Chapter 1 that an attribute is a characteristic quality, other than the type or content of an element. In that chapter we discussed the attributes HREF, SRC, and ALT. In this chapter we will discuss two new attributes that have been added to all HTML elements to support style sheets

But what it lacks in accessibility, it makes up for in thoroughness, and fortunately, the book is very well illustrated. They cover all the features of this mini-technology which Web designers are likely to require – fonts, spacing, layers, colours, and the tricky issue of forward compatibility. They describe the issues of cascading and inheritance which advanced users might wish to exploit. I would have liked to see the page code for some of the wonderful examples they reproduce in full colour, but at least they show what CSS can do.

Style sheets may well become more popular as the early generations of browsers which didn’t support them fade into the ancient history of the Web [that is, anything more than five years old]. If you’re interested in exploring the possibilities of CSS, then you might as well get the story from the guys who invented the idea – and make sure you buy the latest (third) edition, which contains a useful comparison of browser-support. As the HTML standard is developed to keep pace with browsers in their latest versions, this is a book with a bright future.

© Roy Johnson 2005

Buy the book at Amazon UK

Buy the book at Amazon US


Hakon Lie and Bert Bos, Cascading Style Sheets: Designing for the Web, New York/London: Addison-Wesley, (third edition) 2005, pp.416, ISBN 0321193121


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


Filed Under: HTML-XML-CSS Tagged With: Cascading style sheets, CSS, HTML-XML-CSS, Web design

Cascading Style Sheets

July 9, 2009 by Roy Johnson

complete explanation of style sheets for web designers

This is the second edition of Eric Meyer’s best-selling guide to cascading style sheets. It covers CSS1 in impressive depth, and cautions readers quite frankly about some the problems of the still immature CSS2. Style sheets are the solution to the one big limitation of HTML. They allow authors to control the appearance of what’s on the page, leaving the HTML code to describe the content and its structure – which was its purpose in the first place.

Cascading Style Sheets The original guide to CSS, Cascading Style Sheets, produced by its inventors Hakon Lie and Bert Bos, is thorough and well illustrated, but it’s written in a very dry manner. Eric Meyer manages to make his account more readable, and more easily digestible for those who will need it. His ‘definitive guide’ is organised in logical sections which discuss what can be done with fonts, colour, the appearance of text, and layers – which is the introduction of a third dimension to what appears on screen.

He explains the many ways of creating colour – with a humane description of the mind-bending hexadecimal system. Then he deals with the complications of length units, the arrangement of text on the page (using spacing, justification, decoration, and alignment) and the way in which fonts and the appearance of text can be controlled.

He goes into a lot of detail on the manner in which fonts are rendered – their family, size, weight, attributes. The same is true on backgrounds. It’s a pity that O’Reilly have decided to limit the book illustrations to white, grey and black – because the topic is crying out for colour illustration.

Sometimes there are extended descriptions of what CSS tags will do, when an illustration would have been more useful, but he explains which elements are ‘deprecated’ – that is, ‘in the process of being phased out’ from the HTML Specification.

CSS also allows authors to get ready for the eventual move from HTML to extensible markup language (XML) so it’s worth learning about style sheets if the current enthusiasm for XML is going to last. There are some amazingly complex effects described which involve background images and negative positioning – pushing graphics off the screen.

You have to be prepared to embrace another set of jargon – declarations, elements, selectors, properties, pseudo-elements, values, specificity, and inheritance – but no doubt these terms will become familiar.

There are also three useful appendices – an annotated list of resources, a complete list of CSS1 and CCS2.0 properties, a sample style sheet, and a list of browser support. O’Reilly have occasionally been criticised for calling so many of their manuals ‘the definitive guide’ – but in this case there’s a good case to say the title is fully justified.

© Roy Johnson 2006

Buy the book at Amazon UK

Buy the book at Amazon US


Eric A. Meyer, Cascading Style Sheets: The Definitive Guide, Sebastopol, CA: O’Reilly, third edition, 2006, pp.518, ISBN 0596527330


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


Filed Under: HTML-XML-CSS Tagged With: Cascading style sheets, CSS, HTML-XML-CSS, Web design

Create your First Web Page in a Weekend

June 3, 2009 by Roy Johnson

well-planned tutorials on HTML design basics

Can it really be done in a weekend? Well, if you set some time aside and follow the tutorials in this clearly-written guide, it’s possible that you could have a few decent pages up within the forty-eight hours. Steve Callihan kicks off with some background explanation of Web matters, and information on what you’ll need. This is designated as what you might do as preparation on ‘Friday night’. On Saturday morning there’s a first step-by-step tutorial on HTML code basics. This is followed by tips and tricks which will help you to control the layout and appearance of your Web pages.

First Web PageThe Saturday afternoon tutorial covers graphics, wrapping text around images, and how to deal with the tricky issue of browser-safe colours. Everything is spelled out very clearly, strictly one topic per paragraph, and everything clearly labelled and well illustrated. Assuming that you don’t go out on Saturday evening, it is devoted to learning the mysteries of tables. Then during the rest of the weekend you put what you have learned into practice by making a small web site. There is quite a heavy emphasis on graphics, so this will appeal to people interested in such visual effects as drop shadows, decorated text, and creating your own 3-D buttons.

When that is done, he shows you how to get your site up onto the Web, and there are bonus extras on those items which seem to be popular with beginners – hit counters, guestbooks, image maps, and animated gifs.

This book is in its third edition – so the basic approach has obviously been successful. To be truthful and realistic, I would suggest spending at least a week reading it and absorbing what it has to say first. Then a weekend at the keyboard might yield decent results. And if you need extra help, there are plenty of page templates, plus lots of free software on the accompanying CD-ROM.

© Roy Johnson 2000

Buy the book at Amazon UK

Buy the book at Amazon US


Steve Callihan, Create your First Web Page in a Weekend, (third edition) Rocklin, CA: Prima Publishing, 1999, pp.425, ISBN 0761524827


More on web design
More on digital media
More on technology


Filed Under: Web design Tagged With: HTML, Technology, Web design

Creating Killer Web Sites

July 18, 2009 by Roy Johnson

best-selling web design guide with graphics emphasis

Design guru David Siegel posits the notion that web sites exist in three ‘generations’. First generation sites, created in the mad rush of the early 1990s, were not much more than text files with hyperlinks – and they were inescapably linear:

most had edge-to-edge text that ran on for pages, separated by meaningless blank lines. At best, they looked like slide presentations shown on a cement wall.

Creating Killer Web SitesSecond generation sites were basically the same, but with with icons replacing words, tiled images replacing the ubiquitous grey background, and banners replacing headlines. His claim for the idea of third generation sites is that they offer a new visual experience in which the visitor is ‘pulled’ through the pages using metaphors and “well-know models of consumer psychology”.

For instance, he’s in favour of ‘splash screens’ – entry pages which act as an advert for the sites they introduce. Then he wants sites to offer an ‘experience’ rather than effective data-sharing. The site maps he reproduces in the latest edition of Creating Killer Web Sites have pages on which there is only one link to anything else. He even promotes the idea of ‘exit’ pages which tell the site visitor that this web experience is over.

Having visited his personal site with its splash screen of the Andy Warhol ‘Marilyn’ prints several times, I find them simply an unnecessary impediment to accessing the valuable advice he makes available beyond. None of this sits easily with the idea that any page should be no more than two or three clicks away from any given point. And why introduce an extra stage in the navigational process which yields no real information? This ‘guided tour’ approach to the web experience works directly against the sprit of hypertext, which should give people the freedom to follow whatever links they choose. Why then has he been such a powerful influence in the last few years?

Well, the truth is that apart from this rather idiosyncratic notion, he has a lot of very useful advice to offer on the practical aspects of site design. Not only is his book elegantly produced, it’s packed with tips and tricks which have proved enduringly popular. Much of his success as a designer is founded on his background in typography and graphics, and he makes no bones about the fact that he wants more control of layout on screen.

His most useful guidance, it seems to me, is focused on the aesthetics of page elements and the visual experience of reading on a monitor. For instance, he maintains his crusade against the horizontal rule <HR> but has abandoned advocacy of the single-pixel gif trick to control white space. He’s now in favour of the non-breaking space <&nbsp;> and he has the honesty to admit that many of these devices are ‘hacks’ to achieve effects denied us by the browser.

Text should be held in a narrow column [like this one] and should be limited to what can be read in about a minute, or four to six screens, before offering a new page. He’s against the use of bullets: “They are ugly, identical, and convey little meaning…design around them in all cases” – and he produces plenty of elegant screen shots and page makeovers which support his arguments.

He’s equally adamant on the use of indents to separate paragraphs – “no matter what it takes to make them” and the use of the <P> tag is designated as Deadly Sin number one. I think he’s just a little quirky in this, because this strategy is clearly striving to imitate the appearance of the printed page where it may not always be appropriate – on screen.

He deals with the most fundamental issues of page layout using clear language, and he illustrates the HTML techniques to achieve each effect in a way which anybody could follow. There’s no tricky programming or Java script to be mastered. My notebook was full in no time of coding tips, URLs, and bibliographic recommendations which I’m itching to follow up.

It’s slightly disappointing that the admirable clarity of his approach in early sections of the book is not extended to those on typography and ‘site makeover’. Here he assumes that all the manipulation will be via graphics, and some chapters are dense with PhotoShop techniques which are not as general as his advice on page layout. There is nothing on choice of fonts or the use of the <FONT> tag, which is still controversial enough to warrant comment. He assumes you’ll already know a lot about the creation and manipulation of images. Yet how many readers outside design studios would be able to make much of advice such as “I flatten this entire page and use adaptive color reduction with no dithering”?

Fortunately, there are full-page reproductions of the HTML code for his designs, which is helpful for analysing and understanding the effects he is discussing. He also has an honest and breezy style – “Hang on. This is going to get messy” – and he spells out the truth of rapid and uneven development:

Designers are facing new challenges: how to design sites during the awkward transition from version 3.0 and 4.0 browsers to the version 5.0 and [more important] 6.0 browsers to come. The limitations of 3.0 browsers require designers to resort to workarounds and tricks

This frankness is one of his key strengths. He admits that he doesn’t know how to write his own cgi scripts, and en passant like a young enthusiast he recommends interesting free services and software – such as Gif Wizard, which will optimise your images – as well as very clever tricks for pre-loading the image for a page in advance of its appearance.

In the latter part of the book he offers predictions for the future – cascading style sheets, then XML will predominate – plus some rash promises on details: “I predict that in late 1998, PNG [a graphic format] will take over. With any luck, GIF will be eradicated like the SmallPox virus by the end of 1999”. We’ll wait and see.

I think it’s clear why Creating Killer Web Sites has become a best-seller. Apart from the fact that it’s very stylishly designed and printed, it concentrates on reproducing the sort of graphically advanced page designs which many people would like to create. Strictly speaking, this is really for site builders who wish to maximise the visual novelties of their design whilst minimising the strain put on bandwidth resources. However, it has so many fascinating insights and practical tips to offer, it’s a design manual you can’t really afford to miss.

© Roy Johnson 2002

Buy the book at Amazon UK

Buy the book at Amazon US


David Siegel, Creating Killer Web Sites: The Art of Third-Generation Site Design (2nd edn) Indianapolis: Hayden, 1997, pp.306, ISBN: 1568304331


More on web design
More on digital media
More on technology


Filed Under: Web design Tagged With: Creating Killer Web Sites, David Siegel, Graphic design, Web design

Creating Web Sites: The Missing Manual

July 5, 2009 by Roy Johnson

basic hands-on techniques for beginners

Missing Manuals are a series of technical help books which have come along to fill the space left by software developers who can’t be bothered to explain how their programs work. This one covers lots of software, because it deals with the entire process of creating and running your own web site. Matthew MacDonald starts off by explaining how web sites work and how to decide which is the best type for you. Then it’s time to roll up your sleeves and learn the details of HTML code and how to create a sample site. First he talks you through the basics of page layout, then he takes a big step forward technically to show you how to choose and register a domain name and how to upload files via FTP.

Creating Web Sites: The Missing Manual(My advice for beginners would be to skip this chapter and come back to it later when you are ready to launch.) Following this he looks at HTML editors such as Front Page and Dreamweaver and talks you through their features. I was glad to see however that he also includes free downloadable editors such as Nvu and CoffeCup. Next he talks you through all the most common formatting devices you will need to make your pages look good. Then it’s on to style sheets, which is the correct and the best way to arrange the appearance of what appears on screen.

Next comes adding graphics, which most people want to do, once they’ve started creating text. Some of the techniques he demonstrates involve quite a sophisticated knowledge of style sheets and graphics, but fortunately he spells out the required coding and gives illustrated examples of the results. The same is true of his chapter on tables and layout using styles.

He gives excellent advice on promoting your site to search engines and directories, as well as straightforward explanations of some of the arcane technicalities of search engines.

There’s also a chapter I didn’t really expect – on how to make money with your site by signing up to the Google Ads and Amazon affiliate programs. These really do allow you to “make money whilst you are asleep” – so long as you can attract enough visitors to your site.

He ends with some fairly advanced tips and tricks: using JavaScripts and Dynamic HTML; creating fancy buttons and dropdown menus; and adding multimedia audio and video files. But for those people who want to have a presence on the Web but can’t cope with all the technicalities of building and maintaining pages, he concludes with a chapter on blogging. This really is the quickest and easiest solution.

I have been tinkering with web sites and reviewing web design manuals for years, and all I can say is that this is the best beginners manual I have come across.

© Roy Johnson 2005

Buy the book at Amazon UK

Buy the book at Amazon US


Matthew MacDonald, Creating Web Sites: The Missing Manual, Sebastopol: CA, O’Reilly, 2005, pp.548, ISBN 0596008422


More on web design
More on digital media
More on technology


Filed Under: Web design Tagged With: Creating Web Sites, The Missing Manual, Web design

CSS Cookbook

July 17, 2009 by Roy Johnson

quick solutions to common style sheet problems

Style sheets take all the slog out of designing the appearance of your web pages. No more fiddling with the code in a multitude of pages: just fix the font size, the line spacing, the page width or the size of headings in one file, the style sheet, and that will apply across your whole site. This is a guide to what is possible using the latest specification (2.1) of style sheets, written by Christopher Schmitt – one of the endless number of expert authors O’Reilly manage to locate.

CSS CookbookIt’s aimed at people who want to make a start with style sheets, or who are grappling with their problems and need quick fix solutions. It assumes you know the basics of web design using standard HTML markup, but he does keep the relationship between the two clearly in mind:

As a design language, CSS is focused on presentation, which includes helping web developers control the layout of their pages. HTML tables and other elements, on the other hand, are tools you use to mark up content. The ideal is to have HTML represent the structure of the content as an intellectual abstract level and CSS say how to present it for a particular device.

The presentation couldn’t be simpler. First a problem is specified (You want to indent the first line of a paragraph) and then he shows the CSS code to achieve it, followed by an illustrative screen shot. There’s an explanation of how and why it works as it does, and there are web links to online tutorials and official specifications directly related to that topic.

Each chapter considers one element of a web page that style sheets can control – the font, the page, links, lists, forms, tables, and how to create print-friendly pages.

He shows some of the new effects possible with the latest CSS version 2.1 – creating collapsible menus and tabbed folders, designing forms without using tables, controlling the appearance of content held within table cells, and creating multi-column pages holding the content in place with the very useful float property.

One of the hardest parts of learning about style sheets so far as I am concerned is the language in which it is expressed. It’s a pity there’s so much abstract terminology. Even at intermediate level it’s difficult to grasp immediately statements such as this:

Because these properties aren’t passed to child block-level elements, you don’t have to write additional rules to counter the visual effects that would occur if they were passed.

He finishes with some nifty tips, tricks, and workarounds. How to create a print-friendly style sheet for instance. This removes all the decoration and navigational graphics from a web page to produce something that is comfortably readable when printed out. All this without changing one bit of the page markup.

There’s also a useful appendix listing discussion groups, web resources, downloadable software, and ready-made CSS templates. Like everything else in this book, these take you quickly to solve problems of design.

The latest edition of this book is a hugely enlarged resource – more than double the size of the first. It’s been expanded to include much more information for CSS learners, explaining topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables. For more advanced users it has also been updated to take into account the behaviour of CSS in the latest versions of web browsers, including Internet Explorer 7, plus Firefox and Opera. You can’t get much more up to date than this.

© Roy Johnson 2009

Buy the book at Amazon UK

Buy the book at Amazon US


Christopher Schmitt, CSS Cookbook, Sebastopol, CA: O’Reilly, third edition, 2009, pp.736, ISBN: 059615593X


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


Filed Under: HTML-XML-CSS Tagged With: CSS, HTML-XML-CSS, Style sheets, Web design

  • 1
  • 2
  • 3
  • …
  • 9
  • Next Page »

Get in touch

info@mantex.co.uk

Content © Mantex 2016
  • About Us
  • Advertising
  • Clients
  • Contact
  • FAQ
  • Links
  • Services
  • Reviews
  • Sitemap
  • T & C’s
  • Testimonials
  • Privacy

Copyright © 2025 · Mantex

Copyright © 2025 · News Pro Theme on Genesis Framework · WordPress · Log in