Grow your store with our weekly podcasts, videos, and letters. JOIN NOW
Ethercycle logo
Users don't read, they skim. If they can't skim, they leave. We can make our websites skim-friendly by establishing rules of good typography.

Body copy should be 16px. 
This might look huge in your Word Document, but it won't on the web. You're not writing a thesis paper for a professor, you're writing to sell.

Line spacing should be 1.5. 
I know what you're thinking. "But the page will be so long!" That's true, but pixels are free and users have known how to scroll since the nineties.

Line lengths should be 52-78 characters. 
Remember newspapers? (I'm sure someone still reads them.) Ever wonder why they use multiple columns of text instead of just one really wide column? It's because there's an ideal width to improve readability. Any given line of text should be between two and three alphabets long.

Use almost black text on an almost white background. 
At a glance, the user will think it's just black on white text, but the text will look slightly smoother than usual. This is because we've given the operating system's anti-aliasing some breathing room to do sub-pixel hinting on our font. (The explanation is a bit technical for me, too, but I know it works.)

What are your biggest annoyances when trying to read a website? Tell us on Twitter: @ethercycle
 
We've seen a lot of designers & developers argue what the best way to approach responsive workflows is, but I don't think there's a universally right way.

We approach it by designing the PSD on a 12 column grid layout for a 1920x1080 monitor. It's then developed mobile first, using the designer's input as creative direction. From there, development is continued iteratively until a mostly fluid layout is achieved that matches the PSD.

Other people advocate designing entirely in the browser, designing only moodboards and elements, or going extreme and designing multiple layouts for every targeted device & width.

The only universal truth to all responsive design workflows is that developers have more artistic input to the final product than in traditional waterfall processes.

There's no doubt: AdWords is getting more competitive, average CPC is going up, and that drives down ROI for small business. The Quality Score algorithm is too complicated for a non-tech savvy business owner, so low quality scores will also be a culprit in driving up click prices.


We've recently had success by experimenting with AdWords device targeting. For one of our ecommerce clients, we were able to triple their click-through rates by targeting only tablets that are on WiFi. We know the audience is significantly more likely to be browsing from home on the couch when they're more likely to make a purchase. (Source: Nielsen). We also know that tablet users, and iPad users specifically, are more likely to convert to customers online.


In addition to having a more engaged audience, the other advantage to tablet-only AdWords campaigns is significantly reduced competition. Despite the explosion in mobile devices, many retailers, small businesses especially, have been unable to update their websites to properly accommodate users not on a traditional computer. It seems their solution has been to exclude mobile devices and limit their AdWords campaigns to only desktops.

US Mobile Device Statistics, August 2012

What are the top smartphones and mobile devices in the US?

Top 10 Mobile Devices*
  1. Apple iPhone - 50.72%
  2. Apple iPad - 12.77%
  3. SonyEricsson LT15i - 6.37%
  4. Apple iPod Touch - 4.31%
  5. Samsung Galaxy Nexus - 1.86%
  6. Motorola DroidX - 1.18%
  7. HTC ADR6350 Droid Incredible 2 - 1.04%
  8. Motorola xt875 Droid Bionic - 1.02%
  9. HTC ADR6300 Incredible - 1%
  10. Samsung SPH-D710 - 0.92%

  11. *Though these 10 represent most of the landscape, there were 141 unique devices, most of them Android.

    What is smartphone marketshare in the US?

    Mobile Operating Systems:
    1. iOS - 67.3%
    2. Android - 32%
    3. BlackBerry - 0.65%
    4. Windows Phone - 0.54%
    5. SymbianOS - 0.04%
    6. Windows - 0.02%

    7. Based on 99,892 new US visitors to calmingmanatee.com
      After Mat Honan's "Epic Hacking" made national news, we've been thinking a lot about security. Two-factor authentication is finally being embraced, but that doesn't solve some of the fundamental problems with passwords.

      Password are annoying. People make them less annoying for themselves by setting the same password for all of their services. This is dangerous because their password is the only as secure as the weakest service they've registered on. It only takes one weak service to be breached, and suddenly your entire life is laid bare (and in Mat's case, deleted.)

      The most direct way to solve the password problem would be to eliminate passwords entirely for websites. It's not ridiculous at all. When you register for a website, you have to click on a link in your email to confirm your password. When you forget your password, you have to click on a link in your email. With all that emailing, why not just email a login link? No password would ever be necessary. To sign in, the user types their email address in to a login form, clicks submit, and an email arrives with a link to login with no password.

      In this scenario, your email service would still need a password. It's still a huge improvement as you would only need to remember one password, and a service like Gmail which supports two-factor and SSL is far more secure than the parakeet enthusiasts' forum you frequent.

      In 2004, Bill Gates declared the password dead. Seven years later, it's time to make that happen.
      Whether you're submitting a theme to the Shopify Theme Store, or launching one for your own shop, you'll need to answer "yes" to the following questions:

      Is all included material original? 
      Do all links work?
      Is copy edited and error free?
      Does JavaScript behave as expected, and with a minimum of resources?
      Do pages load quickly?
      Does the site work in Chrome for Mac - Current Version, and one previous versions?
      Does the site work in Chrome for Windows - Current Version, and one previous versions?
      Does the site work in Firefox for Mac - Current Version, and one previous versions?
      Does the site work in Firefox for Windows - Current Version, and one previous versions?
      Does the site work in Internet Explorer 7,8,and 9?
      Does the site viewable in Internet Explorer 6? (It doesn't have to look good, just work)

      To improve usability and reach a wider audience, we suggest you also check:

      Does the site work on Android devices?
      Does the site work on iPad?
      Does the site work on iPhone?
      Does the site work in Safari - Current Version, and two previous versions?
      Do images have alt-text?
      Is the site usable at 1024x768?
      Is the site usable at 1920x1080?

      As an experienced Shopify template designer, you're already doing these things. :)


      A goodbye blog post from Sam Peniak, our summer design intern.

      Over the summer, I interned at Ethercycle, and it was just such an awesome experience. They provided me with the tools and resources to further my career, like a Dribbble Pro account, lunch time shop talks, and a going away present from FieldNotes. I had a great time with the awesome Ethercycle guys, and learned a lot.

      Their team is fun, light-hearted, easy to communicate with, helpful, resourceful, and determined. I learned the most about mobile UI while designing my Run Rewards app/website with them, while strengthening my design skills in general. I feel more comfortable with logo design, UI design, typography, etc, but I know there is always room for improvement. 

      Beyond design, I learned how choosing the right clients can make or break a designer. I saw how great client work with the right client can be. I also learned that success on Dribbble is about presentation: angled screenshots of iPhones with awesome UI design are 'like' bait. I ultimately learned that working at Ethercycle is fun, interesting, and rewarding.

      If I had more time, I would have learned development, how to code a website, improve my knowledge of HTML and CSS, and get up to date. Learn how to design a responsive website in its entirety would be great.

      Thank you for everything, Ethercycle. It was an amazing experience.

      Is This Retina? - http://isthisretina.com/

      While trying to choose an external monitor to pair with a new MacBook Pro, we were left wondering about every display, "Is it retina?"

      In response to this seemingly simple need, we built an online tool that calculates display density based on size, and then determines at what viewing distance the display will be considered retina-equivalent.

      (We still aren't sure which monitor to pair with that MacBook Pro though.)
      What is retina?
      Retina is Apple's trademark for a display so sharp that the human eye is unable to distinguish between pixels at a typical viewing distance. As Steve Jobs said: "It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels."

      Why does retina matter?
      Because website graphics not prepared for retina will look fuzzy. They don't just look a little fuzzy, they look downright crappy (and I don't even have 20/20 vision.)

      The technology to make the "retina" effect possible requires previously unheard of displays resolutions. For example, the new iPad has a display density that's more than twice as sharp as 21.5" "Full HD" monitor. Even a Blu-Ray movie is not high-enough resolution to take up the full width of a new iPad display. It would have to be stretched or "pixel-doubled." This processing is what results in fuzzy graphics.  

      How do we support it?
      Fortunately there's hope. By moving away from photographic images, and using vector graphics instead, we can make websites which render on and scale to whatever device you have. Fonts, SVG, and CSS3 effects are all valid solutions. (This should be best practice anyway as it creates far more flexible sites.) 

      In some cases photographs must still be used and that's okay. The solution then is to sacrifice page speed and load double size images. To maintain small file sizes, this should be done sparingly.

      Further Reading: