inspire: retail design blog » Web stuff

John Lewis celebrates London Design week

Nick — Fri, 06 Sep 2013 16:32:39 +0000

How? With an interactive infographic of course …

Brought to you by John Lewis.

You can get a better/friendlier view of the whole thing here, or use your keyboard arrow keys to scroll.

The new Waitrose website

Nick — Thu, 10 Mar 2011 14:58:44 +0000

Today Waitrose launched their new website. Overall a more streamlined sophisticated look with more to do on the home page.

Gone is the enormous site map in the footer replaced with a neater version. Navigation is cleaner and the ‘value’ bright green is replaced with a more elegant textured brown and olive green.

In the details of particular note are the areas on the introductory slideshow where icons give the viewer the option to click and see more information. In the bricks and mortar world, this ‘getting to know the store’ time is called a decompression zone, here on a website this type of interaction as well as the other tabbed layouts beneath the slideshow create a lot of interest on the home page. Also of note is that these longer home pages look good on a vertical iPad. Starting to see more websites that make better use of the lower half of a vertical screen.

For posterity, below is the old Waitrose website. Here’s the new one www.waitrose.com

The big image

Nick — Sat, 04 Sep 2010 07:00:58 +0000

There’s a trend in website design to use large background images to add a larger sense of place to screens. These images should be scaleable so they fit into whatever size window you’re using. Some sites have a random rotating image, some are more static. Some use a bit of javascript, or you can just use css and html (our preferred method, see below) and some use flash. Using images this big though means you can’t get away with using photographs or illustrations that are amateur, so the investment in quality images becomes even more important. Also if you use stock images you’ll need to make sure that they’re not ones that have been used by a large amount of websites especially amongst your competitors, that just makes you look cheap.

Because we’re immersed into all things bakery (see Greggs) here we came across this site yesterday for Le Pain de Quotidien, this uses flash to add a random image from a selection every time you visit, refresh the page to see how it works. The photography is fantastic, scales well to fit large screens and loads quickly, all the things you need. This is one of the ways to get across the quality of your goods in a medium when customers can’t touch anything.

A large background image technique

To create a large image for a background there a few ways of doing it. Here’s our preferred method.

The image

We use images that are around 1500 x 1000 pixels and that have been optimised in Photoshop. If the image isn’t optimised then loading times can be much to long to make using this technique worthwhile.

The css

First add a few lines to your css file.

The first line creates the dimensions for the body of the page, the second adds a dimension for the background image including positioning the image for IE6 (yes, incredibly we still have to work with this), the third line positions the background image for IE7 onwards and other browsers and fixes it in place. The last line adds the position to your content div.
/*** Background image ***/ body, html { height: auto; width:100% } img.bg { min-height: 100%; min-width: 1024px; width: 100%; position: absolute; top: 0; left: 0; } html>body img.bg { position: fixed; } #content { position: relative; }

The html

This is mark up for WordPress. If you’re not using WordPress then change the file path for the image source to whatever works for you.

/images/background.jpg" />



Your content goes in here

Some examples

Thomas Peatling (this also includes a rotator script that adds a random image from a selection every time a different page is loaded, refresh the page to see it in action)

Jempsons

Thanks

The original post we used is here on CSS Tricks

Cox Cookies & Cake

Nick — Fri, 03 Sep 2010 08:12:05 +0000

Patrick Cox opened a new venture in Soho on Tuesday. Cox Cookies & Cake takes the current trend for all things cup cake/indulgence and adds a big dose of Soho neon chic.

The website as yet isn’t live but shows the intent with an animated neon identity, and thank goodness for a sign up form.

The website is at www.coxcookiesandcake.com their Facebook page is here.

Also on a cupcake note the recent Cupcake Champion of Great Britain 2010 (yes there is one) was David Bennett of the Sunshine Bakery in Chapel Allerton, Leeds, here’s his website www.sunshinebakeryleeds.co.uk.

National Cupcake Week takes place from 13-19 September 2010, you can follow them on twitter.com/CupcakeWeek.

More ecommerce retail design

Nick — Thu, 02 Sep 2010 10:59:22 +0000

It wasn’t just Apple who launched their new season’s range yesterday. Over the past week or so a couple of big players in the fashion stakes have added ecommerce to their UK sites.

Gap and Zara have very different approaches. The Gap model is pretty standard while Zara goes for the big centre stage image route as well as a lot more readable content and options for iPhone, iPad as well as Lookbook, Magazine (coming soon) and video.

Links:

www.apple.com

www.gap.eu

www.zara.com

Also worth a read is Econsultacy’s review of the new Gap website

Ecommerce checklist

Nick — Thu, 02 Sep 2010 07:15:39 +0000

If you’re setting up shop online there’s a lot of questions you need to have the answers for, here’s 80 to start with:

