Best web design podcasts

Posted on October 11, 2011 by Chad Warner

These are my favorite audio podcasts covering web design and related topics such as web development, usability, and freelancing. I’ve previously posted my favorite WordPress podcasts, and I’ll do another updated post soon.

Maybe some day I’ll write a review for each one, but for now, I just pasted the description from each podcast’s site or iTunes page. I’ve listed them roughly in the order I like them.

For more web design podcasts, read these posts from Noupe.com: Designing the Airwaves: Podcast’s Part in Design and Web Design & Development Podcasts. I’m always looking for more, so please add your favorites in the comments!

Boagworld

For all those involved in designing, developing or running a website on a daily basis. They also interview leading figures in the world of web design including people like Jeffrey Zeldman, Jeremy Keith and Andy Clarke.

Boagworld’s Boos

Quick tips from the co-Host of the award winning web design podcast Boagworld.

SitePoint Podcast

News, opinion, and fresh thinking for web developers and designers. The official podcast of sitepoint.com.

PageBreak Podcast

A design, business and marketing-themed podcast hosted by Liz Andrade and Niki Brown. The main goal of the club is to build a strong online community of designers, developers, freelancer (like ourselves) and to encourage people to read more and share their ideas and opinions!

Freelance Jam

The show for independent professionals who build the web. Hosted by Brian Casel (@casjam) and Dave Yankowiak (@daveyank) with guests from across the web industry. Topics include freelance business, web design, entrepreneurship, working from home, killer apps, and more.

Designer Roundtable Podcast

A podcast about design, business and freelance.

The Big Web Show

Features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters. Hosted by Dan Benjamin & Jeffrey Zeldman.

The Web Ahead

A weekly podcast about changing technologies and the future of the web, discussing HTML5, mobile, responsive design, iOS, Android, and more. Hosted by Jen Simmons.

Einstein & Sock Monkey

Covers web design news for the web geeks out there as well as for those who just own or run websites. We discuss a large range of topics with an emphasis on Web Technologies, User Experience, Usability, Content Management Systems, and Social Media. Hosted by Steve Martin (User Experience Designer at CleverCubed.com), and Ron Zasadzinski (web developer and owner of CodeGeek.net)

Think Vitamin Radio

Topics will include web design, web development and web applications as well as news and views from host Keir Whitaker with Ryan Carson and Mike Kus.

Design Festival

Practical web design tips, strategies, and inspiration. We love exploring usability, typography, and new trends in web design. Part of the SitePoint Network.

ExplicitWeb Design & Development

A regularly recorded podcast all about the front lines of website design and development. These typically half-hour shows are made up of hosts Rob Hawkes, Hannah and John O’Nolan discussing the finer points of the industry, as well as sharing helpful tips and information for the savvy web professional. Note: explicit language.

This Week in Web Design

Helps simplify the web design process by having guest experts in business, creative, tech and marketing answer your questions. Join Host Jose Caballer of The Groop as he helps steer the web to better design.

Review: Starting Your Career as a Freelance Web Designer by Neil Tortorella

Posted on October 8, 2011 by Chad Warner

Starting Your Career as a Freelance Web Designer by Neil Tortorella
My rating: 5 of 5 stars

I’m starting to freelance as a part-time web designer, so this book was exactly what I needed. It addresses all areas of freelance web design, including the design process, rates and billing, contracts, insurance, client relations, and marketing. Tortorella emphasizes the importance of planning at every stage, from launching the business to project management to marketing. To paraphrase Tortorella, take responsibility and initiative rather than simply letting your freelance business happen to you.

Tortorella strongly suggests targeting a niche by specializing in a particular technology, industry, geographic region, interest, or passion. Then, explore the vertical and horizontal markets. He also advocates networking with other web professionals to trade referrals and subcontracted work.

The book was published in 2011 and mentions many specific tools and websites. Each chapter includes quotes from seasoned freelance web designers about their experiences and recommendations; this firsthand advice was very helpful.

Tortorella summarizes his advice at the end:

