Lireo Designs

Creating usable website solutions

734.418.8604

6524 Durham Canton, MI 48187 USA

CSS Summit 2011 Day 1: CSS3 and Gradients by Lea Verou

By

This week I’m attending the CSS Summit 2011 conference, a two-day online conference with presentations from CSS experts from around the world.

CSS Summit 2011 logo

I attended the first CSS Summit two years ago, and it only gets better each year.

Lea Verou packed her presentation on CSS3 and gradients with example after example of what could be done with CSS3 gradients from multiple colors to striped backgrounds and more.

Here are my notes from her talk:

  • Gradients in CSS with bitmap background images have excellent cross-browser compatibility, but decrease page load speed with an extra HTTP request, and large file size. Plus making changes can be tedious as hell.
  • Need gradient to display on iPhone & iPad & older Webkit browsers? You need to use -webkit-gradient syntax.
  • You can add multiple colors to CSS3 gradients: syntax: background: linear-gradient(silver, deeppink, black);
  • CSS-based slide show by Lea Verou on Github
  • You can even create pie charts using CSS
  • CSS gradients in CSS3 are a lot easier to create and maintain.

Web Design Process, More or Less: Refresh Detroit July 2011

By

This week at Refresh Detroit, we had the pleasure of hosting Maria Gosur and Colleen Case for their talk about the web design process.

My key takeaways: it’s an ongoing process of five phases which overlap.

Know your goals and identify deliverables for each phase. Clients are your content experts. Project debrief informs you on what worked/didn’t work and how you can improve future projects.

Here’s some of the social conversation from their talk:

Lowe’s Self-Checkout: More Work Needed for Spanish Version

By

At my local Lowe’s store, when you’re ready to make your purchase at the self-checkout, you have the option to choose either English or Spanish for your checkout language.

The process is pretty straightforward. I chose Spanish on the first checkout screen, and was moving along with my purchase until this screen displayed:

Lowe's self-checkout with English displaying in card reader while touchscreen displays Spanish

Look carefully.

Notice the instructions on the left screen are written in English, telling me to have my card ready to show the cashier. The touchpad on the right displays Spanish text, asking me to confirm the last four digits of my card.

If I only know Spanish, how can I be prepared to show the cashier my card?

Not a One-Time Mistake

While I thought this might be a one-time error, the next step in the process revealed a similar issue. English text displayed in the left screen, asking for my signature. The touchpad on the right screen repeats the left screen’s instructions in English. And asks me to touch the button named “Regresar.”

Card reader displays English while touchpad screen displays Spanish when finishing checkout

The “Regresar” button doesn’t exist. The only buttons I can select on the left screen are written in English, “Clear” and “Done”, words I wouldn’t know if I only speak Spanish.

Oops! Looks like some additional usability testing is needed.

Don’t get me wrong, I’m impressed with the outreach Lowe’s has made for Spanish-speaking consumers, with bilingual signage as well as the Spanish checkout option.

As I left the store, I told the Lowe’s staff member about the mix of English and Spanish content in the checkout process. She thanked me for telling her, replied no one else had mentioned the issue, and said she would tell her manager. Hopefully, Lowe’s will get it straightened out quickly.

Website Design

We consider your goals, audience, and content to present the best solution to fit your needs. Using best practices, we create a website that engages your visitors with clear calls to action. Contact us today.

WordPress Training

Whether you're a WordPress beginner or want to expand your WordPress knowledge, we offer WordPress training to fit your needs.

Optimization

Is your website being found? Our analysis of your website and competition will provide optimization strategies for improving your website traffic and ensuring people learn about your organization.