Review: HTML5: Up and Running by Mark Pilgrim

HTML5: Up and RunningHTML5: Up and Running by Mark Pilgrim

My rating: 3 of 5 stars

This short book is packed with HTML5 examples, aimed at those already familiar with HTML. Because I build websites, not web apps, I was more interested in the new semantic elements, forms, audio, and video than in canvas, geolocation, local storage, and offline web apps.

This book explains more of HTML’s history than other HTML5 books I’ve read, which I actually enjoyed. I didn’t know much about microdata, so it was enlightening to see how search engines can extract information from microdata to provide better search results, such as in Google Rich Snippets.

I liked Introducing HTML5 better (my review).

Notes

  • Use Modernizr to detect HTML5 support.
  • It’s OK to use more than one h1 per page, as long as each one is within a different sectioning element.

View all my reviews

Share

Review: Bulletproof Web Design by Dan Cederholm

Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSSBulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS by Dan Cederholm

My rating: 3 of 5 stars

The concepts behind “bulletproof” web design remain relevant, but the specific examples haven’t aged well. Using code snippets and screenshots, Cedarholm shows how to replace bloated code with lean, semantic, accessible markup. The goal is bulletproof design: thinking ahead and designing for multiple scenarios, and protecting content. The book covers flexible text, fluid layouts, and making content readable without images or CSS.

Cedarholm’s techniques were fine when the book was published in 2006, but some of them are outdated. For example, gradients and graphical rounded corners can now be done with CSS3.

I read this book because I liked the sequel, Handcrafted CSS (my review).

Notes

  • For flexible text, set font-size on the <body> element to a keyword like small. Set all other font sizes as percentages relative to the body size.
  • Use ems for margins and padding on text elements so they resize proportionately to the text.

View all my reviews

Share

Review: Handcrafted CSS: More Bulletproof Web Design by Dan Cederholm

Handcrafted CSS: More Bulletproof Web DesignHandcrafted CSS: More Bulletproof Web Design by Dan Cederholm

My rating: 4 of 5 stars

In this visual book, Dan Cedarholm and Ethan Marcotte demonstrate 3 principles of “handcrafted CSS” through several specific examples. The examples feature border-radius, RGBA, modular floats, fluid grids, typography, and jQuery. The examples won’t age well, but the concepts certainly will.

I liked the advice that one should be an “80 percenter”, focusing on the details that matter rather than obsessing over complex solutions. I read this book because it was listed in .net Magazine’s The top 25 books for web designers and developers.

Aspects of handcrafted CSS

  • bulletproof design: designing with flexibility and adaptability
  • progressive enrichment: rewarding advanced browsers while allowing others to degrade acceptably
  • reevaluation of past methods and best practices: finding easier, more efficient ways to solve problems

Notes

  • Opacity affects the transparency of the element and anything contained in it. RGBA affects only the transparency of the element’s background or color.
  • Check your site’s stats and design for the browsers your users use.
  • Find free fonts at Jos Buivenga’s exljbris Font Foundry.
  • target / context = result
    • target font size in px / font size of container in px = desired font size in ems
    • can also be used to calculate em or percentage based widths

View all my reviews

Share

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