Web Design

Many Linux distributions come with a web server installed (or it’s very easy to install one).

If you’ve got a web server running and you have no idea why, you have two options:

• Uninstall it.
• Create a webpage on it, and join the world wide web.

There are tons of information sources for website development, and loads of software tools to help you do it, but an ordinary text editor will always be up there with the best of them.

I’ll get to some hints and tips in minute, but first let’s get you started.

Recommended Sites

• http://www.w3.org/ – Where it all starts. Specifications and references.

• http://www.w3schools.com/ – Tutorials on a wide range of subjects. Unfortunately, many subjects are IIS or Windows specific. Also, this site doesn’t really teach good practice, only the technology.

• http://www.alistapart.com/ – Good tutorial and discussion site. Very pro standards and pro fancy design.

• http://www.meyerweb.com/ and http://www.complexspiral.com/ – tips and tricks from the top CSS guru Eric Mayer.

• http://www.positioniseverything.net/ – an excellent site for CSS positioning, with a good description of browser defects and workarounds.

• http://www.quirksmode.org/ – another good site with good examples and explanations of dhtml on all the modern browsers.

• http://www.csszengarden.com/ – an excellent site for pure CSS design, concentrating on highly attractive and visual results from clean structural mark-up, and effective use of CSS.

Recommended Software

• Quanta – KDE HTML editor. A power HTML editor. WYSIWYG editors exist but tend to be dismal.

• Apache – Advanced Webserver. Reputedly a little slow, but only because of its power. You’ll come to love its aliasing and rewrite features which are one of the reasons over 60% of websites use this webserver.

• See also the SoftwareReviews/Web page.

Tips

View the Box Model

The box model is central to HTML layout. One way of getting a feel for the box model is to force rendering of boxes with an accessibility stylesheet, if your browser supports it (couldn’t find it in Firefox, but it is under ‘Stylesheets’ in Konqueror preferences).

The CSS for this looks like

 * {border: solid silver 1px !important}

Of course, this is also a useful debugging tool for complex CSS layouts.

The Web Developer Extension gives Firefox/Mozilla users a very powerful interface to control the look and feel of a web page on the fly. You can edit a remote web page’s style sheet on the fly, disable/enable all sorts of things, and naturally outline things so you can see what is going on.

The latest Opera also has some developer tools, but I don’t think they are as quite advanced yet.

Common Mistakes

;<B>Using frames</B>: Framesets are useful in very limited circumstances. I can say with 95% certainty that where you are thinking of using them isn’t one. Problems with frameset are numerous, and include poor interoperability with search engines, crippling what you can do with CSS, producing confusing behaviour with the back button, and having to micromanage which frame your links target. Also HTTPS is insecure if it’s loaded in insecure frames. IFRAMEs are useful in many more situations, but are still slightly inelegant. There are a couple of advantages to frames – nameley saving some bandwidth on browsing multiple pages and keeping information on screen at all times; but these are largely offset by gzip compression and the CSS property position: fixed in current browsers anyway. If you’re still in doubt, realise that by far the majority of popular sites don’t use frames.

;<B>Using tables for layout</B>: This is often advocated by dated tutorials as the way to go. This is because using tables for layout works really well in very old browsers like Netscape 4 or MSIE 3. However if you do use this method, you sacrifice accessibility in current browsers which require a consistent document flow, like text-mode browsers or (more importantly) screen readers for the visually impaired.

;<B>Using font tags</B>: Font tags are deprecated. The problem with font tags is that they apply local font changes, so in order to modify the style of the page you have to go through and change them all. You should be using CSS Stylesheets. Style sheets are useful for you for a range of reasons, such as allowing you to change the look of the whole site easily, or to use a printer-friendly stylesheet for printing. They are also more powerful than font tags, and in most cases will reduce the size of your pages, especially if you link an external stylesheet with <LINK>.

