Strategies
A Case Study
Depending on your needs, web projects have unique proposals and strategies.
Based on my own site, I’ll share with you the tools and processes used to achieve my goals.
Content
SiteMap
Establishing a sitemap with Visio allowed me to view, at a glance, all the possible pages a visitors could traverse within my site, starting with the landing page.
Site Architecture
Determining page names and site architecture set the logical boundaries for what my site was going to offer and the navigation that would hold it all together. Along with an included breadcrumb navigation, I make it easy for the visitor to find their way around the site.
Pen & Paper Sketches
Before delving into pixels and code, I like to get away from the computer and use good ole pen & paper, or a dry erase board if sharing with others, to brainstorm ideas and come up with layout and page flow methods.
Design
Wireframes
Wireframes are graphical diagrams that illustrate the layout of a web page. Before getting involved in imagery, design, and site aesthetics, it’s essential to get the underlying information design established: what goes on each page, where exactly, and why it goes there.
Ultimately, wireframes save the client money and time. It is much easier to restructure a site before imagery, media, and copy are in place. To create a wireframe, I use software such as Omnigraffle or Flairbuilder.
Sometimes I use HTML and CSS to structure simple yet flexible wireframe layouts.
Mood Boards & Color Palette
In describing what you want your web site to look like, and more importantly feel like, many clients begin with words — such as “edgy”, “snazzy”, “organic”, or “cutting edge”. But the problem with that is those words are completely subjective, leaving the design team to have to blindly come up with multiple designs which may all be off track.
A better way to describe what attitude you want your site to convey, and what color palette, typography, and tone to use is by using mood boards. Some mood boards are a simple collage of related images ripped out of magazines and structured together, or a collection of personal photos. Stepping away from the web (and CSS galleries) and drawing inspiration from the world around you can produce intense original work.
In finding great color palettes, I use the free Adobe Kuler online app that lets you pick out predefined palettes, as well as lets you adjust them. For Philadesigns, I wanted a color scheme that I felt calming yet vintage 70s looking.
Development
Content Management System
As with many sites I’ve set up, I chose WordPress as my CMS. With the release of version 3.0, the Dashboard is a lot more intuitive, feature rich, and clients find it easy to log in and make text changes and add blog posts. The online community and variety of amazing plugins make it the choice for many.
Other CMS frameworks that I have worked with include Sitefinity and ExpressionEngine.
HTML & CSS
I hand code with standards based HTML and CSS, using Panic Coda. I’ve been enjoying utilizing the new features of HTML5 and CSS3, heavily influenced by HTML 5 For Web Designers by Jeremy Keith and Hardboiled Web Design by Andy Clarke. The Can I Use site is a great reference standby to see what new vendor specific CSS you can enhance your sites with.
JavaScript Frameworks
I am by no means a JavaScript expert, but I love using jQuery and MooTools to add some spice to my sites. The above slideshow utilizes jQuery, as well as the pop-up images on the Portfolio section and the Sampling Of My Work section of the home page.
Responsiveness
With the addition of media queries in CSS3, I have been growing more excited about creating responsive web sites.
Though some web sites are better suited with a separate mobile domain for mobile browsing, I found that my site was simple enough to use media queries to get it looking good for smart phones. My goal was to allow the user to effortlessly view all important content without pinching and squeezing. I also ensured that it looked great on an iPad, which it originally didn’t due to some fixed position elements.
Browser Support
My goal was to have my site look and work great in all commonly used modern browsers, even with JavaScript turned off. Browsers I chose to support are IE7, IE8, IE9, Firefox, Safari, Opera, and Chrome.
Online Marketing
Facebook Page
When someone “likes” your Facebook page, you now have that person’s attention and can funnel information to them with updates via your Wall.
Facebook is a great way be lighthearted with your potential customers, showing off photos and lending ideas, yet also instantly notify them of deals, specials, events, and the latest goofy face you made while eating wings at the pub.
Using FBML, I customized my Facebook page to match my brand.
Brief and succinct, Twitter is quite the opposite of the media rich and lengthy bantering of Facebook. I personally love the challenge of a 140 character limit tweet, grinding down thoughts to the bare necessities, or sharing that very important link. With loads of web gurus and news feeds to follow, Twitter allows me to be at the cutting edge of the web industry. It’s all about who you follow.
YouTube
Although I haven’t made a video in a while, it’s amazing how many people have reached out to me via YouTube. Video adds an extended personality to your site that copy and static images cannot provide.
Organic Search Engine Optimization
SEO is kind’ve like a black art, but there are some basics that have given all of my sites great results. Putting proper keyword phrases in the title tag, meta title, meta description, and body content, will drive results. Along with using friendly URLs.
Analytics
Google Analytics
With my Google Analytics account, I can see an increasingly variety of stats about my site’s visitors, including: what keywords they used in search, referral sites, what browsers and OS they were using, how long they were on my site, what page they exited on, and their new in-page stats.
Using Google Analytics, I created conversion goals, such as a visitor going through the process of filling out my contact form.
Other analytics software that I have used include Woopra and AWStats.
Verify
Verify allows me to “act on data, not intuition”. From their simple mood tests, A/B testing out a specific segment of my site, or letting testers annotate to their heart’s content, I can get raw feedback about how my site performs or if that new CSS3 transitions animation is too annoying.
User Flows
Product Planner is a great site that showcases proven user flows, especially from Facebook and Twitter. For my site, the ultimate goal is to have a fan link to my site’s landing page, end up on the Contact page, and finally fill out the form.
