News Articles from the Web Design World
Appril 15, 2007
Adding a touch of style
This is a short guide to styling your Web pages. It will show you how to use W3C's Cascading Style Sheets language (CSS) as well as alternatives using HTML itself. The route will steer you clear of most of the problems caused by differences between different brands and versions of browsers.
For style sheets to work, it is important that your markup be free of errors. A convenient way to automatically fix markup errors is to use the HTML Tidy utility. This also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits.
The following will teach you how to:
use the style element
link to separate style sheets
set page margins
set left and right and first-line indents
set the amount of whitespace above and below
set the font type, style and size
add borders and backgrounds
set colors with named or numeric values
add style for browsers that don't understand CSS
Getting started
Let's start with setting the color of the text and the background. You can do this by using the STYLE element to set style properties for the document's tags:
<style type="text/css">
body { color: black; background: white; }
</style>
The style element is placed within the document head. Here is a template HTML file showing where the above style element fits. You can copy and paste this into your editor as a convenient way to experiment with CSS style sheets: More
September 30, 2006
12 Lessons for Those Afraid of CSS and Standards
When I first encountered Cascading Style Sheets in the autumn of 1998, I was trying to do cool stuff—make this stuff over here move, make that stuff over there change color—and it took another six months before I started using CSS to control presentation rather than behavior.
It took me two years to break out of the comfortable prison of layout tables, and another two years before I could use CSS to produce layouts that were originally intended for tables.
Even though I was forced during that time to deal with such anachronistic works of art as Netscape 4.0 and Internet Explorer 5.0 for Windows, the moral of the story should be clear: it took me a long while to achieve genuine mastery of CSS.
There are plenty of excellent books and articles out there, including many written by the contributors to this publication. While most of those works gracefully walk the inexperienced developer through challenging layouts and teach by literal example, few of them acknowledge that using CSS to create standards-friendly sites requires a mindset that is alien to many experienced developers. This requirement hamstrings a lot of talented people, and for two years I’ve been looking for the words that will heal their pain.
The cries of frustration I hear from other developers about CSS are only an echo of the ones I made for years. As a result I like to think that I can relate, and I’m writing to convey the most important lessons I’ve learned so far. More
August 22, 2006
Creating a Style-Guide for your site
One thing you'll realize after you do alot of front-end work is that after you don't work with the CSS and HTML for a few days, you'll forget the classes that you defined and end up writing alot of similar CSS styles.
Kevo was one of those projects. Well, it was alittle different since we didn't even know what the site was going to look like until after a month of programming, then I slapped together some designed and implemented them quickly. Another two weeks later , and a few more features down the road, we realized thing needed to change again and I re-designed the site yet again. More on WEB design
August 10, 2006
Does Your Web Site Use Bad Web Design Techniques?
Learn from the mistakes of FedEx, Brown University, The Pope, Microsoft, Qualcomm, Adobe, Apple, Harvard Business Review, Tom Peters, Saturn Auto, Memorex, Minolta, Saab, Intel, Chevrolet, Swatch, Canon, and thousands of other sites featured here for using bad web design techniques.
Fast Company magazine calls WPTS the "Best for Improving Your Site's Look and Feel."
"One of the best ways to learn is by example. Here's a site, produced by a pair of graphic-designer professionals, that shows you what not to do." More on WEB design
July 28, 2006
Here's my breakdown of the ideal web design process.
I know a lot of people are going to read this and shout "That's not the best way to go about designing web sites!!"
All I can say is: this is the essence of the process that works best for me.
I offer it in the hope that maybe bits of it will work for you too.
I've been creating web sites for 10 years, and I've got much more successful at it over that time. And I've come into contact with lots of very clever and complex software development processes, many of which don't produce very good results. More on WEB design
July 23, 2006
Web design with CSS
Raw CSS examples
Sorry but I haven't had time to put this site up properly yet. However if you are interested in CSS (Cascading Style Sheets) then you may find the demos below useful.
You can still visit the tutorials but be aware they are not meant to be aesthetically pleasing but are for information only. I will be updating the content shortly as it is starting to look out dated.
The three column Demos are still available for viewing and are still valid today even though they were done 15 months ago. These are advanced techniques and require a resonable understanding of CSS. Again, they are not meant to be pretty and I have spent no time beautifying them (as you can tell). More on WEB design
July 20, 2006
The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Pixelsurgeon’s Jason Arber has put together 20 top tips and tricks you should be using to give your work that all-important professional edge
1. Planning
When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air. More on WEB design
July 17, 2006
Web site design definitions
A website is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of web pages that in turn make up a website. A web page consists of information for which the website is developed. More on WEB design
July 15, 2006
Web design and CSS
#02 CSS and XHTML
HTML 4.01 is the final HTML version. Future work by the W3C is being done on XHTML, which is based on XML. XML is a universal markup language that can be used to define specific markup, such as XHTML, or DocBook. XML markup is well-defined by a schema.
XHTML redefines HTML in terms of XML, whileas HTML was based on the older SGML. XML itself is a reformulation of SGML. Complex fun, huh? XHTML is not a new markup language, but builds on HTML. Moving from valid HTML to XHTML is quite simple.
More on CSS and WEB design
July 13, 2006
The Layers of Design: the style layer
Designing for the Web, as I see it, is a multi-layered process. It’s a process in which each layer addresses specific design needs related to client aims, brand characteristics and site user habits and expectations. Sadly, the last of these layers to be applied in the process, the application of style, is an oft-maligned element of design. Style for its own sake or by itself is not design, certainly, but stylistic concerns are important to successful design. more...
July 11th, 2006
It’s the alpha and omega, the beginning and the end of every document. But yet, it happens to be one of the most ignored tags out there. Why? Well, simply put, nobody really thinks of it. I believe the first time I ever saw a CSS declaration applied to an <html> tag was when I saw Shaun Inman’s source code, and all it did was add a margin to the bottom of the document so a scroll bar would show up no matter how long the page was. I’ve searched through a lot of CSS, mostly to get examples of how people organize their rules as well as split them up. One thing I’ve always seen, is the following. more...
July 07, 2006
8 Web Design Clichés of 2006
With the advent of Web2.0, AJAX, and other new exciting technologies such as Ruby on Rails and RSS, we're seeing impressive developments in the technical backdrop to the web. One thing that has persisted throught the life of the hypertext-enabled web however, is the design cliché - trends or 'memes' that catch on amongst a large percentage of web users. We've seen dancing hamsters, Animated GIFs, the <blink> tag and Netscape Navigator all come and go - but what about the more recent web design trends? more... »
July 04, 2006
16 Elements You Must Include in Your Site Design:
When I first started out doing web design work I only focused on the design. I did not think ahead how to prepare the site for promotion until I had finished the actual design.
I think a lot of web designers still think and act this way...they build the site first then think about the marketing aspect later.
This is a big mistake!
A web designer should build elements within the design making it easier to attract search engine traffic.
1. Create search engine friendly pages
Each web page should contain your targeted keyword phrases. Your search engine rankings will increase in proportion to the number of content pages. Other factors that contribute to search engine friendly pages are included below.
2. Include a site map
Creating a sitemap allows search engine spiders to index your whole website from one page. Make sure your site map page links to all your internal pages and update it whenever you add a new page. more... »
Past articles
June 02a 02b 06a 07a 11a 14a 19a