According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

#twitter-widget-0 {width: 100%;}

If there’s one thing I can’t stand, it’s herding. People shouldn’t allow themselves to be influenced by what others are doing without understanding why. The same holds true for businesses. Herding causes a lot of problems because it’s dumb decision making. It lacks thoughtfulness, strategy, and analysis—all major ingredients for a successful company.

So what does that have to do with responsive Website design? First of all, everyone’s talking about it. Loads of companies are pouring more money into mobile.₁ But not everyone fully understands the costs and benefits, which creates false expectations. I think you absolutely should have a mobile site, but I think you should know your options and what you’re getting into.

Why You Should Go Mobile:

1. Because consumers are judgmental

You may think that teens are the most active mobile users, but they aren’t. It’s women, between the ages of 35 to 54.₂ Consequently the biggest Farmville demographic as well. In any case, why does that matter? Because women are now the household decision makers.₃ They are the ones looking for you online, whether they need directions to your store, want to purchase a product, or just browse some reviews. If you can’t give them what they want, they’ll go elsewhere (and that’s true for anyone). One study found that 61% of mobile users will go on to another site if they don’t find what they want; whereas, 67% of users are more likely to buy from a mobile-friendly site.₄ Why is that?

2. Because consumers want their needs met

This is an age of instant gratification. People more willingly reward companies that meet and exceed their expectations, and they punish those that don’t. Companies like Zappos and Yum Brands (check out Taco Bell’s Twitter feed when you get a chance) set the expectation in consumer’s minds that even big name companies aren’t above interacting with their customers one-on-one. They listen and give the people what they want: a great experience. The reward is loyalty, which translates to huge revenues over time.

3. Because people will rely more on their phones than their desktops

It is expected that by 2014, the amount of time spent on mobile internet will exceed desktop internet time.₅ This is the digital equivalent of the old adage: location, location, location. You have to be where your customers are.

So now we’ve established that it’s time to get a mobile site. In my next post, I’ll cover the pros and cons of Responsive Web design and having a dedicated mobile site.

Sources

1. mashable.com
2. tag.microsoft.com
3. telegraph.co.uk
4. googlemobileads.blogspot.com
5. tag.microsoft.com

Aspdotnetstorefront offers lots of great search engine optimization opportunities (including the ability to pretty quickly add Google Analytics tracking to the entire site) which is one of the primary reasons that Beacon selected it as our go-to eCommerce platform many years ago.

However, the resources to set up these items are scattered about a bit, so I thought I’d note specific links I find useful when discussing these topics with clients and/or developers. Hope they are helpful and please be sure to include your own suggestions in the comments section below!

Online User Manual

• Google Analytics and eCommerce Tracking– http://manual.aspdotnetstorefront.com/p-441-google-analytics-and-ecommerce-tracking.aspx (Version ML8) and http://manual.aspdotnetstorefront.com/p-1035-google-analytics-and-ecommerce-tracking.aspx (MultiStore)
• Submitting your Site to Google Sitemaps (Versions ML8 and MultiStore)– http://manual.aspdotnetstorefront.com/p-436-submitting-your-site-to-google-sitemaps.aspx
• Submitting your Sitemap to Yahoo! (Versions ML8 and MultiStore)– http://manual.aspdotnetstorefront.com/p-437-submitting-your-sitemap-to-yahoo.aspx
• Search Engine Optimization– http://manual.aspdotnetstorefront.com/p-505-seo.aspx (Version ML8) and http://manual.aspdotnetstorefront.com/p-1029-seo.aspx (MultiStore)
• A/B Testing with Google Checkout– http://manual.aspdotnetstorefront.com/p-747-ab-testing-with-google-checkout.aspx

Forum posts

• SEO in ASPDNSF– http://forums.aspdotnetstorefront.com/showthread.php?t=17028
• Google Analytics Ecommerce tracking– http://forums.aspdotnetstorefront.com/showthread.php?t=16236

Blog posts

• The Token Analytics Article– http://blog.vortx.com/analytics/the-token-analytics-article/

• Analytics: What’s the Deal With All These Numbers? – http://blog.vortx.com/analytics/analytics-what%E2%80%99s-the-deal-with-all-these-numbers/

• Google Analytics and AspDotNetStorefront– http://blog.vortx.com/analytics/google-analytics-aspdotnetstorefront/

Beacon Technologies is excited to announce the launch of NCTA’s responsive site redesign at http://nctechnology.org! The site was already in Cascade, but Beacon’s team helped to redesign the existing site with slight graphic changes and adopt a fluid grid layout. Our development team helped implement a new “rounded” look and highlight key areas of the site to improve site navigation and ease-of-use for the end user. View another one of our projects for more information on responsive design.

