Lauren Hills Design

Thursday, October 13, 2011

Is Your Site Ready For Mobile Commerce?

Many top websites have optimized their website for mobile or have mobile pages. So many sites have done this that smart phone users are beginning to expect that sites will have a mobile version. Pinching to enlarge and squinting at the content is no longer acceptable for many smart phone users. So is your website ready?

ShopSite is planning to have a mobile capability built into their next release where users will be redirected to a mobile optimized version of your website. So what do you need to do to prepare to use this upcoming feature?

Logo. Start by creating a mobile sized version of your logo. Many websites that you visit will have a header/logo area that takes up no more than 60-70 pixels of the top of the mobile screen.
Navigation. No doubt you have many different ways for users to find what they are looking for on your website, but since space is limited on a phone, narrow your main categories down to about 4 main categories that will be listed on every page. The first link should be a "home" link or a "categories" link so that customers can always return to your main list of store categories. The other three links should be your top categories, or your most interesting categories such as "sale" or "new items." Decide what 4 links you would like at the top of all your mobile pages.
Template Tags. If you are using built in templates within ShopSite, this is not an issue for you. However, if you are using custom templates, you will need to add the new mobile tags to your custom page and custom more information page template so that the redirect code will be included on your pages. Below are the two required template tags for mobile.
[-- MOBILE_JAVASCRIPT --] - goes within the <head></head> tags.
[-- SS_MOBILE_REDIRECT --] - goes right after the <body> tag.
Footer. Your footer should be simple but informative. Many merchants will include their company information links in their footer such as the "about us" page, the "shipping and returns information" page and "terms and conditions." If you have copyright information that you would like to include, you can include that in the footer as well.
Emails. Often, smart phone users have one or more of their email accounts tied to their phone, so when they receive an email, they can check that email without going to their computer. Because of this, you will want to make sure that ALL of your emails to customers are mobile optimized.

I am excited to delve more into the capabilities of mobile as there become more and more mobile users and mobile optimized websites causing mobile to evolve. If you are planning to have a mobile optimized website, make sure you keep up on mobile trends. This technology if rapidly expanding and changing.

Friday, September 9, 2011

Favorite Tips From American Express

On American Express's Open Forum blog they posted "30 Ways To Boost Sales Without Discounting." Below are my favorite of those tips.

1. Future-use coupons
Use wording such as "For every $50 you spend tonight, you get $10 off your next purchase of $50 or more." Your customers have an incentive to spend at least $50, and you'll get an additional $50 in purchases when they apply their future-use coupon.

9. Upsell
Have you trained your staff in the power of suggestion? Many restaurants do, but you might have overlooked it. Wait staff or counter staff should always have an upsell suggestion at the ready. "Would you like fries with that?" is only the beginning.

13. Shipping
Offer free shipping or faster shipping for purchases made within a certain time or over a certain dollar amount.

14. Bulk order rewards
Customers who buy in bulk get a reward of some kind, such as a free customer club membership or a free T-shirt or other promotional item.

15. Features
Highlight a particular item and put it front and center. Sales will increase just because it is "the featured item" even though it isn't discounted.

16. Customer reviews
Gather positive customer reviews and put them beside the product or service being offered. Testimonials are powerful.

30. Rewards and levels
Offer rewards, but tie them to dollar amounts or commitment levels. The greater purchase or commitment garners the greater reward.

You can view the complete list at: http://www.openforum.com/articles/30-ways-to-boost-sales-without-discounting

Sunday, August 21, 2011

Web Page Speed - How Does Your Site Rank? Pt 2

I did a post, Web Page Speed - How Does Your Site Rank? Pt 1, where I took my own website, optimized the images with image sprites, and tested how much of a difference it made in the page speed with Google. This time I would like to do the same thing with another website, a website with more images and other files such as JavaScript files, as well as add some server side optimization code that I read about in a blog post from LexiConn.com, Google’s Need For Speed (and 3 things you can do to meet that need).The site I will be working on is http://www.homeandstuff.com. They are a relatively new website (opened earlier this year). The site is getting a good amount of traffic, but I would like to see what a difference it will make to make these changes. Both the immediate difference seen on the speed in Google, and the long term difference. I will get an update on this website in a few weeks to see the progress.

Starting Out: 76/100
On the first test of the page speed, without making any changes, the site scored 76/100. There were both medium and low priority suggestions as well as some experimental suggestions. The first thing that I am going to do on this website is add in some additional code to the .htaccess file. The .htaccess file tells browsers a lot about your website. You can include security/login information, set controls, specify where 404 page not found errors go, etc. I got my information from LexiConn's blog and in the .htaccess file for this website I added the following code:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/x-js application/x-javascript application/javascript text/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js)$">
Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

After .htaccess Change: 88/100
Adding the caching settings to the .htaccess file did a lot for this website's page speed according to Google. One thing that you should note is that not all servers have this capability setup. If you add the code listed above, and when you view your website you get a 500 error, talk with your hosting provider about making sure the server is setup for this type of .htaccess file setting. Next I'll be changing the basics, no broken links or missing images, optimizing the order of CSS and JavaScript files, cleaning up HTML so that it is W3 Compliant.

