Tag Archives: Web Design

Redesign Project: Second City Scooters

I recently had the opportunity to work on a fun project; the redesign of a small business site that sells motor scooters. The most rewarding part is hearing of customers praising the website. That’s way kool.

Former site

To understand the old website, you had to understand the history, short as it was, of the business.

Two brothers, while visiting Italy on vacation, fell in love with motor scooters and the lifestyle. When they returned, looking for scooters, they were shocked at the prices. So they started Second City Scooters, selling motor scooters for around half the price of more well-known brands, like Vespa. They opened a storefront business and created a website. Continue reading

2 Comments

Filed under Case Studies

24 ways

Here’s a little gift I had to share, a fantastic resource for all those web designer/developer types out there.

24 ways is an online advent calendar for web geeks. Starting on Dec. 1 and running through Dec. 24, it’s a daily dose of web innovation and ingenuity, from the like of web experts like Jon Hicks, Eric Meyer, Jonathan Snook, David Shea, Andy Clark, Paul Boag, Mark Boulton, Dan Cederholm and many more. Owner Drew McLellan has redesigned the site and offers daily tips from the past three years.

Enjoy! And Happy Holidays!

Leave a comment

Filed under Web Design

Microsite Completed

I just completed a microsite for a long-time client. For me personally, it was painful; most other web designers might chuckle. But this was my first experience with scope change (not creep). On the positive, it was my first chance to complete a web project using a web standards-based approach, instead of just pontificating about it.

Continue reading

Leave a comment

Filed under Web Design

So You Want To Be A Good Web Designer…

Seems like everyone wants to be a web designer these days. And with the selection of tools, both client and web-based, it would appear that it is as easy as a-b-c.

Here’s the bubble burst. POP!

Like cooking, home improvement and landscaping, you can do web design, yet not be a good web designer. I, am not a good web designer. I’d love to be. I aspire to be. I’m working on it. However, I’m not a good web designer.

I can code HTML, XHTML and CSS. But that alone does not make me a good web designer.

Continue reading

Leave a comment

Filed under Web Design

August Chicago Dreamweaver Meet-up Wrap-up

On Tuesday, August 12, the Chicago Dreamweaver Meet-up hosted a presentation on Cascading Style Sheets (CSS). Linda Ryder, from Ryder Web Design & Development, presented a primer on CSS that also touched upon some of the more advanced topics, such as using a reset style sheet and which DTD to use (I learned about the impact Strict vs. Transitional has on the target attribute of the anchor tag (<a>)). The presentation can be viewed below.

Following the presentation, we has a roundtable discussion on CSS, its extent of use by the members, table vs. tableless layouts, etc. This roundtable discussion as a recent addition to the meet-up and was well received.

Kudos to Stephen Starr, organizer of the Chicago Dreamweaver Meet-up and owner of Stephen B. Starr Design Inc. In the few months I’ve been attending this meet-up, it has really taken off and become engaging and exciting. And as always, I lok forward to the follow-up month’s meet-up.

If you’re located in the Chicagoland area and are interested in Dreamweaver and/or web design, consider joining and stopping by.

View Chicago Dreamweaver Meet-up website…

Leave a comment

Filed under Dreamweaver, Web Design

Start SEO Post Launch? I don’t think so…

I’ve heard this ideology before, but was just reminded again while viewing a presentation by a well respected web professional. It’s the idea that, when building a website, SEO is started at the time of launch and beyond into maintenance mode.

Ah, no…

Search engine optimization must be considered during the initial planning stages of a site (or even during the initial planning stages of a redesign). SEO factors into many aspect of a site’s creation, from the naming of the domain, files & folders, navigation labels to the coding, design and and layout of the pages/templates. SEO is a piece of the overall puzzle, a peer and beneficiary of usability, accessibility, information architecture, etc.

Search Engine Optimization as part of the Web Design Workflow

The standard web design workflow is presented below (Thanks to Kelly Goto for writing the book on this topic). I’ve embellished and added to the workflow with SEO tasks that should take place in conjunction to the web design tasks.

Continue reading

3 Comments

Filed under Best Practices, Search Engine Optimization (SEO), Web Design

Giving the Full Presentational Power to CSS

Remember the days when <font> tags were the standard means of formatting our content? Our pages were polluted and bloated with them. I especially remember the kind of code authoring tools such as FrontPage would create:

<p><font face="arial"><font size="10pt">I especially remember the kind of code authoring tools such as FrontPage would create.</font></font></p>

I then remember when CSS was first announced by Microsoft (not that they created it). I remember the examples they used to show it’s power. Placing text anywhere on the page, even overlapping it. At that time, people like me thought it kool to be able to use these new tags in place of the numerous tags that littered our pages. I like to consider this the first generation of CSS usage. Here’s an example:

<div style="font-family:arial;font-size:13px;">I remember the examples Microsoft used to show it's power.</div>

The problem with this approach is that people started using <div> and <span> tags excessively. This was not necessary, as (X)HTML provides enough tags, or “hooks” into the code to properly manipulate the presentation of the content.

<p style="font-family:arial;font-size:13px;">I remember the examples Microsoft used to show it's power.</p>

This new found way to mark up the presentation was great … except, it was a new way to do the same thing. Our code was still as bloated with inline presentation code & attributes. So some leading designers started placing the CSS code in the head of the page.

<head>
<title>My Fascinating Page of Content</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:arial, helvetica, sans-serif;
font-size:13px;
}
h1{
margin:0px;
font-family:
arial, helvetica, sans-serif;
font-size:18px;

}
...

This was a great step forward. However, it still added to the page size, and was a change management headache.

Then, people started thinking more efficiently. They started centralizing all their presentational styles in an external file. It made for easier site management and lighter pages.

<head>
<title>My Fascinating Page of Content</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">

...

CSS Best Practices

Note: The list below suggests a goal to move toward. The real world will always throw a curveball.

  • Always use an external styles file and either link or import the styles from the file. Avoid the lazy urge to implement inline styles. One way to use different styles for a given page is to give the page’s <body> tag an id. Then refer to the id in your styles. Same holds true for other page elements.
  • Design your pages and content semantically (structure with meaning). Avoid adding extra tags to hook styles to whenever possible.
  • Planning before implementation will always make for easier & effective styles usage.

Leave a comment

Filed under Cascading Style Sheets