Three Quick Links: Shop Planning

three quick tips for shop planning graphic

Today I’ve got three great resources relevant for shop owners and those who want to eventually open up shop online. I wrote earlier this week about why I believe photos are more important than a custom site for ecommerce (if you’ve got to chose where to focus your dollars) – this is kind of an extension of that, focused on wider planning and self-evaluation.

1

Shopify’s blog is an excellent resource for shop owners (not really surprising, except maybe for how good it is), and they posted some good expert tips for marketing online stores. I especially love #10, “Tell a Visual Story” (ahem, photos), and #4, “Never Stop Researching.”

2

To that point about research, here’s a great article about Google Analtyics reports for ecommerce. It’s specifically focused on helping you see where you’re losing potential visitors via 10 different useful reports.

3

Finally, for those of you who are just starting out, check out Aeolidia’s printable ecommerce checklist. Arianne’s put together a very helpful list of all the things to consider before opening up shop, from shipping to your about page text.

Images Matter More Than a Custom Site

photos matter more than a custom site

You might be surprised to hear me say this, since I make my living off of building custom sites, but I actually believe that quality images are more vital to the success of an e-commerce site than having a custom-designed and built website.

This is something I’ve been pondering since the summertime when I attended Nearly Impossible’s Brooklyn conference and heard all kinds of interesting things about building product-based businesses.

While I do think that having a custom-designed, well-branded shop website is eventually a great investment, if you’re figuring out how to spend your shop-starting dollars, I would probably put that third on the list at best. Maybe even lower. I almost exclusively recommend Shopify for e-commerce sites, and there are a lot of really beautiful “off-the-shelf” themes available via their site.

If it were me, I’d probably start with one of those themes and I’d put some money towards branding. A strong logo and brand identity are essential and it’s better to get that sorted out early so that you can build other things around it.

Then, I’d focus on representing the actual product as well as you possibly can. A huge, huge, huge part of that is photography, particularly for selling online. (Copywriting and marketing are also pretty high up there.)

Shopify recently posted some great tips for crafting excellent product images on their blog – I’d look at that, and also some product photo tips I wrote for the Aeolidia blog. It’s a lot of work, but some clients are able to do their own photography and do an excellent job.

But if your efforts aren’t up to par, spend some money. Hire an excellent photographer. Maybe hire a copywriter. If those things mean you’re going to have to hold off on the custom site, that’s okay – your fancy site won’t be as good if your photos and words aren’t up to the quality of the design anyway.

I’m convinced you’ll get farther faster, and be able to save up for that custom site, if you first focus on representing your product as best as possible. With online shopping, that means photography. A beautiful site will not be nearly as effective with subpar photography, but an off-the-shelf theme enhanced with amazing photos will absolutely generate sales.

Remember, every photo you put online is a chance to represent your brand and your product, so every single one should be crafted with those things in mind. This includes everything from color story to lighting to location to styling. This will also give you the added boost of having considered those things in advance, which will be helpful when you do get to design since you’ll have some of those brand guidelines to help set the direction of the site design.

Disclosure: Links to Shopify in this store are tied to my partner affiliate account. I love Shopify, it’s only e-commerce platform I work with, and that would be true affiliate or not.

Subtle CSS Gradients for Overlay Contrast

I’ve built a couple of sites recently where we’ve put text and buttons overlaying images. It’s a fairly common design pattern these days, but one that can pose a problem when the image selected for a given module isn’t a high enough contrast from the text.

Enter the gradient overlay!

Here’s a quick Codepen demo to show what this looks like, set up so that the gradient overlay shows up only on hover so that you can see the difference:

See the Pen Overlay Gradient as Caption Background by Zoe Rooney (@zoerooney) on CodePen.

I’ve got the caption overlaying the main element using absolute positioning. In this particular example, I have the image as a background on the main element so that I can scale it using background-size: cover; (this is also something I do in WordPress sites because I often need to get the file name in the template based on user settings for the page).

Then I’m using a pseudo element as an overlay between the background image and the caption and giving it a gradient background color to add contrast, making the caption easier to read.

Again, the demo only has the overlay on hover but that’s only so that you can see the contrast with and without it.

All the code is in the pen, but just for quick reference here’s how I have the overlay set up using Sass:

%gradient-overlay {
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }
}

