Website Redesign: Responsive Web Design

I know when designing a website you are supposed to start off designing for the smallest device and move out to the widest screen. I also know that websites should be tableless.

I have 300 pages on this website. It does use some master pages. So that helps a little. The website is table-based in structure. There are lots of forms.

I’ve done tableless brochure sites before. But I’ve never redesigned an existing website especially with forms into a table-less site. I’ve never done a responsive site either, but i understand the concept after watching the videos on Learnable.com.

Here are my questions:

  1. Am I being naive in thinking that this should be fairly easy just tedious? (not a large learning curve) It doesn’t appear to require a ton of knowledge just time and creativity. That is my opinion of it. Or will i need to read a book on this? I don’t mind. But a quick book is better than say 300 pages. I’m not sure that is necessary.

  2. This website built with tables obviously was not built with a narrow view in mind. but I’m assuming that since I’m replacing the tables, the redesign can be done with narrow view first and then try to make the site look as much like the original as i move out. What do you think?

  3. Should I seriously consider Bootstrap? I hear that these frameworks can prevent you from really learning how to do the code yourself. How long will it take to learn bootstrap?

  4. Javascript and JQuery. I know NOTHING about these. My understanding is that the HTML and CSS should be fairly agnostic about Javascript and JQuery. I understand that some items will change (possibly navigation is what comes to mind. They have a very complex navigation system) but it should not be intensive, i would assume. What do you think?

I want to know what I’m getting myself into before i say yeah i can do this! Then i find out, i didn’t know nearly enough about the subject.

Thanks guys!

It’s just what some people recommend, but it’s not a rule or anything. :slight_smile:

Am I being naive in thinking that this should be fairly easy just tedious?

I don’t think so. There’s nothing particularly difficult about creating a tableless responsive design, but it may just take a while to set up all the pages (though you probably only need to design a few templates in terms of HTML/CSS).

Responsive design introduces some design constraints, so hopefully the client is not attached to the current design, as it’s probably not deal for a responsive site.

JavaScript is just an option, but it’s good to make things work without it anyway.

Some questions to Ask:

  • Is the site made up of ONLY static HTML and CSS files. Assuming there is data entry at play I would expect not. So as a “designer” will you responsible for modifying server-side code to achieve the new design vision? If so what language(s) are being used on the back-end and to what extent do you have aid from others who would be more knowledgable at making server-side changes when required. Assuming you are expected to know HTML the HTML is likely mixed with some form of server-side code. Are you prepared to learn enough about the server-side language being used to manipulate the HTML without breaking anything functionally.

I would recommend staying away unless you’re building an admin area with little creative direction and the default bootstrap look would be acceptable. Otherwise I would highly recommend taking this as an opportunity to learn a css preprocessing language such as; sass. There is also a huge ecosystem of powerful sass extension that make things easier ranging from [url=http://compass-style.org/]CSS3 effects to [url=http://susy.oddbird.net/]grids to [url=http://breakpoint-sass.com/]responsive design and many many more. Serious developers use preprocessors because normal css sucks. Whenever I have to go back to using plain jane CSS it is like going from a automobile to a horse and carriage…

In my experience sites that are fairly interactive with a lot of data entry require a combination of server-side and client-side to deliver an effective experience on multiple devices. In many cases when dealing with large sites that act more ike a web application dedicated mobile is a better approach than responsive. Remember client-side code can really only change the look and feel but not the flow of interactivity or workflow. So in cases where a different “workflow” is required going straight client-side responsive rarely provides a useable and optimized solution.

I don’t think there would be 300 physical pages. if you say there is a lot of forms the site is probably dynamically built with server-side to handle the actual form processing and back-end logic that the site functional. Having said that if you don’t understand the concept of a dynamic site and the server-side code enough to make changes in a template without breaking something you’re probably a little out of your depth. This all comes back to the first paragraph though and asking the right questions up front.

the redesign can be done with narrow view first and then try to make the site look as much like the original as i move out.

I don’t very often see the need to simply convert a table site into css and have it look the same. You should take the opportunity to re-design and update instead and go with the strengths of css and not try to copy a table layout as such (although of course we don’t know what your site actually looks like - I’m just guessing). Think of it as an opportunity to improve and re-design the site rather than trying to simply copy the original.

RWD is more time consuming that designing simple fixed width sites because you have to take into consideration how elements will behave at different widths and how your content adapts to these changes which in turn determine how you set them up in the first place. It’s not rocket science but you do have to think ahead.:slight_smile: