Modular CSS – Flexible Web Design

I really don’t know the official term to describe this method. It’s not new, by all means. However, it’s a powerful method of using CSS code & classes effectively and efficiently.

Multiple CSS Classes

First, you may not be aware that you can use multiple css classes on elements. Example:
<p class="classone classtwo"></p>
Here’s where the power comes in. We can use these multiple classes to separate the structure from the “skin.”

Read More

Great New Web Design Podcast

Just learned of a great new web design podcast.

The Pipeline, hosted by Dan Benjamin, features interviews with leading designers, developers, writers, and entrepreneurs. The first episode featured Jeffrey Zeldman, designer, founder of ALA. I found this to be the best interview with Jeffrey.

Other shows feature interviews with Ryan Carson and Jason Fried, with more interviews to come.

Visit the web site to listen to individual interviews, or subscribe via iTunes.

Let’s Eliminate Sexism in the Web Industry

My typical post center around sharing my knowledge and experience with other web professionals. This particular post will depart from the norm and cover the very important topic of diversity & respect in the web industry, specifically related to gender.

I recently attended the 200th episode of the Boagworld podcast. The podcast celebrated by spanning twelve hours with special guests; experts in their specific web-related field. As usual with the Boagworld podcast, there was plenty of banter, including a few music numbers and bad jokes, along with the valuable, motivating information. If you don’t listen to the podcast, I highly recommend it.

Read More

BLP Labels

BLP LabelsThis website redesign project was referred by my web design partner. A printing business has an existing site, which was outdated and not representing the company’s products and services. We worked with the client to examine their competition and agree upon an information architecture that would provide results. After creating wireframes that represented the content for each page type, my partner designed the website in Illustrator. I built the approved design on the WordPress CMS platform, using a web standards-based approach. Future phases will include eCommerce features to purchase products online.

Highlights

About the site

  • WordPress-based website
  • Completed January 2010

Work performed

  • Web Design & Development
  • Information Architecture, Wireframes
  • WordPress Theme Development
  • Search Engine Optimization (SEO)

Technologies Used

  • (X)HTML
  • CSS
  • PHP
  • JavaScript
  • WordPress

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3

View BLP Labels website…

Update Your Copyright Date Automatically

It’s a new year, and it’s time to get back to work.

So why do your websites still read © last year or worse?

Most web site owners forget to update their copyright date. And it’s easy to understand why. For most sites, the footer, where the copyright date usually sits, is below the fold and in small type anyways. But for site visitors, it can communicate the freshness of a website’s content. So it doesn’t hurt to make sure this information is updated.

Read More

TrubyLaw

Trubylaw.comThis web design project was for a business lawyer client in Los Angeles, California. The project involved information architecture, wireframes and Photoshop design mock-ups. The site was then built on the WordPress CMS platform leveraging a web standards approach. It encompasses the clients need to communicate that their legal services provide direction.

Highlights

About the site

  • WordPress, standards-based website
  • Completed December 2009

Work performed

  • Web Design & Development
  • WordPress Theme Development
  • Search Engine Optimization (SEO)

Technologies Used

  • (X)HTML
  • CSS
  • PHP
  • JavaScript
  • WordPress

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3

View the Phyllis Alden Truby website…

The Galapagos Islands

The Galapagos IslandsThe Galapagos Islands is a standards-based, lead-generation, travel-related microsite designed for an existing client and developed on a WordPress CMS. Much of the look n’ feel was derived from existing branding from travel supplier print material. The site leverages Cufon, a font-replacement technology, that allowed me to target the well-established supplier branding. As the Galapagos Islands are a unique destination, fun for adults and children, I thought it would be fun to have a blue-footed booby simply hanging around the site.

Highlights

About the site

  • Microsite designed for an existing client.
  • Completed December 2009

Work performed

  • Web Design & Development
  • Flash animation creation
  • Search Engine Optimization (SEO)
  • WordPress Theme Development

Technologies Used

  • (X)HTML
  • CSS
  • PHP
  • JavaScript
  • Flash
  • WordPress
  • Cufón – Fast text replacement

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3
  • Adobe Flash CS3

View the Galapagos Islands website…

CSS Styling for ASP.NET Applications

