Responsive eBay Design Features & Functionality Requests 2014

Last year I had a really good response to the Responsive eBay Design framework blog series I posted.

This year I shall open up the floor to feature requests. I can’t PROMISE anything but it will be very interesting to spend some time adding to this series based on requests.

How can you ask me?

Facebook: http://www.facebook.com/kidsontalks
Twitter: http://twitter.com/KIDSONTALKS

Be Sociable, Share!

Cassini, eBay & the back button of death!

We love silly named updates. We have the Android Kitkat update and we have had Google Panda. eBay felt left out so we have the…

CASSINI update

They decided to completely re-write the search functionality to suit buyers needs. The development uses all the data available to eBay to meet the immediate needs of the shopper. This makes the buying experience better, and helps us sell more.

But enough of that, what do we need to watch for?

Four major factors will drive eBay search going forward, Relevance, Value, Trust & Convenience. M’kay?

The back button of death

eBay are now weighing listings on the impressions they receive, as well as how well they do on holding the buyers attention and if the deal is closed. You need to make sure buyers click on YOUR listings in search results and then your listing holds their attention to close the deal.

Lets look at this process:

1. Buyer shops for “Maxi Dress’ – if you sell maxi dresses this needs to be in your TITLE.

2. Then they will move onto filters to find the size, style, colour and brand. This information is pulled from your ATTRIBUTES/ITEM SPECIFICS and eBay specified ones at that. Unspecified is -1 Cassini point (please note you don’t really get negative points, or any points it is just easier to think this way….well I don’t THINK you get points…)

3. They click on YOUR listing for a black size 8 maxi dress.

4. Your listing is SO fantastic with all the info clear that they buy from you. <–INSERT EBAY DESIGN HERE

One Cassini point achieved. You can now move onto the next level.

5. If hit they BACK button on their browser, you suck.

Don’t give them a reason to hit back!

Good luck!

If you want to read a really good post on Cassini go here: http://www.terapeak.com/blog/2013/06/11/terapeak-how-to-crucial-factors-in-ebay-search-for-the-new-cassini-platform#.UjhJu8ZvCco

 

Be Sociable, Share!

Buy it now button INSIDE your eBay design template…

I debugged this for a friend so I thought I would share. I DON’T know how long this will work, eBay change their minds repeatedly. I doubt it works in mobile either.

<script type="text/javascript">document.write('<a target=\"_top\" href=\"http://payments.ebay.co.uk/ws/eBayISAPI.dll?ShopCartProcessor&atc=true&item=' + ebayItemID + '&ssPageName=CART:ATC" id="button"> </a>');</script>

Then you use #button to create a nice CSS button effect.

Be Sociable, Share!

Basic eBay Design Series 2013 Part 4 – Responsive Images

I said I was keeping it simple and I am. In my template I am incorporating 4 images 400px x 400px in a 2×2 grid under my description.

In the future I might look into a pure css gallery with rollovers that is responsive too. However, for that kind of hard work I am likely to charge!

We have some additions to the CSS:

.gallery {width:90%;max-width:990px;}
.grid {float: left;width: 50%;min-width:280px;}
.pics {padding:5px;}
.pics img {width: 100%;}

Simple stuff and here is our gallery HTML code:

<div id="gallery">
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
      </div>
    </div>
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
      </div>
    </div>
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
      </div>
    </div> 
   <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
      </div>
    </div>
  </div><!--gallery-->

And the current state of the full code: Responsive eBay Template and you can see the differences due to screen size here: http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki_nail1.html - smaller screens 1 x2 grid, larger screens 2×2 grid.

If you JUST use % widths you can have the 2×2 grid shrink in the smaller screens, however I have set a min width as I want to be able to see my pictures within the template.

So what ELSE do we need in a basic listing template. Policies of course! In the next post I will add two floaty sections which will stack for mobile.

Previous post: http://kidsontalks.com/basic-ebay-design-series-2013-part-3-responsive-design-and-ebay/

Be Sociable, Share!

Basic eBay Design Series 2013 Part 3 – Responsive design and eBay

The eBay item page is NOT normal.

If I want to take this design responsive for web I would add this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to the top and then:

/* for 480px or less */
@media screen and (max-width: 480px) {#background
{width: auto;float: none;}

in between the style tags:

Resposivator says this is OK: http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki1.html

However, it won’t work for eBay.

In fact at this stage to make THIS version of the design responsive all that needs to happen is a change in the CSS for the ONLY area of the design which currently has a fixed width that UPSETS smaller screens.

#background {background-image:url(http://kidsontalks.com/wp-content/uploads/2013/03/iki_background.png);background-repeat: repeat-y;background-position:top;width:100%;max-width:1000px;}

The width of this element has gone from 1000px fixed to 100% AND a max-width of 1000px.

Want proof?

This is a photo of a REAL listing on eBay UK showing the description in my eBay app, taken with my blurry tablet camera, but you get the IDEA.

app

The challenge is to now build on this base and keep it responsive.
This is where the eBay Template code is at currently – right click and view source.

*A note on licence for this work. I don’t mind at all if you use it for your eBay operation as a seller. However, if I see my code popping up with professional eBay design companies or similar who CHARGE for this I will name and shame. If you want this functionality you should be able to develop this YOURSELF and be BETTER than the free code I give away off the top of my head.

Previous post: http://kidsontalks.com/basic-ebay-design-series-2013-part-2-code/

Be Sociable, Share!

New eBay Design Series for 2013!

Way back when in 2007 I detailed about advanced eBay design, some eBay design firms that are still in operation today tell me that’s how they started…from my guides. Did I create a monster? Well, I am going to do it again.

I am setting up my own retail operation for launch in the summer and I will detail MY eBay design process. It will be quite simple as technology has moved on SO much that I will only be creating a simple eBay template and store header. Plus my store won’t have THAT many lines, just big on variations so the cross sells can be hardcoded searches and for starters a category navigation WON’T be needed. It will also be mobile friendly and responsive. I am having fun with responsive web designs so I will translate this to a simple eBay listing template and ‘stack’ for mobile screens.

I am not a designer, I work WITH designers and eBay design companies that are FANTASTIC at what they do. This design/coding series will be aimed at those on their first steps with eBay design and eBay as a business BEFORE investment in professional design is sensible.

This is a DIY series, I offer no support. If you want to invest in professional eBay design you can contact me and we can have a proper discussion.

Watch this space!

Be Sociable, Share!