16

I've used Zurb Foundation and Skeleton before so I'm familiar with both but I never had to convert an existing website to a responsive website before. Whats the quickest method to convert my website? Using a framework like above, or adding Media Queries for the code already provided? (Does that even work?)

Saurabh Dhumane
  • 3
  • 2
Joe Bobby
  • 2,803
  • 10
  • 40
  • 59
  • 2
    Responsive to what? Are you talking about website performance? You reference media queries which are about something different. I think we confused. What is your question really about? – jfriend00 Mar 29 '12 at 00:43
  • 12
    @jfriend00, the term “responsive”, in web design (and specifically “responsive design” per the question’s tags) refers to websites that dynamically adjust their layout, using CSS media queries, for whatever size of screen they find themselves on. – Noah Witherspoon Mar 29 '12 at 00:57

3 Answers3

32

Determine which devices you want to support and then add a stylesheet with something along these lines:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

It's easiest to test if they go in descending order. more example media queries here:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
  • thanks! So doing it like this would be the easiest way to make the website responsive – Joe Bobby Mar 29 '12 at 19:25
  • Yes, because you can add it to an existing stylesheet and start doing overrides immediately. – Matthew Darnell Mar 29 '12 at 19:55
  • 1
    Did you do this Joe? What were your results? I am about to do the same on a customer's web site and I'm trying to decide whether to recommend that they rebuild their CSS from scratch (which is a rather large project), or do it this way. – vrutberg May 22 '12 at 14:47
  • @MatthewDarnell : Thanks for your answer. I am also about to do the same on my web site. The question is my site is float based means fixed height and width and that is working on all major browsers on desktop. So will this code work for my site. Let me know your reply. – J.K.A. Feb 26 '13 at 07:36
  • use em's instead of pixels!! –  Jul 15 '13 at 19:10
  • Phones currently have FULL HD so pixels is not the way for measurement! – Viking Jun 09 '16 at 10:18
3

In my case I need to re-write the website from scratch because my responsive style file didnt resolve the problem.. So I rewrite my Styles using LESS and the I create a responsive stylesheet with the correct media queries like Matthew Darnell do.

I'm not familiar with Skeleton but Twitter Boostrap works fine for me.

Full-Stack Software Engineer
  • 1,238
  • 2
  • 10
  • 10
0

If you're willing to do a little brain work and migration, there's a way to install foundation on a currently existing project (specifically compass projects).

You first need to have compass installed and turn the project into a compass project. An easy way to do this is via code kit and just dragging and dropping your project folder into code kit. You can get some terminal hints via this page on the foundation website.

http://foundation.zurb.com/docs/sass.html

You'd then need to open terminal and type

cd /path-to-your-project-folder/

then type 

compass install -r zurb-foundation foundation

You can try and use foundation alone on an existing application by using completely sass (no compass) but you'd have to download foundation from the git site and @include the scss one by one. You can find information in the page I've listed above.