by      
Responsive Design using CSS and a bit of JS looks tough, feels tough but when you start working the media magic you'll find it's not so bad. I bet if you've kept up with your CSS coding you can rework your site in about 20 minutes. I've listed some of the reading material I used. Lots of test pages but it appears it's work about. Be sure to test your site after you've finished.

Responsive Design using CSS and a bit of JS.

I'm sure you have looked over the mobile device list you have in your web stat reports.

If you see 150 or more and some good hang times you can bet your site is nicely viewed on mobile devices.

I have a site that is really popular with mobiles having about 24% all mobile traffic.

The problem I see is I can't see what they see. It's difficult to check all the devices out. In fact, if you have read any of the articles related to Responsive Design it's impossible to confirm all mobiles are working good with your site.

I've spent hours are the phone stores checking my pages and then still not totally sure they work because those dang sales people keep taking the phone just as I start making notes.

Ok, back to the responsive Design notes.

Here's the short version of my link reading you can do.

Then you can view the CSS file from this site ( /css/default.css ) . The CSS code on this site has a bit of cleaning still. That CSS goes back a few years and has pieces that I'm not even sure are online anymore. Just look at the,

Wrapper, Header, Content, Body, sidebar, leftcolumn and rightcolumn then down to the @Media entries.  

Don't forget about the JS file ( /scripts/css3-mediaqueries.js ) .

What I wanted to test is clear if you read the files. I wanted to see if it's possible to create a site that will respond to different devices from about 240x320 to 1920x1200 without much effort.

Honestly after reading from a couple of websites it did seem to be very difficult but then when you copy and past the JS code and add the @ media screen and statements you're just about finished.

It took me longer changing sizes and moving things around then it did creating the new CSS sheet.

I recommend that you read from the following sites: (No real order here. I'm just taking them from my tabs.)

You might have some great resources as well. If you find some good reading feel free to email the links.

I had a few other sites and not to forget CSS Tricks is a great read as well. http://css-tricks.com/

Testing your site: http://browsershots.org/  Be sure all the browsers you support show up. Pick one of your more complete pages not just your home page. Let the applications run. I do believe mobiles can be tested but at the moment I can't remember the site. I have it bookmarked in one of these VM's.

If you resize the main page you'll see the magic. I'll attempt one of these layouts on another site that has some code I work with better. Great site and great articles.

Good luck! Let me know when you start working with the new CSS. I'd like to take a look at what you have created.

Styles are always fun to work with and building the images to make it come alive is also a great time. For me, I'd rather skip the image part and just work the CSS with text. Graphics haven't been one of my stronger talents. If it wasn't for those "Do the Images" type of programs I'd be using spacer.gif transparent allot more.

Have fun with your CSS.

Before and After Pictures:

Xtreme Computer -Old -CSS-Layout

And the After... I know, not much in the change but now I'm good to view from 240px to 1900 or so.

 

 

Xtreme Computer -New -Responsive -Design -CSS-Layout

IT Services for Home and Business Computer and Server users.

XtremeComputer.Com Supports in country IT Services.Schedule your Service Call Online.

Technical Support = Online + Remote + Onsite Service
Computer Support and Repair for Home and Business Computer Users.
Registration and Service quotes are free. Give us a few details about the IT issue and we will offer our support tier that fits best. New Computer users should use remote services to start.
Supporting not only computers, networks, servers but also computer users, field technicians and IT departments.

Responsive Design using CSS and a bit of JS looks tough, feels tough but when you start working the media magic you'll find it's not so bad. I bet if you've kept up with your CSS coding you can rework your site in about 20 minutes. I've listed some of the reading material I used. Lots of test pages but it appears it's work about. Be sure to test your site after you've finished.