Review: Introducing HTML5 by Bruce Lawson

Introducing HTML5Introducing HTML5 by Bruce Lawson

My rating: 3 of 5 stars

An entertaining introduction to HTML5 with real-world examples. Bruce Lawson and Remy Sharp have a creatively funny writing style, and I laughed at many of their code samples. The book covers several topics: structure, text, forms, video and audio, canvas, data storage, offline, drag and drop, geolocation, and messages, workers, and sockets.

I liked the chapters on structure, text, forms, and video and audio. The remaining sections were good for me to read about, but I won’t likely be using them soon since I’m a web designer, not a developer. I definitely didn’t get as much out of this book as I would have if I knew more JavaScript. I’m currently (re-)learning JavaScript through Lynda.com.

SitePoint recommended this book. I enjoyed it much more than Sams Teach Yourself HTML5 in 10 Minutes.

Notes

  • Use Modernizr for backwards compatibility with older browsers.
  • The Internet Archive will convert and host audio and video for free.

View all my reviews

Share

Review: CSS: The Definitive Guide by Eric A. Meyer

CSS: The Definitive GuideCSS: The Definitive Guide by Eric A. Meyer

My rating: 4 of 5 stars

“Definitive Guide” is a fairly accurate title for this 3rd edition of Eric Meyer‘s CSS textbook; it’s a deep dive of sometimes eye-glazing detail. It’s quite technical in its explanations of the math and calculations that CSS performs. There are CSS snippets and screenshots of the results, but it’d be better if they were in color. The book was published in 2006 so it’s missing CSS3, but given the widespread use of CSS 2.1, the book is still relevant. My favorite topics were floating and positioning, generated content, pseudo-classes and pseudo-elements.

Types of positioning

  • Relative: element’s box is offset by some distance. Element retains its shape, and space it would have occupied is preserved.
  • Absolute: element’s box is removed from flow and positioned with respect to its containing block (nearest block-level ancestor box). The space it would have occupied is closed, as though the element didn’t exist. The positioned element generates a block-level box.
  • Fixed: element’s box behaves as though set to absolute, but its containing block is the viewport.

Display: none vs. Visibility: hidden

display: none renders the element invisible, and it doesn’t take up the space it would ordinarily. visibility: hidden renders the element invisible, but it takes up the space it would ordinarily.

View all my reviews

Share

Review: The Web Design Business Kit by Brendon Sinclair (SitePoint)

The Web Design Business Kit 2.0The Web Design Business Kit 2.0 by Brendon Sinclair

My rating: 5 of 5 stars

This SitePoint kit is packed with actionable advice and recommendations for web design and development businesses. The author draws on 10 years of firsthand experience plus tips from other successful web professionals. It’s a well-organized, easy read with summaries and key points. There are plenty of anecdotes and case studies to illustrate the concepts. Overall, it’s both practical and incredibly motivational. I highly recommend it!

One thing that stands out is how much time Sinclair devotes to hobnobbing with prospects and clients. As the executive director of his web development and marketing firm, he has other people to do the actual design and development work, giving him time to spend on socializing and marketing. Since I’m running OptimWise as a freelancer, I need time to build websites as well as find prospects and keep in touch with clients. However, I fully acknowledge the importance of working on your business as well as in it.

My favorite topics were pitching, marketing, developing your unique advantage, sales and add-on sales, and client relations. A few topics weren’t relevant to me at this time, such as finding large clients, managing employees, finding an office, and expanding the business.

A second binder contains sample documents including a business plan, promotional letters, thank you letters, proposals, and contracts/service agreements. These weren’t as helpful as I thought they’d be, probably because I’ve already looked at so many examples when creating my own.

Major points

It’s never about the price. It’s about the perceived value for money.
Contact + care = profits. Communicate regularly with clients and provide superior service. Build a database of prospects and clients, including their birthdays, interests, etc., and use this to find reasons to contact them.
Rewarded behavior gets repeated. Send thank-yous and gifts to clients, business partners, contractors, and referrers.
View sales as creating long-term relationships, not making short-term transactions.
Pre-qualify clients by asking lots of questions to understand their true needs.
Most work will come via word-of-mouth, within a 50 mile radius from you.

Presentation and perception

Clients don’t care about your abilities. They only care about whether you’ll make them money. So, they judge you on dress, communication, and professionalism.
The client’s perception of you is reality, regardless of facts. Present yourself as skilled and successful.

Marketing

Ask clients how they found you or your competitors, then use those marketing channels.
Your marketing message: tell the prospect their problem (such as not making enough money), then offer the solution: a better website. Finally, ask them to contact you. Be professional but entertaining to stand out.
Don’t provide free work unless there’s an obvious and achievable benefit, such as referrals, publicity, making a good portfolio piece, etc.