Clean Up: 89/100
For cleaning up your website, there are a few different online tools that you can use. A common tool is Google Webmaster Tools. You can login to your Google Account, submit your website sitemap, and have Google analyze your website. In Google Webmaster Tools you will get things such as a list of duplicate titles, meta descriptions or meta keywords. You can get a list of missing or broken URLs and links, and other helpful information for cleaning up your website.To check if your website is W3 Compliant, I like to use http://validator.w3.org/. There are browser plug-ins that make checking this information easy, but you can just go to http://validator.w3.org/, type in your page URL, and see what, if any, errors come up. After fixing those errors, re-validate. For HomeAndStuff.com, there were 26 errors on the home page when I first validated it. However, after a few changes to match the DOCTYPE tag, all the errors have been fixed and it is passing W3C validation.

Image Sprites: 90/100
I only created one image sprite for 4 images, the rounded corners at the top and bottom of the page, as well as the navigation and sale background bars. The merchant could create image sprites for the logo image, the credit card image at the bottom, the phone number, and even the 2 images to the right of the banner. I would only suggest to create image sprites for images that are on more than one page, so the two images on the right of the banner, although they could be added into an image sprite, I would not suggest it.

Tuesday, August 9, 2011

How To Add A Tabbed Information Section On Your More Information Pages

Adding a tabbed information area on your product more information page is a request that I get fairly regularly. Adding tabbed sections to your product more information page gives you the ability to display more information for the customer, in an organized fashion, without taking up too much room. Tabs give the customer a sense of the information that you provide right at the beginning, and make it so that the customer can skip right to the information that they want without scrolling through your product more information page to find where the information is, or if you have that information at all. Here is a screenshot of what the tabs would look like:

I have added the JavaScript, CSS, images, and instructions needed for you to add this functionality into your own custom product template. You can read those instructions at http://laurenhillsdesign.com/ecommerce-tools/enhancement-product-more-information-tabs.html.

Friday, August 5, 2011

Web Page Speed - How Does Your Site Rank? Pt 1

It seems like lately many of my existing clients and some new clients have come to me worried about their page speed; I have had many emails referencing Google's Page Speed Online test page specifically. Yes, it is true that one of the factors on how your site ranks in Google is page speed, but it is only one factor of well over 100 factors. Some of the basics for making your page speed faster include caching, image sprites, and compressed files. I did a test on my own website to see how various factors affected my page speed according to Google's Page Speed Online: http://pagespeed.googlelabs.com/.

Starting Out: 82/100
I am beginning with a score of 82/100. Not bad, but not great. I had no High Priority suggestions, but I did have both Medium Priority and Low Priority. I am going to begin my testing by creating some image sprites. Image sprites are images that have many sub-images in them. For example, the Facebook buttons such as "like" "share" "send" etc, all use a sprite so that the little icon that is displayed changes based on what the button is for. All of those little icons, the thumbs up, the check mark, the text bubble, etc, are all part of the same image (see Facebook image sprite to the right). Before creating my image sprites, there were 9 images on my home page.

After Image Sprites: 90/100
Wow, what a difference! After creating and implementing the image sprites, I was down to 2 images. The page is loading much faster because the browser doesn't have to look for a bunch of different files, and the server doesn't have to serve up so many files. Combining CSS and JavaScript files into less files is typically what I would do next. However, since my site does not have a lot of features (no mini cart, no scrolling images, no customer registration) that require the use of JavaScript, I don't have many external files. I simply have one CSS file on my home page. When I look at my results in Google, I have no Medium Priority suggestions anymore; my only suggestions are Low Priority page speed suggestions.

Minifying CSS: 90/100
Ok, so my CSS wasn't overly full and minifying it didn't do much for me as far as page speed. Minifying CSS takes out all of the fluff. Any spaces, line breaks, comments, and pretty much anything that isn't strictly CSS must go. Because of this, I would only suggest doing this if you are done making changes to your CSS (I keep a back up on my computer so that it is easy to edit and re-minify if needed) because it is awfully hard to find the code you need and make changes on it if your entire CSS file consists of a single line. The minifyier that I had used was CSS min.

In part 2 of this post I will go over how to leverage caching or compressing your website by modifying your .htaccess file on the server.

Wednesday, August 3, 2011

Summer Winding Down Encourages Changes On Your Site

With each new season comes a reminder to update the content on your website. The exciting news that was on your site last season is now a little outdated. The sales that were advertised or the top products that were advertised have changed. There are new and exciting things to be letting your customers share in. Two big focus points for the ending of summer are back to school and winter.

National Collegiate Ethics Bowl

I was not a student who always looked forward to going back to school, although I often was excited to start a new school year. As a kid you look forward to seeing friends you haven't seen all summer or wondering who your new teacher is going to be, high school students are looking at the extracurricular activities they will be participating in, college students are moving back into dorms, prepping for their new semester of classes, and as always, looking for this semester/year to be better than the last. So with your store, you should help boost the excitement of a new school year.

For clothing, makeup or jewelry companies, get your customers excited about having some new outfits and new trends to show off. If you sell furniture, you might want to target college students and point out furniture pieces that are good for dorms or that are compact and functional. Most sites will have some way to advertise for or against the new school year. If you sell movies or books you could point out good 'break from studying' media choices. Students always want the latest in gadgets and electronics, so those are easy to advertise.

Snowboarding 2010

This time of year also brings colder weather. Before you know it, leaves will litter yards and the mountains will be covered in snow. The highlighted products on your site should be changing from t-shirts, biking gear and staying cool, to jackets, snow toys and keeping warm. It's great to highlight those products that help people transition to the new weather, or products that are used in the new weather. Join your customers in the excitement of the upcoming season by celebrating the characteristics of the new season.