Basic eBay Design Series 2013 Part 2 – Code

We are going to start REALLY basic. Only using 6 elements:

  1. Google Fonts
  2. Background
  3. Logo
  4. Slogan Text for the header
  5. Content Text
  6. HTML/CSS

Google tells you how to insert its fonts so I am not going to go there. So lets look at the CSS in its current format:

<link href='http://fonts.googleapis.com/css?family=Erica+One' rel='stylesheet' type='text/css'>
<style>
body {margin:0px;padding:0px;}
.clear {clear:both;}
#background {background-image:url(http://kidsontalks.com/wp-content/uploads/2013/03/iki_background.png);background-repeat: repeat-y;background-position:top;width:1000px;}
#template {padding:10px;font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:14px;}
#logo {float:left; background-image:url(http://kidsontalks.com/wp-content/uploads/2013/03/iki.png);background-repeat:no-repeat;background-position:top;width:70px;height:66px; padding:20px;}
#slogan {float:right; padding:20px;font-family: 'Erica One', cursive; font-size:20px;}
.content {padding:10px;}
</style>

Nice and simple. A breakdown of the CSS elements:

Background – This is your background image and it repeats as your content grows
Template – This is an inner container which I use to add padding
Logo – Your logo position, floating to the left
Slogan – Your message to buyers etc
Clear – To clear any floating elements
Content – Currently just plain ‘ol boring text. In this section we will add images as other information as we expand this project!

The HTML:

<div id="background">
<div id="template">
<div id="logo"></div>
<div id="slogan">This is a cool place to put extra info and a company slogan!</div>
<div class="clear"></div>

<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel odio eu ipsum pellentesque bibendum sed non augue. Donec bibendum nibh vitae tellus lobortis et tempor dui porttitor. Donec scelerisque pretium orci quis congue. Sed et ipsum dui. Vestibulum vitae purus ut ipsum pulvinar aliquam eget at ipsum. Aliquam eget metus sit amet dolor viverra posuere nec ut quam. Sed varius, lacus pretium ornare hendrerit, felis erat venenatis nulla, id congue diam turpis nec odio.</p>

<p>Pellentesque placerat varius metus sit amet dapibus. Integer urna velit, commodo eget feugiat nec, dignissim eu nisl. In hac habitasse platea dictumst. Donec nibh enim, fermentum in malesuada sit amet, congue at ipsum. Donec molestie rhoncus nisl id semper. Nullam ut felis diam, et porta metus. Praesent nec lorem nec risus pharetra varius. Ut vitae erat ipsum. Aliquam aliquet bibendum volutpat. Suspendisse aliquet ornare facilisis. Curabitur elementum congue ante, vitae vestibulum lectus gravida placerat. Fusce luctus, arcu a tincidunt condimentum, neque lorem faucibus mauris, blandit tristique diam diam vel urna. Pellentesque vehicula, felis nec laoreet aliquet, arcu nunc tincidunt arcu, quis gravida justo justo eu quam. Integer molestie lobortis est sit amet laoreet. In hac habitasse platea dictumst.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sodales dui a dui consequat luctus. Nulla facilisi. Etiam auctor nunc ornare erat tempus vitae euismod dui sodales. Sed fermentum elementum lacus, sed adipiscing lorem semper eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus egestas sagittis metus eu pretium. Vestibulum id bibendum nisl. Phasellus eu magna sit amet nulla mollis condimentum. Mauris pretium blandit lorem quis accumsan. Aenean fermentum tellus ac nisl malesuada in viverra augue facilisis. Vestibulum pretium arcu quis nisi posuere porttitor. Donec iaculis suscipit urna, a tempor leo placerat nec.
</p><p>
Aenean luctus malesuada molestie. Curabitur nec consequat felis. Duis tempor elit et tortor pulvinar vel ultrices erat fringilla. Sed velit nulla, gravida sit amet hendrerit nec, imperdiet a lorem. Ut adipiscing ultrices felis fermentum adipiscing. Pellentesque suscipit egestas lectus, ac volutpat tellus vehicula non. Donec et nunc vel dolor sodales rhoncus. Morbi ornare, tortor et iaculis cursus, mauris risus lobortis est, in dictum enim dolor id magna.
</p>
<p>Nam purus leo, fringilla nec semper non, tempor sed nisi. Fusce nulla lacus, lobortis vulputate tempor nec, pulvinar eleifend eros. Proin a ipsum purus. Etiam a mollis urna. Etiam ante felis, viverra eu congue in, dignissim ut est. Nam cursus vestibulum purus vel porta. Proin a nulla in sem gravida convallis vel in metus. Phasellus aliquam laoreet ipsum. Nullam ultricies porttitor consequat. Mauris et sem nec velit commodo imperdiet. Phasellus accumsan felis a enim euismod dapibus. Duis purus sapien, tristique vel congue in, interdum at nunc. Nunc volutpat nibh imperdiet tortor egestas aliquet.</p>
</div><!--content-->
</div><!--template-->
</div><!--background-->

and this is the result:

http://kidsontalks.com/wp-content/uploads/2013/03/iki.html

If you want the full code, right click and view source. Copy and paste away.

The result is VERY BASIC, and if you look in Responsivator we have all kinds of UGLY scroll bars:

http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki.html

This is because this design is NOT YET RESPONSIVE!

More on that later.

*Please note, if you are thinking ‘Oh my lord this is like SO simple’ then clearly this is NOT for you. I detailed advanced eBay design back in 2007, it is still on this blog albeit hideously out of date.

Previous Post: http://kidsontalks.com/basic-ebay-design-series-2013-part-1/

Be Sociable, Share!

Shameless self promotion – Widshop eBay Design Examples!

Mathias and I were on the promotion trail on Wednesday speaking to our key partners about Widshops. So I thought I would share two new examples of the Widshop product from two different design perspectives.

Even though widshop is designed and developed around a set frame designs can still look very different.

My first example is:

zendago ebay shop design
Click image to see the large version

This is a clean professional design within our standard frame and my current favourite:

Click image to see the large version

…which is the other end of the spectrum design wise but still around the same framework.

You don’t need to have ‘just three’ banners on the homepage, it can be one large image or a series of smaller banners (we don’t recommend more than 6 as they will get a bit too small)

The side navigation is driven in real time by the attributes you use to list to ebay so you never have empty results.

These are the live stores:

http://stores.ebay.de/ZENDAGO
http://stores.ebay.at/toyworld24

Included in the standard package is:

  • Adaptable homepage
  • Dynamic search
  • Adaptable product view
  • Integration of custom pages
  • Category filter navigation
  • Cross-selling galleries
  • Full text search
  • Social Bookmarks
  • eBay integration

and this is a eBay certified application which is very important 🙂

More info and examples are on the website http://www.widshop.com

People always ask me the difference and eBay design makes, and a good one at that and I always say that you can make up loads of reasons why an eBay design such as this is good. But our clients see a significant uplift in sales. That is what it is all about in the end, return on investment.

Widshops with a bit of tweaking can also be used on your facebook page….but this is a secret at the moment 🙂

Be Sociable, Share!

eBay Design 3.0 – Widshops the New Generation of eBay Shop and Listing Template Design

Well as promised full details of our new eBay design service…

WIDSHOPS EBAY DESIGN

Some might say we are ‘late to market’ with now providing a solution for the SME market but we decided not to rush. We wanted to be ahead of the game and provide something that is intuitive and very ‘now’ in relation to how the world of e-commerce is progressing. We wanted to look forward with our design innovations like with our premium service eBay designs. We want you to be future proof!