;<B>Specifying odd fonts</B>: Use the platform-independent fonts serif, sans-serif and monospace. Anything else is bound to look naff on some platform or another. For example, Helvetica is apparently nice on a Mac, but is an ugly bitmap font under XFree86. font-family allows you to specify a list in order of preference, but this is probably a bad idea because you don’t really know what you’re getting.

;<B>Annoying visuals</B>: <MARQUEE> and <BLINK> and animated GIF images really annoy people. In time, animated MNG images will really annoy people too, but at the moment practically nobody can see them

;<B>Reset buttons on forms</B>: How many people fill out a form, get to the end, and then think “Actually, I’ve entered everything completely wrong and I simply must start again.” Even if the situation does arise, they can go back and correct it without a reset button. There are situations in which a reset button is applicable (ie. when the form is pre-filled), but by putting it there otherwise you create the possibility that someone in a hurry might accidentally click it (I’ve done this a couple of times). It’s might be better to provide a “Cancel” link/button instead, with the HREF javascript:history.go(-1) (same as clicking Back in the browser).

;<B>Not setting the background colour</B>: The default background colour in a web browser is not white – it’s the user’s choice (or the user agent’s failing that). If you use any kind of graphic which blends onto a white background you must specify the page background to be white. Then, if you imagine a user who has set up his browser to default to white on black, your page would be illegible. So you must set all the colours. Note that in XHTML you specify the background-color CSS attribute on the <html> element, not the <body> element. The W3 recommends the following rule: <B>if you set a colour for anything on the page, you must set a colour for everything</B>. If you are a web developer, you could try rotating all your default user-agent colours to something a bit unusual (but still useable) as then you’ll show up any page which violates this rule. But the halfway house that I prefer is just to set my default background to a light grey (which used to be a common default before IE4 came along); this reminds me to specify the colours.

Personally, I’m also of the opinion that those W3C HTML/CSS Validator buttons are a great way to make a site look cheap. YMMV. You are allowed to create a page which validates, and not put those buttons on there.

— Whilst there is, of course, no obligation to put W3C buttons on pages that validate, doing so raises the profile of the open standards developed by the W3C. Open standards are key to the success of the internet, computing in general and play a huge part in the development of FLOSS. Using W3C buttons on your site shows that you have taken time and effort to ensure your website is accessible by all, not just users of a specific browser. IMHO. TonyWhitmore

— You don’t have to use the W3C’s buttons either, there are lots of very trendy sites that use their own stylised versions. Supporting standards is a good idea, it’s just a shame that most big companies and design agencies don’t… AdamTrickett

IE Bugs and Workarounds

Something like 85-90% of people use Microsoft Internet Explorer, which is a shame because it’s dire. Some gigantic bugs have been lingering in the thing since version 4, and look in no danger of being fixed any time soon. If you know people using it, point them at Mozilla {Phoenix,Fire{Bird,Fox},Browser}.

PHP detection for IE looks something like

 $h=getallheaders();  $IE=(strstr($h['User-Agent'], 'MSIE') !== false);

Apache mod_rewrite directives for redirecting IE looks like

 !RewriteCond %{HTTP_USER_AGENT} .*MSIE.*  !RewriteRule ^(.*).(css|png)$ $1_ie.$2

Alpha-channel PNGs

IE likes to composite PNG images with alpha channels before it draws them. So your nice PNG images will not alpha blend nicely with what’s underneath them. ;What not to do: Bend to the will of the IE users. ;Solution: dither to an indexed palette with a transparent colour, or composite with the background if possible. Haven’t found a way to dither alpha with ImageMagick. In The Gimp it’s Image >> Mode >> Indexed… and try playing with “Enable Dithering of Transparency” for produce best results. Compositing the PNG with the background can be done as a simple screen-grab from a real browser. ;How to do it: Use PHP or an Apache RewriteRule & RewriteCond to redirect browsers with MSIE in their User-Agent string to an indexed single-colour transparency PNG, or the PNG as composited with the background. I’d advise against using a composited PNG in real browsers unless you have to: it will help keep the site maintainable in the future.