Carefully plan your business and implement that plan.
Aggressively market to create a pipeline of qualified prospects.
Mind your credit and cash flow.
Do good work and exceed client expectations.
Plan for retirement and build a nest egg.

I highly recommend this book to web designers at any stage in their freelance careers!

Forms

proposal approval (becomes the project contract)
change order for major changes/revisions
retainer agreement

Project questionnaire

message: client’s goals, audience, differentiation
perception: 3 adjectives to describe the site, audience perception
visual styles
compelling sites (and why)
competitor sites

Contract

Base the contract on a proposal outlining the project scope and specifics such as pages and graphics.
Specify the number of changes/revisions allowed.
Assign dates for all deliverables, and assign consequences for undelivered client deliverables.
Schedule payments based on date, not milestone, in case client delays.
Specify that you own copyrights and license limited usage rights to the client. If selling rights, transfer takes place upon full payment.
Boilerplate: arbitration and mediation, limitation of liability, choice of law, cancellation

Retainer agreement

Include work to be done over a specified time for a specified fee.
Specify the number of hours.
Specify how unused hours and overages are handled.

Rates and Billing

You need to charge about $75/hr to achieve a $40,000 annual salary.
- target salary = $40,000/yr
- assume 30% for taxes, FICA, insurance, etc. = $12,000/hr
- cost of salary (target salary + taxes, etc.) = $53,000 (40,000 + 12,000)
- assume 75% billable time = 1,428 billable hrs of total 1,904 hrs
- salary recovery (cost of salary / billable hours) = $36/hr ($52,000/1,428 hrs)
- assume 67% overhead = $24/hr ($36 x 67%)
- base rate (salary + overhead) = $60/hr (36 + 24)
- 20% profit = $12/hr ($60 x 20%)
- $72/hr to recover salary, overhead, and profit
- round up to $75 for hourly rate
Don’t cut fees without reducing services.

Required insurance

health insurance (try for a group policy through an association, or get an HDHP and an HSA)
life insurance (consider term)
general liability
disability insurance

Optional insurance

professional liability (errors and omissions), if doing sites with e-commerce or other potential risks
business interruption insurance (added to property insurance or business owner’s insurance)
home-based business insurance
Web/Internet specific insurance

Marketing

Page title format for SEO: city, description, your name (for example, Holland Michigan web design – OptimWise)
Tell a story with each portfolio piece. Describe the problem, your solution, and the result.
Elevator pitch: the primary benefit you deliver and for whom. Example: “I help financial professionals market themselves online.”
At the end of each project, ask for a testimonial to feature in marketing materials.

Additional advice

Consider leasing your home office to your business to avoid the complications of home office tax deductions.
In the proposal, detail all fees. Show project phases, their tasks, and their costs.
Don’t do work for hire; you usually forfeit your rights.

View all my reviews

Freelance Jam: podcast for web freelancers

Posted on October 4, 2011 by Chad Warner

This week I discovered Freelance Jam, a podcast for web freelancers. The iTunes description is “Freelance Jam is the show for independent professionals who build the web. Hosted by Brian Casel (@casjam) and Dave Yankowiak (@daveyank) with guests from across the web industry. Topics include freelance business, web design, entrepreneurship, working from home, killer apps, and more.”

Episodes have covered web design, pricing, project management, client relations, typography, and WordPress. If you’re a web freelancer, you should subscribe!

I learned about this podcast because Brian Casel mentioned it in his WordCamp video Business Models for WordPress Designers.

Review: HTML, XHTML & CSS For Dummies by Ed Tittel

Posted on September 19, 2011 by Chad Warner

HTML, XHTML & CSS For Dummies by Ed Tittel

My rating: 2 of 5 stars

I can’t recommend this book; there are several that do are better for introductory HTML and CSS. It’s quite broad, covering many Web technologies, but it’s not very deep. It focuses on HTML and CSS, but also touches on scripting and CMSs. It’s easy to read and full of colorful code snippets and examples, and it’s up-to-date (published 2011). My favorite chapters were those on mobile web design, HTML5, and CSS3. I also liked the many recommendations for useful sites, tools, and resources.

