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!

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!

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!

Basic eBay Design Series 2013 Part 1

This is the preparation of your design. I use the word design LOOSELY because like myself you are probably not a DESIGNER. In the graphical sense anyway.

However, the only images you will need to worry about creating for this project is a repeating background if you want it to have a little texture and a logo/typed out name in your favourite font on a TRANSPARENT background.

This will constitute the base for the template design.

First we will organise the background and logo positioning so we are only working with SIX basic elements and then checking how they look on desktop, mobile and tablet.

How can we check this with out getting out all our gadgets?

http://dfcb.github.com/Responsivator/

This is a great site for checking how a design reacts to different screen sizes. As we will NOT attempt to work with anything overly fancy or active on this project you can use this link to check your work!

Now, we are going to work with inline CSS so nothing is dependant on external files linking etc. This means that if your listings become SUPER popular your hosting bandwidth is not chewed up by traffic. It DOES happen!

I have also elected to use google web fonts. Because they make things pretty : http://www.google.com/webfonts

So, lets break it down. I have two WHOLE images:

iki

A logo on a transparent background. It has some white in it but you can’t see that!

iki_background

and a repeating background image that is 1000px wide.

Can you manage that? If so part 1 is now complete.

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!