The implementation typically goes something like this (this is way simplified, you can see more of the styling if you click through the full example):

.module {
    position: relative;
    @extend %gradient-overlay;
    .caption {
        position: absolute;
        width: 100%;
        bottom: 10%;
    }
}

In real life, I generally use a couple of media queries to make adjustments as it scales, but hopefully this is enough to get the concept across!

Different Paragraph and Image Widths in WordPress (for Readability)

I was talking with a client recently about blog post readability and line length, and how those things are hard to balance with wider column widths and nice large images.

Here are some good articles on line length, if you’re interested:

Once you’ve decided that you do indeed want to be careful about your line length, but you still want nice big images, things get a little tricky, particularly with a content management system like WordPress in the mix.

In theory, you’d just make your paragraphs narrower than your images by a small amount. This would keep the line lengths reasonable without having to adjust the font size too large or the image/ column size too narrow.

The problem is, WordPress wraps images in paragraph tags, so anything you do to the paragraph width will also impact your images.

If you don’t mind a little jQuery or javascript, you can fix this! Here’s what to do if you want your WP blog paragraphs narrower than your images:

I’ve done it recently in this site, as illustrated in this screenshot:

paragraph that is narrower than an image

You can even see it with this very paragraph compared to that screenshot (so meta)!

This took a little bit of jQuery and some CSS. Rather than take away the paragraph around the images (which seemed less reliable once you start to consider how the markup might change for captions, for example), I decided to add a class to those paragraphs.

This snippet went into my general theme.js file in my theme:

function imgParagraphs() {
    jQuery(document).ready(function($) {
        $('.post-body img.aligncenter, .post-body img.alignnone').each(function(){
            $(this).parents('p').addClass('img-parent');
        });
    });
}

It finds every image that is center aligned or has alignment set to “none” and gives their parent paragraphs the class img-parent.

I did not do this with right- and left-aligned images. The left-aligned images don’t need any modification, and I’m still messing with right-aligned images in this model, especially across various devices. (My general plan is that they are adjusted to the right via positioning for larger screens, then they become full width at smaller screens.)

Anyway, with that script in the main theme scripts file (which is loaded on each page, more on this centralized file method here), I added this to the blog template files:

<script>
    <!--
        imgParagraphs();
    //-->
</script>

This causes the relevant script to actually run on those pages (otherwise it just hangs out in the theme.js file not doing anything).

From there, I used CSS to alter the styling to add padding to the right of the paragraphs, and to take it away again on the image parent paragraphs:

// this is SCSS-formatted
.post .entry-content p {
    padding-right: 40px;
    &.img-parent {
        padding-right: 0;
    }
}

Maybe it’d be better to have that be a relative value (ems or percent) than a pixel value, that’s something I’d encourage you to explore if you try something similar!

Is line length something you consider on your site? How do you handle it?

Three Quick Links: Responsive Images

three quick links for responsive images graphic

I’ve been generally following along with the conversations out there on responsive images but haven’t really felt it necessary to deep dive and actually do things with code yet.

Ok, that’s not entirely true – I’ve made big shifts in how I work with layout graphics such that I use almost all CSS and SVG/ scalable graphics. But for content graphics, I’ve mostly just been keepin’ on and waiting for some of the early back and forth to resolve itself.

I think we’re there, just about, so I’ve finally committed to some reading on responsive content images – here are three great resources. While there are tons of great articles out there, these stand out as particularly useful on this topic:

1

Responsive Images in Practice, from A List Apart, is extremely long and in-depth. It’s everything you need to know to implement responsive content images using all the major, forward-looking techniques. Start here.

2

It’s basically impossible to learn about newer techniques without referencing CSS Tricks, so I won’t try. There’s a great article there that talks about how srcset is the thing to use if you’re just changing resolutions. It also links to a bunch of other interesting resources.

3

Finally, one of the big barriers to responsive content images is that most of us aren’t actually coding all our content images. Never fear, there’s a WordPress plugin that seems to be the standard for handling responsive content images. You can also use it for themes, although I’m not sure I’m convinced you should (instead probably work on not using bitmap graphics in themes, I think).


I think I’ll probably start tackling some of this code in my Shopify starter theme – that seems like a place where optimizing graphics like this could go a long way, and since Shopify generates a ton of image sizes it seems like it should work pretty well.

What are you thinking and reading about responsive images these days?