Widshops is an affordable ebay design solution (set up and design around £1500) but it provides all the look and feel of a professional stream lined shopping experience. It carries a subscription cost based on number of listings (http://widshop.com/en/prices/)

The key features are:

  • Fast – Your new template delivered quickly
  • Easy – only the best features show up in your shop
  • Economical – Sales increase, costs decrease
  • Optimised – HTML template also works on iPhone and iPad
  • Compatible – works with all eBay listing and sales management tools
  • Professional – Project managers at your side

The best bits are:

Category and filter navigation just like on the eBay platform


We filled an important technical gap with the eBay category and filter navigation. eBay® customers are already familiar with the intuitive filter navigation. This is now available with WIDshop in your eBay® storefront as well.

WIDshop navigation sorts your items out in real time and automatically recognises in which eBay® categories, and with which items specifics they have been listed. Through this, the WIDshop generates a navigation that displays all of your eBay® categories and item specifics filters. This way, your customers can search by category and filter the results according to items specifics. Your customers will easily and comfortably be able to find the right size, colour or material! You are thereby significantly enhancing your customers’ shopping experience!

Sell more with clever cross-selling


Every eBay® customer who clicks onto one of your products is very interested in buying. You keep your customer in your shop by using clever cross-selling. For this purpose, WIDshop makes a product gallery available to you which automatically presents similar products from the same eBay® category. This way your customer sees, for example, additional t-shirts, CDs from the same music genre, more hard drives or different trainers. The WIDshop cross-selling gallery can also work with customised rules based on item specifics or keywords, if desired. We would be happy to advise you.

Reach more customers with Facebook etc.


By linking the WIDshop to Facebook and Twitter, your customers can inform their friends that they like your storefront. You benefit from this additional marketing channel, which increases the popularity of your storefront and thus, the number of your clients.

The list of search results for a positive shopping experience


The most important thing about search results is their speed. Not only have we made the WIDshop search very fast. We have also made it look appealing and incorporated a few added features for your customers, such as wish lists or the display of the item condition. The search results are compiled and loaded anew in the navigation and filters after each click. This way, your customers always have an overview and can find their way easily and quickly through storefronts, even with a larger selection of items.

Integration of custom pages

All custom pages such as the legal notice, etc., that you’ve created as personal pages in your eBay® storefront can be easily accessed through the navigation and are displayed in your storefront design. This way, the entire storefront features your corporate design.
You can also easily manage and update your custom pages in your eBay® account. Therefore, the WIDshop works like a small editing system.

Examples:

http://stores.ebay.de/Sport-Fischmann

http://stores.ebay.de/outdoorsportshop24

http://stores.ebay.at/123boerse
So feel free to quiz me or comment on our new service and watch our for the discount code worth £250 in the 2012 Tamebay Tools and Services Guide

Be Sociable, Share!

Search Engine Freindly URLs Dashes or underscores?

Text URLs are great for optimisation, but if say you are looking at the keyword ‘ebay design’ as you are an ebay design company, would the URL http://www.kidsontalks.com/ebaydesign, http://www.kidsontalks.com/ebay-design or http://www.kidsontalks.com/ebay_design work better?

Matt Cutts of Google Fame says that:

So if you have a url like word1_word2, Google will only return that page if the user searches for word1_word2 (which almost never happens). If you have a url like word1-word2, that page can be returned for the searches word1, word2, and even “word1 word2″.

Shall we run an experiment? If I set up pages all about ebay design on this domain in those three formats shall we see which one ranks better? Now, random jibber is going to be my content filler and the pages will appear at the top of this site. I have chosen the term ‘ebay design’ as my target as it is a highly competative keyword and I am unlikely to get to the top page for this term. Which is what I would prefer as I don’t DO ebay design and I would not want to disrupt the companies that do in the search listings. This is only an experiment to see which SEF URL format would rank higher for the keyword search in Google, Yahoo and MSN. I shall use this tool to check results.

Let the experiment begin…..

Be Sociable, Share!