change html to make old site mobile...

User 2775880 Photo


Registered User
1 post

Where in CSS do I make changes to create a mobile responsive site?

What would it look like...??

I am trying to help a friend and I am a novice HTML person... I can get around but I ma not a pro yet... :)

Thx for your help

Suzie
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I would start from scratch as making a none responsive site responsive by altering the existing code will take way to long.
Either grab RLM or a responsive theme for the HTML editor from CC.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2287960 Photo


Ambassador
580 posts

I am with Eric, best way is to start again.

Keith
User 2385998 Photo


Registered User
62 posts

If you have implemented CSS which is in a separate file to the HTML (as most CSS is) then it's actually not too hard to make the changes, especially if the HTML code of the is more of less the same at the top and bottom of the HTML.

Once I got to grips with how Responsive Layout is supposed to work it's rather straight forward. The hardest part was getting the site layout design done but with the HTML Editor I just did a massive series of copy and pastes, test, fix and test again and I was able to get my site, which is over 200 pages, updated in a weekend.

The hardest part was getting the CSS written for the changes and once that was done the actual changes were trivial in comparison.

The book that I used to help me was from Amazon and I do recommend it wholehearted. You don't need to read all of it, just until the bit where he prattles on about resizing graphics which is just the first half of the book.
http://www.amazon.co.uk/Responsive-Web-Design-Html5-Css3/dp/1849693188/ref=sr_1_1?ie=UTF8&qid=1432225130&sr=8-1&keywords=ben+frain

Once I got to grips with what's required, wrestled with the CSS it was easy to do with HTML Editor.

I am no website pro at all. I have a simple (but large) website and all of the clever work is in the back end coding (it's mostly .asp) but the website isn't that of a pro at all. So, if I can do it then I am sure that you can.

- Malc

Pam: "I wonder what my name means in Welsh"
Nessa: "Why?"
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

If you are set on making the existing site responsive, then you could start by changing all the container widths from px to %
Next, the font sizes from px to either % or em.
You need to make your images resizable. I'm a bit short of time right now, so if you want to go this route, someone else will have to help, or you'll have to wait until this evening (CET).

There is a bit more to it, like floats etc.

But doing as suggested by others above is a much more comfortable way of changing the site.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1948478 Photo


Senior Advisor
1,850 posts

Suzie,

Whatever route you ultimately choose to take, I'd suggest you start out reading this paper:
http://alistapart.com/article/responsive-web-design
(OK, I know it's five years old, but it has stood the test of time, and it's a quick, easy read! ;) )

Then consider this book:
http://abookapart.com/products/responsive-web-design



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.