This slideshow requires JavaScript.

Key Changes

• Implemented a responsive design for desktop, tablet and mobile devices.
• The client wanted How to Sponsor an Event, Become a Member, Event Calendar and their Membership Directory given a prominent presence. Beacon helped make it easy for their members or prospective members to find this information.
• They thought their last site was too “boxy”; however, they liked the rounded corners that Apple has, so we provided them with rounded corners
• They wanted to highlight their main sponsors on the homepage, which we’ve done via a scrolling carousel right above the footer
• Changed the layout of the Events pages to highlight  What, When and Where higher up on the page. On their old site, these features were getting lost in all of the content.
• Provided them with bigger and more prominent calls to action such as buttons in the left-hand navigation of the events pages for Register Online and Print Form buttons in the left-hand navigation.
• Made the News ticker more prominent on homepage – ticker at top of page
• Upgraded the search feature from Perlfect to Google Custom Search

Key Players

The following folks had  major role in the success of this project:

• Jennifer did a great job of coming up with a responsive design that addressed all of their requirements, but was still functional in a mobile capacity.
• Keana did virtually all of the development and Cascade implementation with great results.
• Tiffany was always available for technical support.  She was there to answer any questions the developers had and helped out from a development/testing perspective when we were down to the wire.
• John Vine jumped in towards the end and helped set up Google Custom Search so we could migrate NCTA off of Perlfect.
• Justin provided analysis, development, and launch assistance as needed.

If you are building a new website or redesigning your old one, it’s time to consider a responsive design. Mobile and tablet usage has increased significantly and will continue to do so. In addition, there are SEO and maintenance benefits with responsive design versus having standalone mobile, tablet and desktop websites.

There are a lot of e-commerce web solutions and can be hard to choose from.

We prefer aspdotnetstorefront with its ease of use and great customer support. It provides great integration with new and existing sites and is also customizable with its settings to fit your needs.

You can customize things such as your overall site look and feel, desktop or mobile, change back-end settings in an administration panel to work with your product categories and much more.

Another great feature is that it allows the products to be be setup for multichannel selling to reach a larger audience. There is so much you can do and we can help you every step of the way.

8 Ways to Improve Product Detail Pages

1.       Larger Images – Having bigger images is important because the customer wants to be able to see the product. If they can’t see the product because the image is the size of a thumbnail, chances are they won’t convert. It’s important to not only have big images but also have plenty of images for the customer to look at.  (see above picture for example)

 2.       Product videos – Videos are great for eCommerce sites because they give the customer a better look at the product. Not only are videos great for showing off the product but they also provide a chance for you to talk directly to the customer and tell them more about the product then they can read online.  (see above picture for example)

 3.       Make Your Price Stand out – No matter what the product costs, it is still important to make the price visible and easy to see. A price that is hidden can be aggravating for a customer and could lead to many abandoned carts. It’s better to just show the price right away and make it stand out so the customer knows exactly what the item costs.  (see above picture for example)

 4.       Large Colorful Call to Action Buttons – it’s important to also make it easy for the customer to add the product to their cart or wish list. Having large colorful buttons will make it easier for the customer to know exactly what to do if they want to make a purchase. (call to actions such as “add to cart”, “add to wish list” or “add to favorites” etc)

 5.       Engage Customers with Social Media – Whether you think your customers will use it or not, you should always include social media sharing buttons. This is free advertisement for you if the customer shares. Having a “like”, “pin”, or “tweet” button make it easy for customers to share with their friends if they find something they really like.

 6.       In Stock Notification – Let say you want to keep out of stock products on your site for whatever reason. When a customer comes to your site hoping to find the product they are looking for and then get an out of stock message, it can be frustrating for them. Not only are they upset it’s out of stock but chances are they are going to exit the site at that point and not return. Don’t let that happen. Add an In Stock Notification sign up on the page. Not only will you collect an email address but you’ll also keep the customer happy and coming back to the site.

 7.       Add Color Swatches – Telling the customer how many colors a product comes in is great but showing them is even greater! A customer is more likely to convert if they can see all the choices then if they are just told them. Colors can vary so much which is why showing exactly what the color looks like will help seal a sell.

 8.       Include Customer Reviews – Reviews are great for getting people motivated to buy. If a customer is on the fence about buying the product, a good review might be that small push they need to convert. Reviews can be in the form of comments or ratings. Showing both is ideal because you can show the ratings beside the product and comments at the bottom of the page.