CSS positioning properties

The CSS specification gives the algorithm to be used for block width and positioning. But IE doesn’t use it. You can’t center a block-level element in normal flow by setting margin-left and margin-right to auto and setting width, and you can’t adjust a block’s width by setting width to auto and setting left and right. That is to say it has a half-arsed CSS2 implementation.

;What not to do: Bend to the will of the IE users. ;Solution: Provide different stylesheets for IE and real browsers. ;How to do it: Use PHP or an Apache RewriteRule & RewriteCond to redirect browsers with MSIE in their User-Agent string to a different stylesheet. To specify the margin box of an element to be the full width of the containing block, use width: 100% which due to other bugs in IE, does what you want. Be sure to put shared properties in a common stylesheet for ease of access.

Update: make sure IE is in standards-compliant mode to avoid the worst of these bugs. Check IE’s standards mode with the JavaScript property document.compatMode. eg. type

 javascript:alert(document.compatMode);

into the address bar. ‘BackCompat‘ is Quirks Mode, ‘CSS1Compat’ is standards mode.

Specific MSIE CSS Issues

• Absolute positioning relative to a relatively-positioned container: IE doesn’t use the container’s width and height for right: and bottom: positions or percentages from left: or top:, but uses the page body dimensions instead. Workaround: setting width: 100%; height: 100% on the container corrects the bug.

• Absolutely positioned content overflowing an empty, relatively-positioned container: IE doesn’t display scrollbars if the absolutely positioned content is the only thing flowing off-screen. Workaround: setting height: 1% on the relative container corrects the bug.

• No support for min-width or min-height: IE doesn’t support these properties. Workaround: min-width can be faked by adding an in-flow empty div of the appropriate width, to hold the box out to this width. min-height can be faked by adding a floating empty div of zero width and using clear: both on an empty div at the bottom of the box.

• No support for max-width or max-height: IE doesn’t support these properties and I don’t know of a CSS/HTML workaround.

• IE stretches the containing box when content overflows: When content overflows a box, the correct default behaviour is to draw the overflowing content outside the box. IE instead enlarges the box to fit the content. Workaround: it is possible to absolutely position a div over the box which will contain the content. Of course, this doesn’t work if the box was relying on the content dimensions to determine its own dimensions.

Single-stylesheet workarounds

If you don’t want to develop everything with an IE stylesheet and a real browser stylesheet, there is some really useful work going on to use pure CSS methods to combat IE’s bugginess. I’ve had a couple of sites recently break due to the “Unscrollable Content” bug. A bit of Googling turned up this page:

http://www.positioniseverything.net/explorer.html

which (in a rather ironic fashion) uses IE’s own bugs to correct it’s broken behaviour.

For example the following stylesheet selector matches divs in IE 5 and IE 6 for Windows only (it’s doesn’t match anything in real browsers):

 * html div { ... }

while

 * html div { width: 130px }

applies the width property to IE 6 only (IE 5 and IE5.5 fail to correctly escape the property).

The workaround to my unscrollable content is to set height: 1% on the containing relatively positioned div, which, for no apparent reason, means that the bug fails to manifest (See the above link for details).

The IE7 workaround stylesheet

Dean Edwards has written a (server-side) solution to the problems of Internet Explorer’s poor CSS support. You need to ensure that your web pages use his stylesheet as the first stylesheet, which sets up assorted code to override IE’s behaviour with the correct behaviour.

IE7 is available at http://dean.edwards.name/IE7/

:Advantages: It (reportedly) works, and you don’t have to worry about limiting yourself to what works for IE when designing your web pages. :Disadvantages: It perpetuates the myth that IE is an acceptable browser to be using, and doesn’t create any pressure for people to use more standards-compliant browsers.