Hello All,
I have been reading about responsive web design and think combined with Thematic these make pretty powerful tools. I had a few points of how I think one might implement it. There's some great threads on responsive web design, ( http://themeshaper.com/forums/topic/responsive-web-design-and-thematic#post-18717 ). But I couldn't see anything on how to implement it. I've also seen Helga's brilliant work on Github ( https://github.com/helgatheviking/Thematic-Adaptive ).
My assumptions on how to implement it:
1: Call the 978.gs (and all other browser size CSS files) files to be my stylesheets? Using a function in my child theme's functions.php file? Something along the lines of:
// Add Responsive CSS to to the header
function webmagic_add_responsive_css() {?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>
/css/grid-1218.css"type="text/css" media="all and (min-width: 1218px) and
(max-width: 1377px)" href="grid-1218.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>
/css/grid-1218.css" type="text/css" media="all and (min-width: 978px)
and (max-width: 1217px)" href="grid-978.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>
/css/grid-1218.css" type="text/css" media="all and (min-width: 748px)
and (max-width: 977px)" href="grid-748.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>
/css/grid-1218.css"type="text/css" media="all and (min-width: 0px)
and (max-width: 747px)" href="grid-300.css" />
<?php ;}
add_action('wp_head','webmagic_add_responsive_css');2 - Assuming I have a custom design on my homepage. Say on my 978px I have a .col5 (width: 390px;) assume that div will then adapt to the grid-300.css and display it at {width: 183px;}?
3 - How does one serve optimal images for an iphone and a 27" Widescreen Mac - is there a way to do this easily?
4 - Assume font size will have to be specified as em so that it changes the font size to display accordingly? Anything else like this that needs to be em or % people should look out for in their CSS to avoid being tripped up?
5 - I see 978 and it's associated CSS are CSS3 compatible but therefore only compatible with modern browsers and IE 8 onwards, what about our love to hate browsers (IE 6-7?) I know they're small usage but is there anything to be done other than feel sorry for people browsing using these pre-enlightenment browsers? Do I need to add something else to make IE (or even only certain versions of IE work? Eg, Javascript or can I just use PHP / HTML?
6 - Assume the gs system apply the 978.gs in landscape and then the 748 in portrait automatically for the Ipad using the above code? Looking at the 978.gs website it appeared to be that way ( see bottom of page - http://978.gs/browsers/ ) Or do I need to add more code, javascript or something?
I thought by itemising the assumptions this will hopefully help people who come after me too as responsive web design will probably only continue to get bigger in the coming years, hopefully this thread will help others too (fingers crossed!!) :)
Thank You for any help even with just one of these!!
