All posts tagged Design

I’ve come up with a step by step process which has made me a much more efficient web designer.  It’s all about working smarter not harder!

As a freelance web designer, I’ve picked up some good and bad habits along the way. Let’s skip over the bad habits today and focus on one of my better habits which is how I work step by step through the process of creating a website ensuring that I don’t miss anything critical.

I’m going to share the process I use. I realize it may vary from other freelancers and that is fine, but if you are starting out, I hope you will learn some time saving tips to creating a project from start to finish without missing anything important. I’d also love to hear what your design process is like so please leave a comment.

We’ll assume that you’ve worked hard with the client and the mockup is finished and you are ready to begin the coding process.

First Step – Create an XHTML page and CSS file

You will need to setup your index.html page with an appropriate doc type. Also you will need to include a css file. At this time I enter css code that I always need in every project such as a clearing div. If I plan to use .png files, I will also add an .htc file and any additional files needed to view .png files in the older browsers.

Step 2 – Code the main areas

The main areas include, wrapper, header, navigation, content area and footer.  I work in order of back to front and top to bottom. I begin by designing the background of the page using css. That’s the back of the site. Depending on the design, I will either code up a wrapper div that will sit centered and contain the rest of the html code or I will code the header (top).

The header is created and I place all my elements in the header before moving on to another main element. At this time I might include a logo, a tagline, some navigation, contact info or images. Once the header is fully created, I move onto the next step which is the navigation. (moving down)

If the navigation is under the header, I will create it in full. If the navigation falls into a side bar I will first create a main wrapper which includes all the columns needed in this design and place the nav into one of them.

Next is the content area or text area.  If you created the columns in the last step above, you might be able to skip this section.  I will often set all the padding and margins for all the columns and enter the text and images for the home page.

Working further down the page, I will next create the footer. At this time you should be able to see all of your design with all the decorative elements all neatly in their places.

What’s next?

Step 3 – Validating

At this time, I upload my XHTML page and css to the server and I validate the code using the WC3 Markup Validation Service. This step is crucial and in my opinion and this is when I make sure everything I’ve created thus far is coded without any errors.  Why do I do it now?  Because it makes debugging the site in all the browsers so much easier.  Which leads us to the next step…

Step 4 – Browser Testing

Can I add a little commentary?  I never like this part because of IE6. Although I’ve become a pretty darn good IE6 debugger, it still brings on anxiety! Anxiety or not, it has to be done!   My list of test browsers includes Firefox, Internet Explorer 6 and newer, Opera, Safari and finally Chrome.  One of the best tools for this job is IETester. A couple of tools available for testing in Safari include BrowsrCamp, which is the one I use most often and Browser Shots.

(*sidenote: some web designers do not test in IE6.  If you are designing for a tech savvy target market you may not need to be concerned about IE6.  However if the target market of this project is an average user, consumer or a corporate user, you should test in IE6.)

In this step you may be forced to include a separate css file for IE6 and IE7.

Step 5 – Title, Descriptions, Meta tags

Now that the homepage is done, and tested to be valid and cross browser beautiful, I work on the title of the homepage, the meta description and the meta keywords (just in case the seo gurus are wrong).  I find if I do it now, as I create the other pages of this project, only minor tweaking to these three elements is needed.  This saves me time in the long run.

If your internal pages of a website are different than the homepage styling, simply start this process again.  After this you can simply create new pages off of either the homepage or the internal page by using the “save as” feature.  Don’t forget to adjust the titles, meta description on these new pages so they coincide with the the content of the page.

It’s also good practice to run each page through the WC3 Markup Validation Service prior to completing this project.  Fix any errors that may have occurred from adding text, images and other unique design elements.

Step 6 – Check the speed

Once the site is published I use an add-on to Firebug called Y-Slow to check the site’s download speed.  I work my way down the list of warnings until my site is optimized and images smushed.

Spring 2010 Color Palette

Start with one of these colors and visit one of our 25 Color Palette Generating Resources to select colors for your next design.

First up….

Turquoise