Why do you want an ecommerce website?
What has lead you to this decision?
What are your expectations of having an online store? (turnover/profit, life change, more spare time/less spare time)
What is your USP?
Are you competing on price?
Who are your competitors?
Who are your current customers? (age, demographic, socioeconomic)
What is you average basket spend?
Where do they live?
How/who will you drive traffic to it?
What is your turnover/profit now?
What do you expect the turnover/profit of the online store to be in year 2? (probably rule out year 1 making any profit)
Where will you be advertising?
Do you have a your social media strategy (beyond writing stuff to drive traffic)?
Do you have a (permission based) customer database that you can email market to?
Do you have an EPOS system, if so what data do you have, what can you export in what format?
Does your EPOS provider offer a an ecommerce website development service of some sort?
Does your EPOS provider offer website design and development? (Check their case studies, is the quality of their design up to scratch?)
What accounting package do you use?
Would you expect to be able to download sales data to integrate with your accounting package?
How many SKUs do you hold?
How many SKUs per product on average?
Will you offer your whole product range/a subset or a restricted range?
Do you want to have a search form on the website?
Who will be responsible when a product is sold out for updating the site to unpublish the product (potentially out of normal working hours)?
Do you have an established product/SKU coding scheme?
Do you have a set of store policies/procedures that you can carry over to the website, e.g. reporting structure, daily sales etc?
Do you offer warranties and guarantees?
Do you want to offer promotion codes? with what sort of discounts?
Do you want to show featured products on the home page?
What countries will you be selling to?
How will you fulfil orders?
Who will fulfil orders?
What carrier will you use?
How will the products be packaged?
Are you insured for losses in transit?
What promises will you make, e.g. 24 hour delivery, free returns etc.?
Will you use a different telephone number to your current one, e.g. an 0800 freephone number?
Will your shipping be based on weight, cost or size?
Is the delivery charge built into your cost or is it added at checkout? Will you offer free delivery above a certain amount?
Who will be responsible for running and maintaining the online store on a daily basis (including after hours and weekends)?
Who will write your content?
Who will provide product photography? or do you have a decent enough camera and are proficient enough to take quality product photography?
Do you have any software that you can use to crop and resize images before you upload them?
Do you use a PC or a Mac?
Who will provide product categories, descriptions and prices?
Who do you expect to upload your initial content including products, us or you?
How will product photography be provided?
When you have a new product that needs photographing, who will do it and what is their turnaround?
What other websites do you like and why?
If you have a current identity do you want to keep it and if so do you have artwork and guidelines for its use?
How do you expect customers to pay?
Do you want to use PayPal or do you want to go directly to your bank account via a merchant account?
Do you have a business PayPal account or alternatively an ecommerce merchant account with your bank?
Do you understand the advantage/disadvantage of using PayPal versus a payment gateway that connects to your ecommerce merchant account?
Who do you bank with? (this is important if you’re going to use a payment gateway as not all shopping cart software is compatible with all banks ‘out of the box’)
Have you discussed this site with your bank?
Do you want customers to have to register on your site?
How many pages other than product pages will you need (e.g. about us, location etc)?
How many products do you want to put on your site to start with?
What are the categories for your products?
Do you have a sitemap or navigation plan drawn up?
Sites we build include weekly database back up, who is responsible for storing this (it’s sent by email every week)?
Do you want your products to appear in Google Merchant Center?
Do you want to send your products to price comparison websites?
Do you intend your site to carry advertising of any sort?
Do you have a domain?
Where is your domain hosted?
Do you want to continue with your current hosting set up?
Have you bought an SSL certificate (necessary for secure transactions)?
Do you have other online presences that need integrating into or setting up for the site e.g. twitter, flickr, facebook etc.
Will you want a blog/news/updates page?
How will you launch the site? quietly to one person at a time, with a party, or somewhere in between?
What media routes do you use that will be useful to publicise your new website?
What’s your budget?
Why did you decide on that figure?
How much have you budgeted for ongoing updates/marketing/maintenance etc.?
Who will maintain and administer your website (inhouse, external, level of expertise etc)?
Does your business need to be VAT registered? (Current threshold is £70,000)
If your business will need to be VAT registered in the future have you included VAT (at January 2011 rates, i.e. 20%) in your cashflow projections?

Mood board heaven

Nick — Wed, 21 Jul 2010 11:32:29 +0000

No sooner than we talked about the need to create an online mood board app than along cam Pinterest. A doddle to use and very addictive and of course super useful.

Sign in with twitter, create pin boards, pin images from web pages (unfortunately not from Google Reader) upload images and follow other users.

Still got 4 invites left so add your name to the comments if you want one.

Setting up shop – online

Nick — Mon, 12 Jul 2010 08:49:14 +0000

If you’re thinking about setting up an ecommerce or mail order shop, or even adding ecommerce functionality to your website you need to be aware of UK distance selling and e-commerce regulations.

Here’s a link from Out-law.com to help in writing those all important terms & conditions. Also much more useful ecommerce set up information on the site.

Rapha Cycle Club

Nick — Thu, 01 Jul 2010 11:41:36 +0000

A good piece about the Rapha Cycle Club café from Noisy Decent Graphics.

Also worth looking at his flickr group of the café. The Rapha website’s not too shabby either and a nice video on Monocle.

These days there’s no reason not to have a shop, a pop up shop, a twitter, a facebook page, a van, go to festivals, write a book, a photo essay, a magazine, have a loyalty card, a website, a microsite, a tumblr, a flavors.me, print a t-shirt the list goes on. Brands that market themselves as authentic and have an idea win. Those that buy off the shelf and stick their logo on, fail.

Update: just came across another piece about Rapha here on everydaylife.style loads more to explore on there too.

The Mid-Century Modernist

Nick — Fri, 25 Jun 2010 17:00:17 +0000

We really like this redesign of The Mid-Century Modernist, especially how the gallery is done, pulling in and displaying ebay auctions. All done in WordPress.

Originally spotted (I think) from Erik Spiekermann’s twitter.