I didn’t complete checkout, its OK to email me but stop RINGING!

Talk about annoyance.

I decided to look into an online course and made it to checkout. I entered a few details then stopped as it only gave details at checkout about HIDEOUSLY expensive terms when it came to payment instalments. I decided to wait until I had the spare cash to pay in one go and save about £150.

I get an email:

On your last visit you added the ********* course to your shopping
basket, but did not complete the final transaction.

I am contacting you to see if you experienced a problem with our website whilst
shopping or if you needed more information on the course content before you could
complete your enrolment. If you would like to email me or better still call me on
**** I will be very happy to help you.

So I replied and said I would wait a little until I had the full amount as I didn’t want to pay in instalments but thank you for the email. It is good to check sometimes for cart abandonment reasons. You could get good data.

Was that my big mistake? PROBABLY.

I have now had TWO calls about it and feel a little hounded. No I DON’T want to talk about my financial situation with you. I don’t feel I need to give you ANY reason for waiting a MONTH. Truth is I decided to do my accounts and pay for my holiday in Japan first but it is NONE of their business.

I think I might find a different place to do the same course. TOTALLY put off.

I only wanted to check the payment terms for the course! Ugh!

Don’t hound your buyers and especially don’t think you can talk through their finances unless THEY ASK YOU!

eBay don’t want you to be excellent, they want you to be BETTER

Always.

eBay seem to HATE giving fee discounts so under the guise to improve the buyer experience they have upped the bar for Top rated seller status.

Important: You don’t have to meet these requirements for all of your listings, but you’ll only receive the associated benefits and final value fee discounts on listings which do meet the requirements.**Like hell you want to rank poorly in best match….you don’t have a CHOICE**

You must offer:

  • A minimum returns period of 14 calendar days, using the new way of specifying your returns policy.
  • 1-day or same-day dispatch.
  • An express delivery option – offering delivery within 1 day.
  • A free postage option.

Thinking of my clients who vary greatly they will only be able to meet option 1 and 2 across the board. They already offer a 30 day returns window and ship business same day or next business day. However, eBay says just ‘DAY’ does this include weekends?

Most of my clients can now offer express dispatch via courier….but FREE SHIPPING is not always possible on items with the wrong dimensions for Royal Mail!

Be it as it may, we ALL know we need to tow the eBay line if we are to be successful so I will be (and already have with two clients while writing this blog post) work with my clients to make sure everything is in line with what eBay wants.

Deadline Autumn 2013…start changing NOW!

….and just when I was feeling all cynical, eBay give you 12 Free pictures for all eBay UK listings!

Little stars!

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/

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/

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/