Turquoise is one of those great all-around colors that suit both men and women.  Not too blue and not too green it’s complementary to so many colors such as orange, gray, and blue.  This example shows how dramatic turquoise can be with black.

Tomato Puree

Tomato Puree is a red that leans in the direction of blue on the color wheel.  It’s a cool red that adds drama without being hard on the eyes.  Adding this color to black, white and gray as seen in the example gives the design a little wake up call.  This color would be great as the primary color in a design as well.  Pair it up with Aurora for some major WOW.  Loving Eucalyptus but not sure what to pair it with?  Try Tomato Puree!

Fusion Coral

Honestly I didn’t think I’d be able to find a website that had Fusion Coral in it.  Call me cynical or call me impatient but I didn’t think anyone would ever choose this color for their website.  BUT…. I was wrong!  This website uses only just a bit of it but I really like how it adds some extra flair to this other wise brown neutral palette.  I think this color would be excellent for a latin-inspired designs as well as for sites geared towards women and babies.

Violet

This color takes big ..um…you know what’s to pull off!  Take a look at that inspiration site and tell me you don’t love it! That color makes purple hip and trendy!  Have a cutting edge service or product to offer and want to do something unique so you get noticed.  Pick Violet!  Mix it with black and gray like this site did or add some yellow and soft blue and you will get noticed!

Tuscanny

Tuscany is another great neutral and a nice backdrop for any design.  A combination of brown and gray, this soft color is easy on the eyes.  This could be used with different color palettes which include colors such as black, burnt orange, burgundy and chocolate brown.  This color will offset all the really rich deep yummy colors.

Aurora

Aurora is a soft yellow that isn’t overpowering.  I love this example because it’s used with a wide variety of colors.  Aurora looks really nice with the red of the rooster and also surprisingly with the gray weathered wood.  This color is just like a ray of sunshine… warm and pleasing.

Amparo Blue

Blue lovers keep this color in mind.  This is the perfect blue because it’s not too “toddler primary blue” and not too pale.  Want to generate a feeling of excitement and well-being, this color would do it.  Mix it with anything from red, yellow, black, orange to soft shades like Pink Champagne.  This blue is smooth!

Pink Champagne

Pink Champagne or this soft flesh tone would go with so many colors. As in this inspiration website, it really looks nice with deep mauve, dark brown and copper.  Try it with forest green or navy blue also.  This color is so pale, I think it needs some richness in order to be noticed.  Personally I’m not feelin’ it!  Are you?

Dried Herb

Dried Herb is an earthy green with a lot of gray in it.  I can see this color being used in a couple of different ways.  First it would be an accent color like the example above.  I think it needs some vibrant colors mixed with it so that the design doesn’t end up being drab.  I’d suggest colors like yellow, bright greens, orange and white.  If you wanted a very earthy look, pair Dried Herb with colors such as soft browns, stone or Eucalyptus.

Eucalyptus

Eucalyptus is a neutral option.  Instead of selecting gray or beige, try this color as your backdrop.  It’s subtle hue is perfect for a design that will appeal to both men and women.  I can’t even think of one color that wouldn’t go with Eucalyptus.  This is a safe choice.

Is This Article For You?

This article is aimed primarily at newcomers to accessibility. We’ll be discussing some of the basics and best practices, a few tools to help out, and then some recommended reading. To avoid frightening you off, I’m not including too much information at first so that we can take a more in-depth approach with future articles.

Here’s the first tip, and in my opinion, it’s one of the most important to remember: don’t let yourself get overwhelmed. There are lots of acronyms, abbreviations, and other terminology that will no doubt sound foreign to you if you’re just getting started. Some accessibility gurus might have scared you a little bit, making the idea of fixing your site pretty daunting with their “all or none” recommendations. I’m here to tell you that some is better than none, and you’ll learn a lot in the process if you at least make the initial effort.

Best Practices

Start With Valid, Semantic Code

The best way to get started is to cover the basics. First, make sure that you’re using valid, semantic code on your site. Take a look at the differences between these two code excerpts, from what should be the same site. The first example is from a real, live site, but I’ve obscured the URL and identity of the site owner. The second example is how the code should be marked up.

