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!

Basic eBay Design Series 2013 Part 7 -It’s all gone tits up!

Well, it has’t really….it is just a latent domain name I have had for years getting used again for THIS project!

If you pop along to:

http://gonetitsup.net/

You will be presented with a website with two versions of the template – one with a switching gallery and one not in a WYSIWYG editor so it is EASY for you to customise, grab the code and use with your own operation.

Both template include policy boxes. Which is something not covered however the THEORY already has been. Remember those 4 images in a square from Basic eBay Design Series 2013 Part 4 – Responsive Images?

Well, these are just floating, stackable boxes. To get 3 in a row ALL you need to do is change the percentage to 33%:

{float: left;width:33.3%;min-width:280px;}

Simple as!

I have also included a blank editor within this page, but bear in mind if it only built for light use. It stores NOTHING and has limited bandwidth. I have put a cheeky ‘donate’ button on this page as it will keep it live and fund the ‘inline eBay template editing’ project also.

*edited to add final responsivator link: Responsive eBay Layout Template

Previous Post:Basic eBay Design Series 2013 Part 6 – Image Switching with Javascript

Be Sociable, Share!

Basic eBay Design Series 2013 Part 6 – Image Switching with Javascript

I REALLY wanted to do a pure CSS gallery, but it was getting far to complicated. So I opted for the simplest Javascript I know.

‘onmouseover’

It is a nice a simple addition to the responsive gallery structure:

The big main image needs to be given a name:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>

Then the thumbnail images need to swap on mouse over:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>

This means the gallery code is:

<div id="background">
<div id="template">
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>
</div><!--switch-gallery-column switch-gallery-main-->
</div><!--switch-gallery switch-gallery-row-->
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/highlight.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/juicy%20melons.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/pinup%20pink.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
</div><!--switch-gallery-crosspromo switch-gallery-row-->
<h1> Mouse over to zoom images</h1>
</div><!--template-->
</div><!--background-->

Next, is floating boxes and then a pulled together skeleton as this series has grown a little organically and I need to strip out some bits to make it easier to re-use.

Previous Post: Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery

Be Sociable, Share!

Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery

We shall expand the pattern and theory of the previous post and do a ‘switching image gallery’ format. In this post we will just look at the SHAPE.

The CSS:

<style>
.switch-gallery {clear: both;padding: 0px;margin: 0px; text-align:center; max-width:400px;}
.switch-gallery-main img {width:100%;height: auto;}
.switch-gallery-thumbs img {width:100%;height: auto;}
.switch-gallery-column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.switch-gallery-column:first-child {margin-left: 0;}
.switch-gallery-main {width: 100%;}
.switch-gallery-thumbs {width: 23.8%;}
.switch-gallery-row:before,.switch-gallery-row:after {content:"";display:table;}
.switch-gallery-row:after {clear:both;}
</style>

The HTML:

<div class="switch-gallery switch-gallery-row">
<div class="switch-gallery-column switch-gallery-main">
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" />
</div><!--switch-gallery-column switch-gallery-main-->
</div><!--switch-gallery switch-gallery-row-->
<div class="switch-gallery switch-gallery-row">
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div class="switch-gallery-column switch-gallery-thumbs">
<img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" />
</div><!--switch-gallery-column switch-gallery-thumbs-->
</div><!--switch-gallery-crosspromo switch-gallery-row-->

Notice for now, we have taken this section OUT of the normal template. This is because it will REPLACE the stacking grid image section as an alternative.

Currently this only LOOKS like a gallery. It will behave like one in the next post! We will look at pure CSS image switching for eBay listings.

Look at the subtle difference in the percentage here:

.switch-gallery-thumbs {width: 23.8%;}

Changing this percentage changes how many thumbs are PER row. For example use 18.72% for 5, and 15.33% for 6 in a row.

Responsive Switch Gallery

On Responsivator

Previous Post:Basic eBay Design Series 2013 Part 5 – Cross sell & Shrinking Grid

Be Sociable, Share!

Basic eBay Design Series 2013 Part 5 – Cross sell & Shrinking Grid

I wanted to add some swatches to one of my listings. Swatches are just blocks of colour so I want them to SHRINK and not stack with mobile.

So I am going to give you one patterns to use for a cross sell or swatch images area.

Lets start with how it LOOKS:

Desktop:

swatches

 

eBay App:

swatch images

Now I will give you a pattern for a 3×1 row that can be repeated.

The CSS:

.crosspromo {clear: both;padding: 0px;margin: 0px; text-align:center;}
.crosspromo img {width:60%;height: auto;}
.crosspromo p {text-align:center;}
.column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.column:first-child {margin-left: 0;}
.box {width: 32.2%;}
.row:before,.row:after {content:"";display:table;}
.row:after {clear:both;}The HTML:

The HTML:

<div class="crosspromo row">
<div class="column box">
<img alt="" src="http://geishaface.co.uk//ebay/atlantic.jpg" /><p>Atlantic</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" /><p>Highlight</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" /><p>Juicy Melons</p>
</div><!--column box-->
</div><!--crosspromo grid-->

Currently my crosspromo images are only 60% width, however – you can put any percentage here depending on style AND repeat this section. This methodology can also be used to create a grid for an image gallery with one large image at the top then three thumbnails. More on this later.

So you can use this type of format for cross promotion searches on eBay, swatch sections or anything you want to ‘shrink’ and no ‘stack’ to fit.

Current Responsive Template Code and how it looks on Responsivator

Previous Post:

Basic eBay Design Series 2013 Part 4 – Responsive Images

Be Sociable, Share!

Responsive eBay Template – Live Example Dangleberry Music!

Dangleberry music are readers of my blog, and were VERY interested in the RESPONSIVE EBAY DESIGN series I have started and worked it into their own eBay template.

 

Mark from Dangleberry music thinks I should seriously consider commercialising this idea, especially with the development planned over the summer. I work WITH eBay design companies currently, and I know many read my blog. Some even started THEIR biz and development after my 2007 series about CSS and eBay store design.

So I imagine after seeing this idea, they are already planning to commercialise it. Its such a simple idea, I am shocked no one is offering it  for sale ANYWAY. Watch this space, in 12 months you will see this!

 

Here are some bad screen shots of my series in action, helping a seller be cool on desktop, mobile AND app:

 

20130607_090641

 

20130607_090754

 

Simple but effective. No fiddling around trying to read the description, it just re-sizes. They converted their existing template they designed themselves and adapted it to be responsive.

I have one post left on this series, which is the floating policy boxes. This effect can be used not just for policy boxes but all kinds of things. It just teaches the theory really.

I am just putting together a responsive eBay description layout for a client so will reuse some of the code here to explain responsive stacking ‘boxes’ a little more.

On the commercial side of things, if you have an existing eBay design template and want me to make it responsive. Contact me. I might be able to help you depending on the design. Even if you want your description layout to be more involved and respond to mobile and the app let me know.

I DON’T do graphics, this is really not my area.

workkidsontalkscom

 

Be Sociable, Share!