Looking for more great tips about eCommerce? Learn how to improve your eCommerce site, find new ways to shake up your site navigation, and display different pricing with ASPDotNetStoreFront.

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

Recently one of our AspDotNetStorefront clients asked me to come up with a way to modify the display of his products that vary by price.  One of the things I really like about AspDotNetStorefront is that there are often “hidden gems” or functionality that you might not use one day, but come up with a way to incorporate it later.  For this client, I recommended that he investigate either the product attribute features of a simple product or set up the products with separate variants.

Attribute Option

This is the easiest product setup and, in general, requires the least XML package modification/development, but may not be the ideal user experience, depending upon the type of product being sold.

1. Log into ASPDNSF Admin and search for the product to modify
2. Click on the product and then on the Main tab
   • Change “Color Option Prompt” to the appropriate label to indicate why this product has multiple prices (for example “Product Options”).
   • Change the XML package to product.simpleproduct.xml.config
   • Hit the “Update” button.
3. Go to the Product Variant link, click on the default product variant displayed and then click on the Attributes tab
4. Enter text like this in “Colors” field– “Product Option 1[-100.00],Product Option 2[-50.00],Product Option 3″.  In this example, product option 1 will be $100 cheaper and Product Option 2 will be $50 cheaper than product option 3.  Add as many product types and prices as needed; separate all product options by commas.
5. Hit “Update”  and then view the product on the live site.  Selecting “Product Option 1″ from the drop down should  discount the item by $100 when added to the cart
6. See http://manual.aspdotnetstorefront.com/p-967-varying-price-by-sizecolor.aspx for more info on this setup

Variant Option

Depending on the type of product, I think this is the best looking option for the customer, but sometimes requires modification of the XML package by a developer to display correctly.

1. Log into ASPDNSF Admin and search for the product to modify
2. On the Main tab
   • Change the XML package to product.variantsindropdown.xml.config
   • Save the product with the “Update” button
3. Go to the Product Variant link and clone the default/existing variant using the “Clone” link.  Create as many clones as there will be product options for this product.
4. Click on the first variant in the list.
5. Change the variant name to “Product Option 1” (or other applicable label) and change the price field to the correct price for this product option and then save the variant.
6. Click on each subsequent variant in the list and change the variant product name and price for that product option.
7. Save the product and then view the product on the live site.  Each product variant will appear as a separate choice in the drop down box along with the applicable price for that product variant.

I hope that you find this information helpful!

Way back in 2000, Beacon developed its own ecommerce engine from scratch – “BeCommerce“.  It was during the dot.com heyday and since Beacon was composed of many top-notch developers that had departed Fortune 500 companies, it made perfect sense.  It was designed as a “framework” for ecommerce knowing that customization would nearly always be required.  After 15 years in this business, I can tell you that nearly every ecommerce website has some nuance, some special feature, function or interface that requires custom development and design.

Ecommerce has evolved tremendously since then.  There are so many standard “bells and whistles” that website owners expect.  So a little over 5 years ago, I had a Beacon task force evaluate several ecommerce platforms to consider as an alternative framework for our clients.  Beacon is a primarily a Microsoft shop, so .NET was required.  It had to be easily extendable or customizable, especially with respect to design and interfaces.  In other words, our developers had to be able to get their hands into the code!  The software needed to be complete enough and priced right, out of the box, to make sense for small projects.  Yet it had to be strong enough to support very large clients in terms of volume (traffic/orders), third party integration and custom development.  Of course there were many other pre-defined requirements, but most importantly, we had to have a copy of the source.  Our selection?  AspDotNetStorefront!

As I’ve stated in previous interviews, partner relationships are vitally important and AspDotNetStorefront is another good one.  This is why Beacon has been a long-term Premier Partner and regularly attends & sponsors their User/Developer Conferences out west.  Recently, I chatted with Jo Benson, the COO at AspDotNetStorefront & Vortx to get her take.

MD:  Tell me a little about AspDotNetStorefront (Vortx), the company.

JB:  Vortx, Inc is a company that operates out of Ashland, Southern Oregon. We have been a full-service company in software development since 1990 but in 2005 we made the strategic decision to move into product development and relinquish our strong hold on the service sector. It has taken us eight years of hard work and a significant acquisition, but we now own two very consequential e-commerce products – AspDotNetStorefront and its SaaS sister, EnnyWare.

MD:  What are the main reasons that your customers use or like your product so much?