A better intro to HTML and CSS is Head First HTML with CSS amp XHTML (see my review). My Goodreads account has more of my reviews of web design books.

HTML5

Use HTML5 Shiv for browsers that don’t support HTML5.

CSS

Use ems to set font size.
Read Smashing CSS by Eric Meyer.
Use the Spoon Browser Sandbox to test multiple browsers.
CSS3 tutorials: CSS3.info and CSS3.com.

Mobile web design

Link to Google Maps for Mobile.
Include links between the mobile and desktop sites.
Make the site simple.
Make key information easy to find.
Make all links big and easy to click.
Use text and contrasting background colors to make text easy to read.
Put contact info 1 click away.
Read Mobile Web Design for Dummies.
Use the W3C mobileOK Checker to make sure your site is mobile-friendly.
Use iPhonetester.com to preview your site as it would appear on an iPhone, and iPadPeek.com to preview it on an iPad.

HTML editors

WYSIWYG editors

Helper HTML editors

Aptana Studio (free)
Komodo Edit (free)
HTML-Kit (free or paid versions)
Notepad++ (free)

View all my reviews

Review: Sams Teach Yourself HTML and CSS in 24 Hours by Julie C. Meloni

Posted on August 9, 2011 by Chad Warner

Sams Teach Yourself HTML and CSS in 24 Hours by Julie C. Meloni

My rating: 3 of 5 stars

This is a decent introduction to HTML and CSS. Its main advantages over other books of this type are the full color examples and syntax-highlighted code snippets. The explanations and examples are simple and easily understood. It claims to cover HTML5, but actually just points out a few deprecated elements and mentions a few new elements and attributes. It doesn’t cover CSS3 at all. Besides XHTML 1.1 and CSS 2.1, it also deals with fonts, images, and SEO.

Web design tips

Use an email address encoder to obfuscate your mailto links using ASCII characters.
Use the W3C Link Checker to check for broken links.

Use absolute positioning only when you need fine, exact positioning. Otherwise, use relative positioning.

Don’t present more than 5 links (as a list or graphics) next to each other. Break them into multiple lists.
Use a flat structure; keep all pages within 1 or 2 links of the homepage.
Link to a category page or the homepage after each subsidiary page.

A home page should always include the site’s name, what it’s about, and a direct, concise statement of the most important message for the audience.

Color and graphics

Use Color Scheme Designer to create your color scheme. Choose tetrad or accented analogic.
Use Colorblind Web Page Filter to see how your site looks to someone with colorblindness.
Free graphics: Microsoft Office Images, Flickr (Creative Commons images)

SEO

Include appropriate keywords in the meta tags.
Use accurate page titles.
Create human-friendly URLs.
Create URLs that reflect the directory structure.
Use text, not graphics, for navigation.
Use a breadcrumb trail.
Use appropriate headings within each page.

View all my reviews

Review: Sams Teach Yourself HTML5 in 10 Minutes by Steven Holzner

Posted on July 26, 2011 by Chad Warner

Sams Teach Yourself HTML5 in 10 Minutes (5th Edition) by Steven Holzner

My rating: 2 of 5 stars

This short book contains 10 brief lessons covering some of what’s new in HTML5: drawing with the canvas element, dragging and dropping, form controls, video and audio, and storage. Each lesson introduces elements and their attributes, briefly explains their functionality, then shows the code to build a small demo.

The writing style is fairly boring and the examples are uninteresting, although they are basic and practical. I’ve seen much more exciting introductions to HTML5 online.

I liked seeing how forms are more interactive in HTML5, with basic validation taking place in the browser without requiring server-side scripting. Overall, this book made me realize how closely HTML5 works with JavaScript; I’ll definitely need to spend time getting more familiar with JavaScript!

View all my reviews

Review: Sexy Web Design: Creating Interfaces that Work by Elliott Jay Stocks

Posted on July 7, 2011 by Chad Warner

