How to rebuild ancient eBay page template from Dreamweaver CS5 or 6? to HTML 5 responsive....?

[mojokk]

I used to build websites for my favourite 1970s band using dreamweaver back in the early days when everything was table based and CSS was new.  I have moved on to using WordPress for those sites, but I still occasionally list some of my record and comic book collection on eBay and have Adobe CC acount.  I have continued to use a template I built ages ago that was table based and I am sure not HTML 5 compliant and of course is not built with bootstrap or responsive.  It has worked fine as I just take the old file and change it up and then copy the table portion of the html file and insert into eBay.  I am hoping to start listing more things on eBay and I would like to rebuild the template and make it responsive so folks can see it well on tablet and phone.  The Template I had made was basically a table with a bunch of rows that included some nested tables that had 3 columns for three images (which I probaby don't need) in some places, had colored text in some places, and bolded text of difference sizes...  I think I could easily figure out to rebuild such a page with columns... but wanting it to look good on phone is another thing. Here is an example of one of my listings.

https://www.ebay.com/itm/402398117299

The part I did is the table part with the black background.

Is there and easy tutorial video to show me how to rebuild this template but also make it responsive.  I wonder whether my sections could just be hidden and only seen with toggle button is clicked on.  But I do want people to see my pictures becuase especially when I sell my comics, it is all about the nostalgia and fun for me.

Thanks,

Kirk

[mojokk]

And when I think about it, I am fine with my pictures which are 1200 pixels wide to just shrink the width of the screen with the height adjusting proportionally.

[Nancy OShea]

I am fine with my pictures which are 1200 pixels wide to just shrink the width of the screen...

=========

@mojokk,

Not fine for mobile users on limited data plans, though.  You're forcing them to consume the same bandwidth as large devices.  That said, see my reply to this related question about responsive images.

https://community.adobe.com/t5/dreamweaver/adapter-l-image-%C3%A0-l-%C3%A9cran/td-p/12172192

Hope that helps.

[Nancy OShea]

Designing for eBay is NOT web design.  eBay templates have very specific guidelines that no other website requires. 

I suggest you find an eBay specific template and use whichever tools eBay currently recommends  -- i.e. Seller Hub and Selling Manager Pro.

https://deliverr.com/blog/ebay-listing-templates/

And as one might expect, you can actually buy eBay Templates directly from eBay sellers, now.  Go figure!

https://www.ebay.com/itm/264951904795

Good luck!

[mojokk]

Thanks for your response Nancy.  You help many people on this forum and have helped me in the past which I greatly appreciate!  However, I am not really looking to sign up for something in eBay's seller hub to pay a monthly fee for templstes. I am wanting to basically create a template for myself that I can use and edit myself in dreamweaver.  Was simply looking for a tutorial to help me be on my way of recreating what I had already built.

Thanks,

Kirk

[Nancy OShea]

Like I said, eBay listing templates are highly specialized for use on eBay.  I don't have any tutorials to offer you. 

If it was normal responsive web design, Bootstrap or even WordPress themes, I could help you.  But not with eBay, sorry.

[mojokk]

Can you offer a suggestion for a simple normal responsive website design tutorial?  eBay's system takes the code pretty seamlessly.

Thanks,

Kirk

[Nancy OShea]

Honestly, I don't think eBay can handle Bootstrap.  And that's the mobile-first, responsive framework that's used by millions & millions of websites worldwide. 

Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap4/