Shopify Expert Insights

E-Com Advice from our experienced in-house team
A Password Alternative: No More Passwords
by Kurt Elster
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.
Shopify Website Launch Review Checklist
by Kurt Elster
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. :)
Our summer design intern says goodbye
by Kurt Elster


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.
Pixel Density / Viewing Distance Calculator Webapp
by Kurt Elster

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 do Retina Displays mean for my website?
by Kurt Elster
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:
One Simple Excercise to Learn the Photoshop Pen Tool
by Kurt Elster
For years, the pen tool taunted me. It sat in my toolbar, mocking me with its steep learning curve. Finally I mastered the tool with a simple exercise. I signed a sheet of paper with a large marker, scanned it in to Illustrator, and spent two hours forcing myself to outline it using the pen tool. I faced my fear, and you should too:


Skip ahead to 3 minutes for the basics.
Use Card Sorting to Develop Sitemaps [Information Architecture]
by Kurt Elster

Card sorting is a straight-forward approach to include your client in the information architecture phase of the website design process. A card sorting exercise will allow you to form the structure of a website, organize it logically, and even determine labels.

It works amazingly well, physically mapping out the geography of thought processes is super productive.

There are two kinds of card sorting: open or closed. In open, participants sort cards in to related categories, and are then asked to give each category a name. In closed, participants sort cards into existing categories. When starting a new site, we use open. Closed is good for testing existing labels.

Running your own card sort is easy:

  1. Make a list of the top 100 most important content in the project: pages, topics, & features. Everything if necessary.
  2. Label index cards with each topic from that content inventory list.
  3. Include blank cards for new (or missed) topics.
    4. <
  4. Shuffle the cards, then spread them out on a large work surface.
  5. Ask participants to sort the cards in to related groups.
  6. If this is an open card sort, ask the participant to label each category.
  7. Photograph the results, reshuffle, and repeat as necessary.

According to usability guru Jakob Nielsen, you must test fifteen users to generate statistically reliable results.
Device Testing Lab
by Kurt Elster


To make our work accessible to the widest audience, we've begun collecting and testing on a wide variety of devices.

We want to explore how our products perform on the widest variety of form factors, screen sizes, performance, operating systems, display densities, and screen conditions.

If you have a device that you'd like to recycle, let us know, and we'll send you a box to donate it.

Presently we have two Android devices in the collection. Based on our analytics data for mobile usage, we think it's important to add the following devices:
HTC Droid Incredible I, II
HTC EVO 4G
Samsung Galaxy Nexus, S II
Sony Ericsson Xperia arc
Starting a Business? Ask Yourself Tough Questions
by Kurt Elster
Over the years, we have noticed a disturbing flaw among new entrepreneurs and start-ups: You have an aversion to planning or critically thinking about your idea in general. That leaves us, your partners, and sometimes even your customers in the awkward position of figuring out how your business works for you. Asking yourself tough questions will prepare your business for success.  

Write a business plan. It's an important thought exercise to put your ideas on paper and help you think through things you might not have otherwise. It is not a set of shackles that will prevent you from ever changing your business ever. You can deviate it from the plan, it's okay. The Small Business Administration has an online walkthrough for writing a basic business plan.

Determine and be willing to discuss your budget. Entrepreneurs seem not only tight-lipped about their budgets, but downright ashamed to even talk about money. Stop it. Cash is the lifeblood of every business. While it's rude to ask strangers their salary, it is vital to your business to estimate start-up costs, operating expenses, and projected cash flow.

Determine how people will hear about you. We can tell you how it won't happen. It will not go viral on social media, bloggers will not give you free publicity, and no one will just find it on Google through the magic of SEO. You like these things because they sound sexy and you think they're free. Partnering with other businesses, give-aways, networking, and Pay Per Click advertising are realistic marketing channels that everyone can use. Your budget and your target market should determine what marketing channels are best for you.

It's your business, if you want to succeed, put in the sweat equity that other successful businesses have. Don't start by sketching a logo on a bar napkin, start by asking yourself the tough questions. You will run in to problems, planning ahead will help prepare your business to get ahead.