Promotional options

  • write articles
  • hold seminars
  • ask for referrals, especially from local computer and Internet businesses
  • write reports and offer them free
  • speak at events
  • send newsletters
  • attend networking events
  • write press releases

Pitches, proposals, and quotes

Your business exists to help your clients prosper. For business clients, this means making them more money.
Clients care more about convenience and value for money than price.
Provide a proposal, not a quote. A proposal includes recommendations and quantifiable benefits (financial or otherwise) of the site.
Ask the client what their budget is, in order to provide an accurate proposal.
Overcoming budget objections: break the proposal down into pieces to show the value of each, and complete the project in phases. Don’t give anything for free!
When a client says no, they often just mean, “not now.”

How to pitch to prospects

Put on a show, demonstrate expertise, and charge accordingly.

  1. Demonstrate your expertise by mentioning your experience and results.
  2. Tell stories and anecdotes.
  3. Prove your credibility with testimonials or media appearances.
  4. Leave price until the end, once you’ve quantified benefits.

Pricing

Don’t charge hourly or match your competition’s pricing; those don’t scale. Charge based on the value you deliver to the client.
Charge clients up front a 50% deposit plus the cost of purchases made on behalf of the client.

Sales

Sales isn’t manipulating people to do something they don’t really want to do; it’s persuading people to do what they want to do.
Tell prospects and clients what their problems are, then offer the solution.
Show clients that you can make their business succeed and be better than their competition.

Offer superior service, not price, as your unique selling proposition.
Communicate regularly with prospects, clients, and even prospects who’ve rejected you. The more contact, the more sales.
The longer you spend with prospects, the more likely they are to buy.
Ask for the sale. Don’t just send a quote. Walk through the proposal, then ask, “Would you like us to work on this with you?”

Repeat and add-on sales

Offer add-on sales to existing clients. Educate them about new technology and trends and propose adding them to their sites. Recommend add-ons when nearing completion of the initial site, and also after launching the site.
Don’t offer add-ons as options; offer them as custom solutions you recommended. Clients want solutions, not a range of choices.
Don’t include maintenance in the initial proposal. Say that you’ll provide a proposal later, near the end of the initial design. Propose when about 75% complete. They’ll be more likely to agree because they’re financially and emotionally committed to the site.

Client relations

Service is more important than product or price.
Show clients you care by keeping them informed.
Satisfied clients won’t stay with you; only delighted ones will. Exceed their expectations, and make sure they know it by telling them what extras you’ve given them.
Stay in the minds of prospects and clients by using phone calls, handwritten thank-yous, occasion cards, and gifts.

When the client asks for something out of scope, say, “Good idea. I can do that for $x and it will delay the site y days. Would you like to proceed?”
Actively seek out complaints to learn how to improve and satisfy clients.
Don’t undervalue your skills by making your work sound easy.
When possible, buy from your clients’ businesses to show your support.

Legal

In your agreement letter, state that payment of invoice represents agreement to terms.

View all my reviews

Share

OptimWise.com redesigned around new logo

OptimWise logo

I redesigned OptimWise.com to feature a new color scheme and a responsive design that adapts to fit your screen size, so it works on smartphones, tablets, and traditional computers.

My friend Todd Karsemeyer of DESiGNTEK Graphics created the new logo which represents the Web and optimization, and hints at the letters “O” and “W” for OptimWise.

The WordPress theme, OptimWise 2.0, is a child theme of Twenty Eleven, inspired by WPBeginner.com’s Speaky theme.

Share

Review: The Principles of Beautiful Web Design by Jason Beaird

The Principles of Beautiful Web DesignThe Principles of Beautiful Web Design by Jason Beaird

My rating: 5 of 5 stars

An excellent introduction to the artistic side of web design. Beaird teaches that a site’s design should reinforce the identity of the organization, and expertly shows how to use layout and composition, color, texture, typography, and imagery. He explains the concepts of design theory, then applies them to a website that he builds throughout the book.

The book is full of colorful illustrations and screenshots from many websites. I read the first edition from 2007, so the specific CSS and graphics tips are slightly dated, but the theory is timeless.

I really liked this book; it was nice to take a break from reading about HTML and CSS to learn about the art involved in web design. Below are the notes I took while reading.

Layout & composition

  • Use a 9-square grid for layouts. This follows the rule of thirds, which approximates the Golden Ratio.

Color

  • To choose a color scheme, think about the feelings you want to inspire in the target audience.
  • Use the Color Scheme Designer to choose colors.
  • Use warm colors for emphasis and cool colors for backgrounds and large elements.
  • Use a standout color for the navigation or header.
  • Use Jonathan Snook’s Colour Contrast Check to confirm that there’s enough contrast between colors.

Color associations

  • Red: stimulates adrenaline and blood pressure, and increases metabolism. Exciting, dramatic, and rich. Color of passion and love. Darker shades such as burgundy and maroon are rich and indulgent. Earthy, brownish shades associated with fall and harvest.
  • Orange: active and energetic. Promotes happiness. Represents sunshine, enthusiasm, creativity. Informal, not corporate. Stimulates metabolism and appetite; great for food and cooking.
  • Yellow: active and visible. Associated with happiness and energy.
  • Green: associated with nature. Soothing color symbolizing growth, freshness, and hope. Easier on the eyes than yellow, orange, or red.
  • Blue: openness, intelligence, faith. Calms and reduces appetite. Sometimes symbol of bad luck and trouble. Associated with water, sky, and air. Conveys sense of stability and clarity of purpose.
  • Purple: royalty and power, wealth and extravagance. Connected with flowers, gemstones, and sunsets.
  • White: clean; the color of perfection, light, and beauty.
  • Black: often has negative connotations such as death and evil, but can also represent power, elegance, and strength.

Texture

  • Make the layout feel less geometric/rectangular, and more smooth and organic.
  • Rounded corners provide a smoother, more organic feel.
  • Include familiar organic shapes.
  • Break up vertical lines.
  • Incorporate 3D space using light and shadow.

Typography

  • Choose fonts that elicit the right emotions in the audience.
  • Typophile.com is a great place to learn and discuss typography.
  • Compare font settings with Typetester.org.
  • Use a sans serif font for body text.
  • Don’t use more than 4 fonts in a website. Avoid combining 2 different serif fonts or 2 different sans serif fonts.
  • Free and shareware font galleries: 1001fonts.com and DaFont.com.

Imagery

View all my reviews

Share

Review: Creating a Website: the Missing Manual by Matthew MacDonald

Creating a Website: the Missing ManualCreating a Website: the Missing Manual by Matthew MacDonald

My rating: 3 of 5 stars

This book is a decent introduction to many topics related to web design; too many topics, in my opinion. I expected the HTML, CSS, and JavaScript, but a large part of the book teaches how to use Twitter, Facebook, Blogger, and other sites and services, which seemed beyond the scope of building a website. It also covers website promotion (including SEO, analytics, and community-building), monetization, and multimedia.

The book is full of clear, understandable code snippets and screenshots. It presents HTML5 throughout, and encourages the use of new HTML5 structural elements in place of divs for more semantic markup, with caveats about browser compatibility. I was pleasantly surprised by how much space was given to JavaScript, and really liked the JavaScript 101 chapter.

HTML editors

Free HTML editors

Commercial HTML editors

Free graphics programs

Graphics & stock photography

Free graphics & stock photography

Commercial graphics & stock photography

JavaScript resources

Button generators

Web design tips & advice

  • The button element is more powerful than the input element for buttons, because you can control the content on the button’s face.
  • Use the Web Developer extension to test browser window sizes.
  • Use CSSStickyFooter.com for code to create a footer that sticks to the bottom of the page.
  • Use relative positioning to keep layouts flexible, but use absolute as necessary for smaller regions.
  • For SEO, set page titles to the page description followed by the organization or site name.
  • Use the HTML5 Shim to add support for HTML5 elements to non-compliant browsers.

View all my reviews

Share

Review: CSS Web Site Design by Eric A. Meyer

CSS Web Site Design Hands on Training (Hands-On Training)CSS Web Site Design Hands on Training by Eric A. Meyer

My rating: 3 of 5 stars

An elementary, step-by-step illustrated guide by CSS master Eric Meyer. The book’s a good introduction to CSS, but it only covers the basics; it uses a simple, 2-column site for demonstrations, and doesn’t provide any advanced CSS techniques. Each lesson includes CSS snippets, then shows screenshots of the results in a browser, then explains the mechanics of the CSS being demonstrated. Meyer plays with the CSS quite a bit to show the effects of various changes.

Meyer stresses the importance of separating style from content. He also advises using scaling factors, such as multipliers, rather than length- or em-based measurements whenever possible.

The book was published in 2007 so it covers CSS2, and barely mentions CSS3. If you have access to Lynda.com, watch the video version of this book: CSS Web Site Design.

View all my reviews

Share

Best web design podcasts

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 art

Boagworld’s Boos

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

boagworld's boos art

SitePoint Podcast

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

SitePoint Podcast art

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!

PageBreak Podcast art

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.

freelance jam podcast art

Designer Roundtable Podcast

A podcast about design, business and freelance.

Designer Roundtable art

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 Big Web Show art

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.

The Web Ahead art

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)

Einstein Sock Monkey art

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.

Think Vitamin Radio art

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.

design festival art

ExplicitWeb Design & Development

ExplicitWeb Design & Development art

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.

This Week in Web Design art

Share

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

Starting Your Career as a Freelance Web DesignerStarting 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

Share

Freelance Jam: podcast for web freelancers

freelance jam podcast artThis 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.

Share