Web Development
The content (text, images, Flash movies, etc.) is the most important element in web design and it determines
the layout, the number of pages, and the download time.
A website should have a good appearance and functionality on all browsers.
This is not easy to achieve, there are differences in how
various browsers interpret style sheets and client-side scripts,
in the default size of the browser window or the screen resolution.
Web standards are a wide collection of rules and concepts, continuously
discussed and improved by the web community,
concerning optimal use of XHTML/HTML and style sheets specifications,
and other tools like JavaScript and CGI scripts, Flash, etc.
for efficient and accessible websites.
The main rule is to write valid XHTML/HTML and CSS code following the
W3C recommendations.
A correctly and well designed website is also search engine friendly
and can get good results for search engine queries.
Page structure
It is important to have a well structured document, where the HTML elements reflect the content.
Correctly nested header elements (h2 after h1,
h3 after h2 etc.) should indicate the content structure and
should not be used for formatting text,
navigation blocks should be implemented by lists,
tables should be used for presentation of meaningful correlated data and not for
page layout.
Page layout/visual rendering
The concepts for good web design lead to better content
accessibility, i.e. using tables only to present data (not for layout), and
separating style information
for page layout or formatting from the HTML code to style sheets.
Many attributes of HTML elements that specify layout or formatting
(like the background, text, link, vlink, alink attributes of the body element,
the bgcolor, align, width, height attributes of many HTML elements,
the center, font, basefont elements)
are deprecated in the
HTML 4.01 Specification,
that recommends the use of style sheets instead.
It is better if the font-size
is not set in absolute length units,
so that the user can change the font size if necessary (by using the browser's 'Text Size' feature, or personalized
stylesheets etc.).
Media-specific styles
Style sheets can be used to present
a page differently to different media (computer screen, printer,
Braille device, speech synthesizer, etc.)
by using the @media or @import rules, or the media attribute of the style element.
When printing background images should be left out, links text does not have to be
underlined, browsers like Mozilla have problems printing large float elements, etc.
There are some excellent articles by Eric Meyer
about alternate-media stylesheets, like
Going to Print
and Print Different.
Web security
There are complex web security issues, but a simple question is how to defend a site from bad robots searching the web for server-side scripts that send e-mail, add links to a page, implement blogs and message boards, not to mention online money transactions or e-commerce. There are sophisticated ways to deal with that, but to protect simple scripts there are relatively simple things like checking the domain of the web page from where the script is accessed, logging the IP address of the computer accessing it, restricting access to scripts, limiting the size of information transferred via online forms, controlling file upload via online forms, etc. Sometimes online forms have an extra field to be filled-in with a given string of alpha-numeric characters, to stop access to spam robots.
Cookies
Many websites send cookies (very small text files) to a visitor's computer hard drive to record various information, usually harmless and sometimes necessary in implementing a consistent and secure flow of online data transfer, but that nevertheless can raise privacy concerns. AboutCookies.org is a website that gives information on cookies and on UK guidelines and laws regarding cookies.
Favicons
Favicons (short for 'favorite icon') are a detail in website design, but I think an important one.
They appear on some browsers in the top URL bar and also, if the site is bookmarked,
in the bookmarks window, together with the site's URL.
A favicon is an image file named favicon.ico, located at the
website's root directory,
usually 16x16 pixels, in a special format that adapts to the browser.
There are websites with online free favicon generators,
like www.favicon.co.uk.
There is a very good favicon presentation at
en.wikipedia.org.
External links
- www.w3.org/TR/
- W3C Technical Reports and Publications
- www.w3.org/MarkUp/
- W3C HTML Home Page
- www.w3.org/QA/Tips/
- W3C Quality Tips for Webmasters
- www.w3.org/2001/tag/doc/contentPresentation-26.html
- W3C Separation of semantic and presentational markup
- validator.w3.org/checklink
- W3C Link Checker
- www.google.com/webmasters/guidelines.html
- Google Webmaster Guidelines
- buzzword.org.uk/colours
- colour calculator by Toby Inkster
- www.webstandards.org/
- The Web Standards Project
- www.w3.org/Security/Faq/
- Web Security FAQs
- www.arcray.net/resources/
- Arcray Webmedia - Internet Related Articles