I just concluded a month long, onsite project for a mid-to-large sized company. The project was to consolidate several client-side applications into one web-based application for corporate & field employees. It was personally rewarding on several levels (besides financial). First, got to work with a company that has a seemingly great culture of teamwork and respect, of which I truly appreciate. I also had the opportunity to do some things graphically that I had not focused on before. Now don’t picture anything life changing here, just plenty of expanding rounded corner boxes, a logo, and an animated graphic (.gif) designed in Illustrator that involved 2-3D images. The final task was to create styles that would be implemented on an ASP.NET-based application leveraging ASP components & extensions. The latter proved to be an unexpectedly difficult challenge.

Read More

New Website

Well, the planets all lined up again. Which meant, my intent to redesign my personal website had to be placed on hold. Yet, moving off of a web host and getting things updated took precedence. So with that, here’s the latest website redesign.

It’s based on the wpFolio WordPress theme, with just a few customizations. I need to make more, but it’ll have to wait until time allows.

Stay tuned, more fun on the way.

Smiles by Design

ssd_fullThe client, who created the initial 10-year old website using Frontpage, was my dentist at the time. For many years, I commented on how I could freshen up the look of his website while increasing the chance the site would rank better on the search engines. After several off and on discussions over a period of years, he finally decided to take me on. After an audit of the current sites’s content and a redesign of the site’s information architecture, we wireframed and mocked-up the website. After a change in overall direction (from general to more cosmetic dentistry), I delivered the final standards-based site. The site marked a milestone as my first WordPress-based site.

Highlights

About the site

  • Completed August 2009
  • Redesign of established, website for Chicago dental practice.

Work performed

  • Web Design & Development
  • Flash animation creation
  • Search Engine Optimization (SEO)
  • WordPress Theme Development
  • Information Architecture, Wireframes

Technologies Used

  • (X)HTML
  • CSS
  • PHP
  • JavaScript
  • Flash
  • WordPress

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3
  • Adobe Flash CS3

View the Smiles by Design website…

Jean-Jacques Bernard Furniture Studio

Jean-Jacques Bernard Furniture StudioThe client had an existing table-based website which was designed by the hosting company. In two years, the client had never received any leads from the website. Desperate to increase business, Jean-Jacques was referred to me to redesign the website, making it more effective. The redesigned website incorporated a web standards-based approach with search engine optimization in mind, while increasing the amount of targeted, persausive textual content on the site. Since the website redesign, the client has received a huge increase in leads that have turned into prospective clients.

Highlights

About the site

  • Completed June 2009

Work performed

  • Logo Design
  • Web Design
  • Search Engine Optimization (SEO)

Technologies Used

  • (X)HTML
  • CSS
  • JavaScript

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3
  • Adobe Flash CS3

Visit Jean-Jacques Bernard Furniture Studio…

Second City Scooters

Second City ScootersThe client contacted my web design partner requesting a redesign of a site who’s business they purchased. The old site had a grunge, retro feel to it, and didn’t match the new owner’s fun retro tone they wanted to achieve. As this was a seasonal business and the season fast approaching, we worked with the business owner to determine the information architecture and design elements while also researching the target audience. My partner came up with the fantastic masthead and we collaborated on the remainder of the design.

The client was very happy with the results, and has reminded us of that fact from time to time when a customer stops by the store and mentions the website. Very kool.

Highlights

About the site

  • Completed May 2009
  • Redesign of existing website.

Work performed

  • Logo Design
  • Web Design
  • Search Engine Optimization (SEO)
  • Social Media Marketing

Technologies Used

  • (X)HTML
  • CSS
  • JavaScript

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3
  • Abobe Illustrator CS3

View the Second City Scooters website…

Cruise West Alaska

Cruise West AlaskaCruise West Alaska is a lead generating microsite for a travel agency which specializes in small ship cruises. It was my first web standards-based website and has been quite effective for the business.

Highlights

About the site

  • Completed 2008
  • Microsite; supplier and destination focused

Work performed

  • Web Design & Development
  • Flash Video processing
  • Search Engine Optimization (SEO)

Technologies Used

  • (X)HTML
  • CSS
  • JavaScript
  • Flash Video

Applications / Tools Used

  • Adobe Dreamweaver CS3
  • Adobe Photoshop CS3
  • Adobe Flash CS3

View Cruise West Alaska …