JB:  If you don’t mind, I’ll answer for the two products separately. AspDotNetStorefront is software that is wholly owned by the retailer. Better (in my humble opinion!) than ‘open source’ – this product offers ‘fully available source’. The truly powerful thing about this software is that a small/medium sized business can grow with this e-commerce platform without limitation. EnnyWare is really very different and hugely exciting. It combines traditional e-commerce (where shoppers are brought to a central online store to do their shopping) with some really amazing ‘social selling’. An online seller who uses ennyware.com can upload each product once and see it for sale on Amazon, Google, Bing, Facebook, Pinterest, eBay Commerce Network ….. AND it can be selling at different prices in all those places.

MD:  What do you see as the most important feature(s) of an ecommerce product? 

JB:  I think that the world of online shopping (notice, I talk about SHOPPING, not SELLING ….. if sellers don’t learn to watch the behavior of shoppers, then they can’t expect to succeed) … anyway, I was saying , the world of online shopping has changed dramatically in the last year. In 2011 most of us went to Google, searched for ‘red shoes’ or ‘fishing rod’ and then started clicking through the top ten results, looking for a product that was affordable and looked just right. In 2013 it is estimated that over 60% of shoppers start their shopping at either Amazon or Google’s shopping engine. In both those places, images of products for sale are lined up side by side for comparison. Oh! And go and look at wanelo.com … it’s a social phenomenon. E-commerce has to stop expecting the shopper to look ‘in-store’. Shoppers find their purchases in social, central places and just need a safe, secure way to checkout. That’s what e-commerce has to match, today.

MD:  Tell me a little about the Beacon-AspDotNetStorefront partnership?

JB:  It was Annette Fowler from Beacon who first came to our attention, and this was before Vortx acquired AspDotNetStorefront. We were all together at an e-commerce conference in Vegas and she was just so SMART and forward-thinking and professional. She stood out as being ‘one to watch’. Therefore when we took over the shopping cart, we actively went looking for her – and therefore for Beacon, in order to make sure that we could bond together. We discovered that Beacon is full of people like Annette and we really value partners of this incredibly high caliber.

MD:  What’s on the horizon for AspDotNetStorefront?

JB:  You’ll see us putting ever more focus on ‘connection’. Not only are we connecting to the shopping and social engines, but we’re working on linking to email marketing solutions, ERP, accounting solutions, catalog management systems. The next release of MultiStore will also have more focus on ‘retention’.

MD:  As you can tell, Jo and her team are constantly looking ahead, using their innovative and creative staff to stay on the front edge of ecommerce.  EnnyWare is an exciting new offering that demonstrates this.  See you in Chicago at IRCE (June) and at your User Conference in Denver in August!

Most companies are in business to make money.  They spend lots of time and funds to create a highly efficient eCommerce website, and then focus on the big picture to create revenue.  However, while focusing on the big picture you should always remember that it’s the small stuff – the little details – that can make or break your transaction conversions.

Listed below are my top 5 tips how to improve your eCommerce website.

1)      KISS- Keep It Silly Simple.  Customers need to be able to find your products.  That being said, make sure your navigation is set up logically, your product detail pages contain breadcrumbs to allow your users to back up easily, and that your site search is quick and serves up recommendations if nothing is matched (or an item is misspelled) with a query entered.  Also, try to incorporate a site search feature that allows for auto-completion of words to help users that can’t remember the exact product name they are looking for.

2)      While most will disagree on online dating sites, looks are so very, very important.  Make sure your product image is flattering.  Don’t have a lot of distractions, and having clothes on a body instead of laid out flat on white table tops allows users to have more confidence in the items they are reviewing.

3)      Show me the money…I mean details.  Including sections on the product detail tabs like online reviews, fabric components, and how items are shipped leave users with a better feeling.  They will also not feel the need to bounce to another site (where they could be easily distracted) to try to find product reviews about your products and brand.

4)      Don’t be shady.  Provide any easy and accessible link to your privacy and shipping policies for customers to find.  Exhibiting and practicing easy return policies will allow users to feel like they aren’t being backed into a corner.  A friend of mine has an online store on Etsy (who I believe has one of the best site policy pages because they give the added bonus of showing the date the policies were last updated).  Also make sure you have obvious ‘contact’ call outs for customers to get in touch with you as needed.

5)      Don’t guess, let the data drive you.  You should all be using some form of analytics to watch your traffic flow through the site to see where they are bouncing and dropping off.  Knowing what sites they are coming from can prepare you to how to market to them.  You can also learn the number of users on mobile devices to make sure your site is user friendly for them, too.