Code Excerpt 1 (Confusing and poorly marked up):

<img border=&quot;0&quot; src=&quot;http://www.johndoecongress.com/index.60.jpg&quot; width=&quot;548&quot; height=&quot;153&quot;> <br>
<font face=&quot;Impact&quot; color=&quot;#00FFFF&quot;><span style=&quot;background-color: #000000&quot;>4TH XY DISTRICT:</span></font><font color=&quot;#FFFF00&quot;><b></b><font face=&quot;Impact&quot;>
<span style=&quot;background-color: #000000&quot;>Dallas, Baltimore, Topeka, Sacramento, Chapel Hill, Seattle, ETC.</span></font></font>

<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;1&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-11.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.71.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>
<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;0&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-5.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.55.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>
<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;1&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-2.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.51.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>

Code Excerpt 2 (Clear, valid, and semantic):

<div id=&quot;header&quot;>
<h1>John Doe for US Congress 2010</h1>
<p>4th XY District</p>
<p>Dallas, Baltimore, Topeka, Sacramento, Chapel Hill, Seattle</p>
</div>

<ul id=&quot;mainNavigation&quot;>
<li><a href=&quot;/recent.html&quot;>Recent Events</a></li>
<li><a href=&quot;/give.html&quot;>Donate or Volunteer</a></li>
<li><a href=&quot;/plans.html&quot;>Economic Plan</a></li>
</ul>

Even to someone who doesn’t understand what the tags mean, the second snippet of code is easily readable and more understandable. Imagine how much easier it is for a screen reader or other assistive technology to parse (not to mention the most important blind user out there, Google). It should be pretty clear which elements are important, and which containers are for the heading and the navigation. Extend that concept to the rest of your page and you will be in great shape.

Speaking of semantics, when you’re organizing your content, try your hardest to code the HTML using a natural outline of headings, paragraphs, and other elements (like the following example). It helps me to think of the content in outline form, and then mark up the HTML accordingly.

• h1 – Page Title
  • p – intro paragraph
  • h2 – Subtitle
    • p – related paragraph
    • p – related paragraph
    • h3 – Subtitle
      • p – related paragraph
      • p – related paragraph
  • h2 – Subtitle
    • p – related paragraph
    • p – related paragraph

Offer Helpful Attributes

After your HTML is valid and semantic, make sure that you’re using “alt” attributes on all site images and “title” attributes on all links. If you want to go a step further, you can add “accesskey” attributes on your navigation links for more keyboard controls. Even users with no disabilities sometimes prefer keyboard shortcuts to mouse movements.

Add Presentation and Behavior

Tables are for tabular data, period, so style the page with CSS. Here are some quick tips to keep in mind as you’re planning or evaluating your site’s presentation:

• Use image replacement techniques with caution, as some are more accessible than others, and there is some debate as to which is best to deploy. Choose the best technique for your target audience.
• Keep your text readable by using appropriate line lengths and line heights. The ideal line length is about 12 words per line, and the ideal line height is somewhere in the neighborhood of 120% to 140% (or 1.2em to 1.4em) of the font size.
• Help guarantee the use of legible fonts by using a comprehensive font stack. That doesn’t mean it has to be dull, so start with one of these inspiring stacks.
• Use sufficient contrast to make things easy to see, even on a lousy monitor.
• Add behavior functionality (sparingly) with Javascript, but only after verifying that the site functions entirely without it.

Use Tools To Check Your Work

Here are a few tools that I use (sometimes on a daily basis) to verify that I’m on the right track with a site. A word of warning, though: just because your site checks out with accessibility tools doesn’t automatically mean that your site is accessible. You should spend some time doing usability tests (and preferably a session with screen reader users).

• The W3C Markup Validation Service
• Color Oracle, a free colorblindness simulator
• Web Accessibility Evaluation Tool

Further Reading

There are many places on the web to read about accessibility, but if you’re just getting started, these are the best places to start.

• Boagworld’s posts on accessibility
• Dive Into Accessibility – 30 days to a more accessible web site