ThemeShaper Forums » Thematic

[closed]

Thematic & Implementing Responsive Web Design

(30 posts)
  • Started 2 years ago by proto
  • Latest reply from ScottNix
  • This topic is not resolved
  1. proto
    Member

    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://forums.themeshaper.com/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!!

    Posted 2 years ago #
  2. 1. just paste my adaptive sheet into your style.css. don't overcomplicate. plus i', pretty sure that media queries don't work in an imported stylesheet (@import)

    2. IE SUCKS ASS! no nice way to put it. you could use a script called responsive.js, but i vastly prefer to serve old IE a fixed-width, simple design. update your freaking browser. (though i did just find out that windows XP users cannot update to IE9.. sigh)

    http://jonikorpi.com/leaving-old-IE-behind/

    you'll need to "fake the HTML5 boilerplate" <html> header which is easy thanks to @scottnix. it gives browser classes on the HTML tag, and b/c they are based on conditional comments, they don't get cached by caching plugins, so you'll always get the appropriate IE class.

    http://scottnix.com/html5-header-with-thematic/

    then you can design for ie using the IE classes, for example:

    .lt-ie9 #header {
      width: 800px;
    }

    3 - depends on whether .col5 is defined as fixed or percentage

    4 - this is the crux of the problem with responsive design
    http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
    they're up on github too:
    https://github.com/filamentgroup/Responsive-Images

    i've also found the easiest solution is to use Sencha
    http://www.sencha.com/learn/how-to-use-src-sencha-io/

    whether there is a serious performance improvement i couldn't say. here's how to point all images to go through the sencha cloud

    //filter image attributes to help make fluid
    function kia_attachment_attributes($attr, $attachment) {
    
    	//point image sources to SENCHA API
    	$kia_attr = array (
    		"class" => 'fluid ' . $attr['class'],
    		"src" => "http://src.sencha.io/" . $attr['src'],
    	);
    
    	$kia_attr = wp_parse_args($kia_attr,$attr);
    
    	return $kia_attr;
    }
    add_filter('wp_get_attachment_image_attributes', 'kia_attachment_attributes', 10, 2 );

    5 - best not to use pixels for fonts, so ems or % are fine. there is something to be said for adjusting font sizes based on device, but i'm not 100% on that. for instance i firmly believe in 100% on desktops... which is approx 16px. but mobile devices can have a smaller font b/c they are held closer to your eyes.

    6 - see my previous link about leaving old IE in the dust. seriously, serve up a simplified version of the site, but don't kill yourself making all the bells and whistles of a modern browser try to work on that p.o.s.

    7 - don't know.... don't have a mobile device to test with. the solution isn't JS, but probably using media queries with orientation:landscape versus orientation:portrait maybe this helps:
    http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
    there's more to be found with google

    Posted 2 years ago #
  3. http://jagst3r15.com is my responsive version of Acamas so far. If anything its a good solution for ipads and kindles, etc. As for smartphones I am not sure, because of images, as helga points out. I am not bothering with IE btw. We are trying to move things forward, not backwards, so screw ie...hopefully ie10 helps things a lot. I hate people who still use windows xp and think they are being retro and cool...please just update your damn OS lol

    oh and just force your users to use Justin's Cleaner Gallery. It auto re-sizes gallery images (when scaled down at least...not sure about scaling up for a 27 inch screen). I am pretty sure it doesn't address the image file size being any smaller at lower res's either, but a good solution for a gallery (need to see how to do it site-wide for all images tho). see http://jagst3r15.com/?p=555 and resize ur browser

    Posted 2 years ago #
  4. middlesister
    Member

    As for responsive images, it seems to be the holy grail of today. Everyone is looking for a perfect solution. I recently came across this: http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/

    It requires html5, but basically, let wordpress generate a small version of your image and serve that as default. Use a data-fullsrc attribute to store the address of the large version and swap the two on larger screens with javascript. The original article targets only the featured image, but can probably be tweaked to filter all images in the_content if you like.

    The images are generated upon upload but I think there is a plugin you can use to regenerate images of already uploaded media.

    Posted 2 years ago #
  5. proto
    Member

    Helga, Jagst3r15 & middlesister,

    You are all are such a credit to this forum. I'll have a look through your responses, your tips will hopefully save me hours of pain - thank you! For all those who come afterwards I hope this has helped you too. If their are any other tips from the this great community put them on here.

    When I try and add responsive design to my site I'll try and post anything useful here.

    Thanks again!

    Posted 2 years ago #
  6. I am hoping to find a plugin that can do this for me, but I don't want to have my theme users install 5 pugins out of the gate. My solution for now is to not bother with images. (lol)

    Posted 2 years ago #
  7. I'm going to use the Sencha cloud for my initial child theme release, but I think it's more of a temporary solution (even though I like that no scripts need to be packaged with the theme). I've tested it and it works well, so far.

    Posted 2 years ago #
  8. I've successfully integrated this into my theme http://wordpress.org/extend/plugins/wp-fluid-images/ (meaning I added it so it comes bundled). Going to try and test performance, but I really dont have any mobile devices except a flip phone (lol) so its hard too

    Posted 2 years ago #
  9. fark. nevermind that just did what I already have done with css, thought it was doing some JS magic, but alas it doesnt

    Posted 2 years ago #
  10. i like the approach middlesister linked to. i'll have to look into that. i think the sencha cloud would be an easy theme option. yes = enabled, no = not enabled. simple, but again i have no idea how effective it is.... for as much as i love responsive design i am so resistant to get a smart phone.

    Posted 2 years ago #
  11. yea i don't know about sencha, seems too easy. As for responsive design though, I think it's time to revisit your Adaptive layouts and update them to some type of standard (i.e. the twitter bootstrap or something like that - I noticed the theme on wp.org "responsive" uses bootstrap). Unfortunately I am quite strapped with non-wp work atm and am no expert myself anyway - I think once, if ever, the new site gets up we'd be in much better shape to get more people involved..until then its kind of a free for all imo

    Posted 2 years ago #
  12. mostly i just don't have anyway to measure any performance benefit one way or the other.

    i am going to look at bootstrap again tomorrow. i am trying to come up w/ some decent break-points for my own site (2 years in development now... working on your own site is the worst gig ever) which i could then use for thematic adaptive. those need to be rebuilt mobile first anyway. and if we improve the html tag with conditional comments (à la html5 boilerplate) then we could also leave old IE in the dust, which i'm a fan of.

    i should email gene... so what if the new site is flat out empty. it might be enough to get us moving again.

    Posted 2 years ago #
  13. I dug into bootstrap for an hour or so, but I got lost. Too much going on lol, and I don't like the bootstrap-ish look anyway (that black/blue look which could obviously be modified, but seems obtrusive anyway). I am kind of starting to get frustrated with thematic as well, because I think my theming efforts might just be better off with theme hybrid or even genesis. Of course i know that thematic lost a couple lead devs and is open source, but still kind of frustrating when other open-source projects seem to flourish...the great thing about theme-hybrid is that you know Justin has the wheel and is supervising the whole operation. Thematic is rouge atm and needs some type of direction

    Posted 2 years ago #
  14. Great stuff this, Ive implemented this, and its working well after a few tweaks... if I resize my browser, however when I look on my iphone, I get the full site... any thoughts?

    Posted 2 years ago #
  15. I am not positive, but I think it is probably this little guy.

    <meta name="viewport" content="width=device-width">

    I was actually finally building my own responsive theme (slowly), so if you wanted to save yourself some time inputting the viewport use this snippet. It also implements a HTML5 Header for Thematic (well, faking HTML5 because you can safely) but it also allows you the use of conditional classes which I use on every site now.

    // creates the doctype section ( html5boilerplate and newest Thematic style )
    function childtheme_create_doctype() {
    	$content = "<!doctype html>" . "\n";
    	$content .= '<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
    	$content .= '<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->'. "\n";
    	$content .= '<!--[if IE 8]> <html class="no-js lt-ie9" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
    	$content .= "<!--[if gt IE 8]><!-->" . "\n";
    	$content .= "<html class=\"no-js\"";
    	return $content;
    }
    add_filter('thematic_create_doctype', 'childtheme_create_doctype');
    
    // creates the head and meta charset tags
    function childtheme_head_profile() {
    	$content = "<!--<![endif]-->";
    	$content .= "\n" . "<head>" . "\n";
    	$content .= "<meta charset=\"utf-8\" />" . "\n";
    	$content .= "<meta name=\"viewport\" content=\"width=device-width\" />" . "\n";
    	return $content;
    }
    add_filter('thematic_head_profile', 'childtheme_head_profile');
    
    // remove meta charset tag, now in the above function
    function childtheme_create_contenttype() {
    	// silence
    }
    add_filter('thematic_create_contenttype', 'childtheme_create_contenttype');
    Posted 2 years ago #
  16. +1 for scott!

    Posted 2 years ago #
  17. Fantastic, just what I needed!

    +1!

    I would definitely be interested in helping out developing the adaptive theme, for instance when you go to the smaller screen size we need to leave some extra margin / padding for the content...

    Posted 2 years ago #
  18. @bigdanprice - have you seen what i've started at github?
    github.com/helgatheviking/thematic-adaptive

    maybe you can fork me and send me a pull request?

    Posted 2 years ago #
  19. your adaptive layouts work fine, but there's a few things that need to be done, which might require an actual child theme to be made (need to make it so the child theme uses ems for font size, also need to adjust line-heights at lower res's, among other things)...also need to come up with a good solution for images at lower res's

    Posted 2 years ago #
  20. Thematic's stylesheet is a formidable opponent when it comes to fonts/line-heights. :(

    Posted 2 years ago #
  21. yes but to slay it would be epic ;)

    Posted 2 years ago #
  22. I am working on it, at first I was trying to figure out a way to keep a lot of the files structurally intact, but I gave up on that. I am trying to condense and remove redundant CSS. Looks like it will have to all reside in a child theme like you mentioned.

    I am not happy about having to do something with the drop down menu. ;x

    I prepose a Thematic IRC channel. http://webchat.freenode.net/?channels=thematic

    Posted 2 years ago #
  23. i was gonna make one or ask someone to, so thanks

    Posted 2 years ago #
  24. proto
    Member

    Hey All,

    Thanks for the all the great replies on here, I've seen some really useful tips. I've setup a temporary test page for Thematic and 978.gs here, a few questions if I may to make Thematic and 978.gs work together:

    http://pixelwoo.org/978dynamiclayout/978demo.html

    I had a few questions I wondered if someone could help me with:

    1: If you look at the above demo, the containing div for the whole website I wasn't sure what to call the div that contained the whole website. If you look at the 978.gs files the div that contains the whole website is called "layout-1378", "layout-1218" etc. How do I dynamically generate that part of the markup so that my website is contained by the correct div layout depending on the screen size? Shouldn't they have called that "layout-container" or something like that and then the relevant CSS is displayed (like the way col1 means 4 different things depending on the size you view it at?)

    Even when I make the layout dynamic by editing the css layout code so that the div 'layout' refers to each specific layout container as set out in the 1378, 1218, 978, 748, 300 files etc. It still doesn't center and column one sits by the side of the title div? See here the demo for what I mean, each layout is specified in the top of each css file. I deleted the number specified in the as the container layout CSS after the layout, eg layout-1318 became layout and layout-1218 became layout also so that layout meant all of the top level containers. It still isn't quite working though (see demo above), where am I going wrong please?

    2: ScottNix's brilliant work on the applying classes, does this mean that we can target IE 7-8 (our love to hate browsers) so that 978 and it's associated grids can work on those too? How does it work - do we have to include the css files again in a separate IE css file that when the class is displayed we tell the browser to fetch IE stylesheets?

    3: Just curious - why do we create a html 5 boilerplate - is the way to get 978.gs to work with Thematic? I know they'll be a good reason for this, just curious!

    4: On the 978.gs website it says something about using a Javascript plugin to recreate the media queries: "Our demo functions on Internet Explorer via a quick jQuery plugin we wrote to simulate Media Query support." Assume this means using this plugin means that 978.gs and it's associated layouts can work with IE 6-8 with this plugin with just the files and Javascript?

    5: I understand that the viewport specifies the width of the layout (with some additional side padding for a little white space either side. Eg for the 978.gs they recommend a

    <meta name="viewport" content="width=1024" />

    Does that mean after each call to CSS in our head file we should specify a viewport: eg:

    <link rel="stylesheet" media="all and (min-width: 978px)
    and (max-width: 1217px)" href="grid-978.css">
    <meta name="viewport" content="width=1024" />

    I see ScottNix already makes a reference to the viewport in his brilliant code, how do we get to specify each one of these?

    6: The 978.gs demo site says "If you are dynamically changing the CSS with media queries, you probably want to prevent the viewport from being scaled:
    <meta name="viewport" content="initial-scale=1" />"

    Do we have to include that after each call to a a CSS file in the head of our website, eg:

    <link rel="stylesheet" media="all and (min-width: 0px) and
    (max-width: 747px)" href="grid-300.css">
    <meta name="viewport" content="width=348" />
    <meta name="viewport" content="initial-scale=1" />

    Thanks for any of your help, hopefully this will help others that come after too :)

    Posted 2 years ago #
  25. 1) I don't know if I am qualified to answer this one, but it would be a pain in the ass to use a grid system that way. It is one thing to borrow the math and apply it to Thematic, but if you wanted to use the classes from the grid system, you might as well completely rebuild Thematic from scratch also, or add 20 new divs with hooks. ;P

    2)Conditional Classes are super simple, we are just adding it so only IE will read the classes based on versions utilizing conditional comments. It is way easier than it sound. Lets say IE6 and 7 are giving your problems and you need to add padding to both to fix it.

    .lt-ie8 #wrapper { padding: 0; }

    That CSS gets placed in your main CSS file, no need to add another "IE Only" stylesheet, just keep it all in one. The CSS says "Less Than Internet Explorer 8, use #wrapper { padding: 0; }". It is super simple, you will see it used on a few modern frameworks, html5boilerplate/foundation.

    3)I try to be consistant when I say "Faking HTML5", the whole HTML5 thing is kind of gimmicky in that a browser doesn't really care what kind of doctype you feed it, so I just went with the HTML5 doctype, really I was after those conditional classes (for IE's) so we could target them since caching kills Thematics built in classes for browser type. The whole thing is the code just looks more modern with the HTML5Boilerplate.com header style.

    4) If you have your media queries set up correctly, you can use a snippet of javascript to force old IE's to be responsive. The one I have used is respond.js, works fine if you have them set up correctly. Kathy posted an article that suggested feeding old IE's a fixed width layout, I personally like this idea and am setting up my thematic theme to give IE a single column layout by doing something like this (using conditional classes).

    .lt-ie9 #branding, .lt-ie9 .menu, .lt-ie9 #main, .lt-ie9 #subsidiary, .lt-ie9 #siteinfo { width:760px; margin:0 auto; padding:0 20px; }

    boom, IE 6,7 and 8 done. ;P

    5) I don't really know anything about specifying viewport sizing. The one I posted just tells browsers to zoom in to the devices native screen width. I don't know a ton about it really other than it is on every boilerplate/front-end dev framework I have seen lately.

    6)I don't even know why you would have to dynamically do all that, what you are trying to do sounds way overcomplicated. Currently the responsive theme I am working on is one CSS file, I dunno why you would need multiples. :/

    Posted 2 years ago #
  26. proto
    Member

    Thanks so much ScottNix,

    Appreciate your detailed answers, it makes things a lot clearer!

    I was curious about the viewport sizing so thanks for tackling that one, I'm not sure whether we should then be specifying a viewport for each screen size. The 978.gs site recommends doing this. I'll try experimenting with different viewport sizes.

    Thanks again :)

    Posted 2 years ago #
  27. butters81
    Member

    @ScottNix @helgatheviking - you guys are awesome! Thanks so much for the Thematic responsive template & those doctype/head functions. Just finished building a site based on Helga's 978gs port. Although with the mediaqueries within the stylesheet (to get IE6-8 working on a responsive layout, with respond.js), stylesheet ended up at 2,500 lines :/ I tried to implement responsive columns too, which turned into the bane of my life.

    I used another nicely built responsive template (Thematic 320 & Up) on another project - I liked the fact that with that template, you created styles for the smallest layout (320px) and added styles as you increased the viewport size.

    Having a responsive thematic child theme would be amazing though.

    Posted 2 years ago #
  28. my 978 and my 1140 ports should be adapted to be mobile-first. if you ever want to take a crack at it that'd be awesome.

    Posted 2 years ago #
  29. proto
    Member

    butters81 - good job on that site. Very nice!

    Posted 2 years ago #
  30. I went ahead and converted Thematic's CSS to be mobile-first and incorporated one of the 1140px adaptive layouts Kathy made (thanks). I created a Child Theme that is meant to be a very stripped down (bare bones) starting point for Responsive Web Design using Thematic. It also comes set up with things like Normalize.css, Modernizr, Fitvids.js, custom.js file, some handy jQuery clear fixes, and some other php snippets that are commonly used by me.

    If anyone wanted to check it out

    Child Theme Demo - http://scottnix.com/themes?wptheme=Responsive%20Base
    More Info - http://scottnix.com/responsive-base-a-child-theme-for-thematic/
    Download - https://github.com/scottnix/responsive-base

    There are still some really minor issues, mostly things that could be better in a perfect world, but in my opinion it is good. ;P

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.