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.
- http://robcubbon.com/website-responsive-mobiles-tablets/ (This one got me thinking and I took a look at my stats.)
- http://www.infobyip.com/testwebsiteresolution.php (I can't thank people that build sites like this enough. Thank You!)
- http://www.webdesign.org/web-design-basics/design-principles/secrets-of-resposive-web-design.21388.html (More prep work)
- http://lessframework.com/ (I used this code to check out the new code. If I recall the lessframework has been around for sometime now.)
- https://github.com/scottjehl/Respond The respond.js file is one you should check out. I when with the css3 mediaqueries library.
- http://webdesignerwall.com/trends/inspiration-fluid-responsive-design (This link should motivate you to actually setup your site to at least test out the layouts. I know it did help me push forward and I might even work with a few images to jazz things up with the jquery img resize.)
- http://webdesignerwall.com/tutorials/responsive-design-in-3-steps (Simple easy to follow and should get you going.)
- http://www.tripwiremagazine.com/2012/06/responsive-wordpress-themes.html (I used this link to look at the layouts. As much as I like the themes I'm still a bit old fashioned and I'll keep my site just the way it is. Moved over the menus which should allow spider reading bots easier access to the words before the menus.)
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:
And the After... I know, not much in the change but now I'm good to view from 240px to 1900 or so.
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.