Sexy Web Design: Creating Interfaces that Work by Elliott Jay Stocks

My rating: 2 of 5 stars

A simple introduction to the principles of presentational, front-end web design. It’s a very easy, visual read, full of colorful examples. It covers several specific techniques, but it’s more inspirational than a reference book. I was hoping for more practical tips on using graphics and CSS.

Stocks says there’s no universal truth to creating an aesthetically pleasing site, but there are tried-and-true design frameworks that have developed over millennia. He shows how to start with traditional design conventions as a base, then innovate with novel use of composition, typography, color, etc.; “experiment within the confines of conventions”, as he puts it.

Topics

Research: write a brief, gather requirements, collect inspiration
Structure: site anatomy, sketches, sitemaps, and structure diagrams
Interaction: navigation, forms, multimedia, etc.; wireframes
Aesthetics: layering innovative beauty on top of conventions
Deliverables: giving client and developers what they need to go live

Research

Client website questionnaire

What do you want someone to do on the site (call to action)?
- tells business goal
How should a user feel when they visit the site? What should be their lasting experience?
- tells intended emotional effect
Name 3 sites that appeal to you, and why.
- tells what to emulate
Name 3 sites you don’t like, and why.
- tells what to avoid
What’s your budget and time frame?
- tells how much time to spend

Find design inspiration outside the web. Look to print media, architecture, fashion, products, packaging, etc.

Structure

Use WriteMaps for creating and sharing sitemaps.
Don’t use the exact same layout template for every page; add variety.

Navigation and Interaction

Read WEB Design: E-Commerce by Julius Wiedemann for ecommerce design.
Offer a positive experience: one that allows users to find info quickly and easily. Use comfortable conventions from the desktop and offline world to relax users.

Aesthetics

Great design works on the subconscious level. Users love what they see, and come back for more.
Read The Principles of Beautiful Web Design by Jason Beaird for layout and composition theory.
Use the Golden Rule or Rule of Thirds in layouts. The 960 Grid System can help.
Use Color Scheme Designer or Adobe’s Kuler for color scheme inspiration.
Engage the user by allowing them to play with the site and enjoy it.

View all my reviews

Review: Web Design: A Beginner’s Guide Second Edition by Wendy Willard

Posted on June 28, 2011 by Chad Warner

Web Design: A Beginner’s Guide Second Edition by Wendy Willard

My rating: 2 of 5 stars

This book is probably only useful if you’re completely new to web design. The book itself isn’t very educational, but it includes dozens of references to tools, sites, and services that are useful for learning web design. The most useful chapter for me was the first, which teaches how to discover client requirements and write documentation such as proposals, statements of work, and design specs.

The book provides an introductory overview of the phases of web design: planning and analysis, design, development, then transfer and maintenance. It familiarizes you with HTML, CSS, JavaScript, and multimedia, but refers you to other books and sites to learn the details.

Author Wendy Willard promotes designing standards compliant, accessible, usable websites. She recommends offering additional services besides web design, such as SEO and HTML email design. For email design, she recommends using campaignmonitor.com.

Below are the notes I took as I read.

Sites for learning web design

Recommended web hosts

Free HTML editors

Web design proposal

A proposal for a web design project should include the following sections. You can download a sample proposal from the author’s site, WendyWillard.com.

Purpose: restatement of client’s business needs
Scope/Statement of Work: details of work, including list of pages and features
- Design requirements gathering: example sites, text and graphics, demographics
- Web template design: site map, layout, color theme, number of edits
- Coding & development: pages, rounds of edits
- Project management: administrative tasks covered by project cost
Conditions/Assumptions: conditions and assumptions that may affect cost and schedule
- file transfer method
- communication method and frequency
- testing (screen size, browsers, speeds)
- copyright ownership
- post-launch edits
Hosting
Cost
Schedule
Biographies: bios of design team members, stating experience and skills

Floating and positioning

Floated content must appear in HTML above the content that must wrap around it.
Relative positioning moves elements relative to their original location.
Fixed positioning moves elements relative to the browser window.
Absolute positioning moves elements relative to their parent element.
Use z-index to layer elements that are relatively or absolutely positioned.

Testing designs of sites and HTML email

Test your site in multiple browsers using Adobe BrowserLab or BrowserShots.org. Test HTML email with Litmus.com.

SEO

Put keywords in the URL, heading tags, body copy, images (alt attributes), links (title attributes), page titles, and meta tags (although meta tags are ignored by many engines).
Search engines rank sites based on incoming links and user input.
The fastest way to appear in search results is PPC (pay-per-click) advertising (sponsored links), such as Google AdWords.

Job applicant tracking services

You can integrate these services into your sites for tracking job applicants.

View all my reviews

Review: Head First HTML with CSS & XHTML by Elisabeth Freeman

Posted on June 14, 2011 by Chad Warner

Head First HTML with CSS & XHTML by Elisabeth Freeman

My rating: 4 of 5 stars

The best introductory book on HTML and CSS I’ve read so far. It focuses on (X)HTML and CSS, with a short chapter on graphics and barely a mention of scripting or other web topics. So it’s not as broad as Learning Web Design: A Beginner’s Guide to HTML CSS Graphics and Beyond, but it covers things in much more depth, and I understood and retained more from this book. I credit the informal writing, cheesy pictures, “handwritten” explanatory notes, reader question sections, repetition, and visuals.

The book is from late 2005 and somewhat dated, but the basics of HTML and CSS presented here are essentially the same as today. The explanations of floating and positioning, which can be confusing, are very clear and understandable.

I flipped through several chapters before I encountered unknown material and had to slow down, so apparently I’ve actually learned something from my recent self-training in HTML and CSS!

Font sizes

Specify the body font size with a keyword (such as small or medium), then specify all other font sizes as ems or percentages.

Floating and positioning

The HTML for floated elements must be directly below the element you want them to float below. With absolute positioning, the order of the HTML doesn’t matter.
The top and bottom adjacent margins of block elements collapse to the size of the larger margin.
Floated elements are removed from normal flow and placed to the left or right.
Block elements ignore floated elements, but the inline elements flow around them.
Absolutely positioned elements are positioned relative to their containing element (the sides of the page, if not nested). They can be layered using a z-index.
Fixed position elements are positioned relative to the browser window and don’t move when the page is scrolled.
Relatively positioned elements are flowed into the page, then offset to leave the space they would have occupied empty.

View all my reviews

Book review: Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Posted on June 7, 2011 by Chad Warner

Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

My rating: 4 of 5 stars

An excellent introduction to creating usable websites. As the title states, every website’s design and functionality should be so simple that people barely need to think to use it. The book’s 2nd edition is from 2005, so some examples are dated, but the concepts are quite relevant. This was a fun read due to its straightforward style and Krug’s humor.

When I started looking for web design books, Steve Krug’s classic on web usability frequently appeared at the top of most lists, along with Designing with Web Standards by Jeffrey Zeldman (see my review). I highly recommend both books.

Steve Krug’s Laws of Usability

First Law: Don’t make me think. Make things obvious and self-evident, or at least self-explanatory. People scan; they don’t read. People choose the first reasonable option. People muddle through things rather than figure them out.

Second Law: It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. Make choices mindless for ease of use.

Third Law: Get rid of half the words on each page, then get rid of half of what’s left. Be ruthlessly concise.

Usability testing

Test early and often. Test with 3 or 4 users. Have each user think out loud as they use the site. Use a screen recorder to record the session for reference. Fix any problems, then test again. Review the results as soon as possible.

Additional notes

Navigation helps users find things, tells them where they are, reveals content, and tells how to use the site. It must be good enough to help people who land on any page.
The home page should have a personable, lively tagline conveying a value proposition. The home page also needs a short, scannable welcome blurb describing the site.
Know what people want, and make those things obvious and easy.
Only ask for information necessary to complete the transaction.
Only make a site look good if it’s not at the expense of making it work well.

View all my reviews