by 49 people |
Building Web Pages the Right Way
When I began designing websites, my biggest concern was the finished product. I didn't care that the code was bloated as long as my site looked good in IE and Netscape. Tables, pixel shims, font tags -- nothing was off limits. Then I discovered XHTML and CSS. By embracing web standards, my productivity went way up and my clients' sites are now accessible by all.
Designers can no longer afford to simply design sites. We have to offer more to our clients or become obsolete. I hope this lens will educate readers about web standards, design techniques, SEO, web marketing and every other topic that is vital to embrace and understand.
Don't Code in HTML!
Read this before you open NotePad
It's important that you use XHTML to write "well-formed" documents that will work in all browsers. Below are some simple rules to follow to make sure your code is accessible by all.
- Write your code in lowercase. Uppercase tags will not validate.
- Close all tags. This includes non-empty elements (<p>, <strong>, etc.) and empty elements (<img />, <br />, etc.). Notice the empty elements are closed by adding " />" to the end of the element.
- Properly nest your elements. Instead of writing sloppy code, take the time to close your elements in reverse order.
- Validate your code: validator.w3.org
It's fast and easy. - Check your work in more than one browser. Most designers gave up on IE a long time ago, but close to 90% of the web-surfing public didn't. Don't ignore the browser you despise.
Amazon XHTML Titles
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
Avg. Customer Rating: 
Amazon Price: $29.91 (as of 12/03/2009) 
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Avg. Customer Rating: 
Amazon Price: (as of 12/03/2009)
XHTML Black Book: A Complete Guide to Mastering XHTML
Avg. Customer Rating: 
Amazon Price: (as of 12/03/2009)
Dump font face
Separate content from display using CSS
Allow your site's visitors to experience pages that load quickly the way you intended. Follow these simple rules to get started with style sheets.
- Never use a font tag again. All fonts (and colors, backgrounds, borders, padding, etc.) should be defined in an external style sheet. This allows you to make changes to the appearance of your entire site by editing one document.
- Forget using tables as a layout device. Tables are great for displaying tabular data, but they are woefully inadequate as a design tool. How many times have we all gotten lost in a never-ending maze of nested tables? Using divs and CSS positioning, designers have learned to blow the doors off old design limitations.
- Just as we did with our XHTML, we need to validate our CSS: jigsaw.w3.org/css-validator/
CSS Texts
The Zen of CSS Design: Visual Enlightenment for the Web
Avg. Customer Rating:
Amazon Price: $29.69 (as of 12/03/2009)
Design Software
Can you imagine working without these titles?
Dreamweaver and Photoshop are a necessity for me. The latter was always an obvious choice, but I can't say the same for the former. I used to code all my sites using Notepad. Every link, every tag, every table cell was done from scratch -- it was my badge of honor. Then I got smart and bought Dreamweaver. My productivity went way up. You'll definitely make back the money you spend.
There will be sticker shock when you buy the suites, but you will get what you pay for. Buying just two of the products included in either of the suites will cost you more than if you went all in. For those wanting an all-in-one purchase, the Adobe/Macromedia Web Bundle is a designer's dream.
There will be sticker shock when you buy the suites, but you will get what you pay for. Buying just two of the products included in either of the suites will cost you more than if you went all in. For those wanting an all-in-one purchase, the Adobe/Macromedia Web Bundle is a designer's dream.
Adobe Creative Suite 4 Design Premium
Avg. Customer Rating: 
Amazon Price: $1,679.49 (as of 12/03/2009)
Adobe Creative Suite 4 Design Premium Upgrade
Avg. Customer Rating: 
Amazon Price: $574.99 (as of 12/03/2009)
Adobe Creative Suite 4 Master Collection
Avg. Customer Rating: 
Amazon Price: $2,216.49 (as of 12/03/2009)
meyerweb.com
CSS guru
Fetching RSS feed... please stand byMeyer's CSS Texts
No frills, just solutions
Eric Meyer on CSS: Mastering the Language of Web Design
Avg. Customer Rating:
Amazon Price: (as of 12/03/2009)
More Eric Meyer on CSS (Voices That Matter)
Avg. Customer Rating:
Amazon Price: $35.04 (as of 12/03/2009)
CSS Pocket Reference (Pocket Reference (O'Reilly))
Avg. Customer Rating:
Amazon Price: $9.95 (as of 12/03/2009)
Choosing Colors
Looking for inspiration
I'm often asked by young designers how I choose colors. My response is usually "the client" (why do they always pick blue?). But selecting a palette can be a daunting task. It was actually easier when we were limited to 216 web-safe colors, but the results were often common and uninspired.
Now we have millions of colors from which to choose. With so many options, how do we come up with workable palettes? Setting aside the many online sources for a minute, inspiration can come from our everyday lives. Nature is a great place to start: trees in autumn can provide us with a warm color set; rose gardens offer brilliant reds, yellows and greens; sunsets have a variety of colors that change moment to moment. Paintings, prints and photographs should also stimulate your brain. Finally, inspiration can also come from the mundane; we simply need to open our eyes to see it.
As mentioned above, there are some great online resources to aid in your search for colors. Sites like ColorBlender and ColorSchemer Online allow you to manipulate hex values by moving RBG sliders or inputting values into appropriate fields. ColorSchemer also provides palettes supplied by readers and more advanced color selection tools available for download.
Finally, other websites can provide inspiration. Using the Firefox Colorzilla extension, we can find exact color values without taking a screen capture and opening Photoshop. Use these other sites as a source of inspiration, but don't copy another designer's work. At least change the hex values a little bit!
Now we have millions of colors from which to choose. With so many options, how do we come up with workable palettes? Setting aside the many online sources for a minute, inspiration can come from our everyday lives. Nature is a great place to start: trees in autumn can provide us with a warm color set; rose gardens offer brilliant reds, yellows and greens; sunsets have a variety of colors that change moment to moment. Paintings, prints and photographs should also stimulate your brain. Finally, inspiration can also come from the mundane; we simply need to open our eyes to see it.
As mentioned above, there are some great online resources to aid in your search for colors. Sites like ColorBlender and ColorSchemer Online allow you to manipulate hex values by moving RBG sliders or inputting values into appropriate fields. ColorSchemer also provides palettes supplied by readers and more advanced color selection tools available for download.
Finally, other websites can provide inspiration. Using the Firefox Colorzilla extension, we can find exact color values without taking a screen capture and opening Photoshop. Use these other sites as a source of inspiration, but don't copy another designer's work. At least change the hex values a little bit!
Amazon's Books on Color
Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media
Avg. Customer Rating:
Amazon Price: $16.31 (as of 12/03/2009)
Web Color Expert: All That You Need to Create Fantastic Web Color (Web Expert)
Avg. Customer Rating:
Amazon Price: (as of 12/03/2009)
Color Harmony for the Web: A Guide for Creating Great Color Schemes On-Line
Avg. Customer Rating:
Amazon Price: (as of 12/03/2009)
Color Logic for Web Site Design (Color Voodoo #5)
Avg. Customer Rating: 
Amazon Price: $36.99 (as of 12/03/2009)
mezzoblue.com
Zen Garden creator Dave Shea
Fetching RSS feed... please stand byLinks
Just some of many I frequent
- CSS Zen Garden
- A demonstration of what can be accomplished visually through CSS-based design.
- Eric Meyer
- CSS guru.
- Jeffrey Zeldman
- Author of Designing with Web Standards and founder of A List Apart (see below).
- A List Apart
- A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
- mezzoblue.com
- Home to Dave Shea, creator of the CSS Zen Garden.
- lynda.com
- I\'ve learned a lot from Lynda\'s books on html design and Photoshop. Her online library is a great tool for designers and developers alike.
- World Wide Web Consortium
- The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
- W3 Schools
- Fantastic (and free) online resource covering a wide range of web-related topics.
Zeldman's Headlines
Fetching RSS feed... please stand byZeldman's Books
Taking Your Talent to the Web: A Guide for the Transitioning Designer
Avg. Customer Rating:
Amazon Price: (as of 12/03/2009)
New YouTube vids
No videos were selected.curated content from YouTube
CSS Tweets
-
- andiramdani
- RT @imoracle: 50 Fresh CSS Techniques, Tutorials and Resources - Noupe http://bit.ly/6BDbug (via @creattica) #css @paviles
-
- instantexpert
- http://bit.ly/1mXPxu PHP, MySql, CSS by pecoart http://bit.ly/8a2ACr
-
- chongliu223
- http://bit.ly/XjLcV CSS specialist by jack51 http://bit.ly/7lQtzf
-
- curiouslt
- Nice, I need to do this - > RT @briancray: RT @kellyshipp Use CSS to build a map with hoverable regions - http://tinyurl.com/n6f35a
-
- chadmoran
- #lesscss for #dotnet (http://www.dotlesscss.com) add mixins, variables and nested rules to your CSS.
-
- imoracle
- 50 Fresh CSS Techniques, Tutorials and Resources - Noupe http://bit.ly/6BDbug (via @creattica) #css @paviles
-
- _rafas
- CSS .. há anos não ouço Q
-
- chimpydesign
- CSS Variables with PHP http://tinyurl.com/yzhc93w #css
-
- webdesignedu
- CSS Variables with PHP: When people are asked about features they would like to CSS, “variables” always s... http://bit.ly/5JsCHe #CSS
-
- prosam
- RT @chriscoyier: When people are asked about features they would like to CSS, “variables” always seems to come ... http://bit.ly/7ofhXv
automatically generated by Twitter
Have Anything to Add?
submit
-
Reply
- joshuabrown joshuabrown Oct 14, 2009 @ 4:45 pm | in reply to goldenecho
- The line break tag closes immediately -- <br />
Tags that don't wrap other content simply need a forward slash before the close bracket.
-
Reply
- RealNerd RealNerd Nov 12, 2009 @ 2:23 pm
- Great example, thanks!
-
Reply
- goldenecho goldenecho Oct 9, 2009 @ 4:08 pm
- I don't understand the whole closing a BR tag. Where does it close? Immediately? After the content? HUH? It was so simple when no closing tag was required, and I really wish THAT was the standard because it would make so much more sense. But alas, I don't make the rules.
-
Reply
- Marc_Sandford Marc_Sandford Apr 20, 2009 @ 11:47 am
- Very useful. I just book marked your lens. This is exactly the sort of info I need. I'm slowly picking up CSS, mostly for changing the look of my wordpress blogs. Many wordpress themes aren't very flexible, so it helps to know how to code.
by joshuabrown
I am a web designer and musician living in the Dallas area. Originally from northern Virginia, I've also lived in El Paso, Texas. (more)
Explore related pages
Web Development Tutorials- Hello there :) This lens is meant to be a medium to help you learn to make your...
iStylr - WYSIWYG Web design 2.0- Stay updated about the first online one stop design shop, iStylr - the online WY...
Beginner's Guide to Web Design using CSS- Welcome to Beginner's guide to web design using CSS! Here I will put a number of...
Adobe Products For You- Adobe Systems Incorporated (pronounced a-DOE-bee) is an American computer softwa...
Web Standards: Best Practices Web Development- The craft of building web sites that are functional, beautiful, usable and acces...
