Responsive WP Themes

[elurie]

hi there,
I understand you are working on a responsive update to Suffusion. I have been looking into what it would take to make some of my sites responsive and found this from Joni Korpi, Less Framework and Framelesshttp://lessframework.com/. It looks interesting.

The three sets of typography pre­sets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio.
Technically
The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code seve­ral child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do. They will also inherit all styles given to the Default Layout, so coding them is very fast.
If you think of Mobile First as progressive enhancement, Less Framework will feel more like graceful degradation; old desktop and mobile browsers will only use the default 992 px layout. While not being ideal for accessibility, this also means you will not have to IE-proof any of the child lay­outs, and can freely use modern CSS in them.

http://framelessgrid.com/ Frameless is a new fixed-width adaptive grid and the successor to Less Framework.
Less is only “more or less” a framework, in the words of its creator. There are none of those ugly “.grid-24″ classes—instead, you’ll simply find a few reset styles, some sensible typographic defaults, and four media queries with the relevant body widths, for four different common resolutions. Those four layouts include some helpful comments on how you could divide them up into golden-ratio-friendly grids.

Whiteboard Framework 3.1.2 http://whiteboardframework.com/ — Whiteboard is a WordPress framework designed to take advantage of not just Less Framework, but also various WordPress features. Using Whiteboard, theme developers can create their own responsive WordPress themes and still easily take advantage of the features in WordPress 3.0 and up.
I like this way of doing responsive, but I want to use Suffusion for WP web development.

[Colin]

I thought Sayontan said he wasn't going to do a responsive layout. There again I could be mistaken.

Personally I don't see what all the fuss is about over Responsive layouts. My sites look fine on my iPhone and are easy to navigate.

[sayontan]

I thought Sayontan said he wasn't going to do a responsive layout. There again I could be mistaken.

I actually said I will do it, as soon as I figure out what to show with it . Personally I am not sold about terms such as "mobile first". And I also don't agree with folks who keep saying "Pinch and zoom is bad UX" (I find myself wishing that "responsive" sites would let me zoom in, when at the end of a tiring day I find it taxing to read small fonts on a mobile screen). Anyway, regarding responsive design:

1. It is a part of my roadmap, but I need to get the HTML5 version released first.
2. I need to give the functionality some serious thought, because I find a lot of the concepts very gimmicky.
3. It will be an "opt-in" rather than something on by default, because IMO unless your analytics tell you that most of your visitors are mobile users, there is no point focusing too much on it.

I understand you are working on a responsive update to Suffusion. I have been looking into what it would take to make some of my sites responsive and found this from Joni Korpi, Less Framework and Framelesshttp://lessframework.com/. It looks interesting.

I am familiar with LESS and SASS, but these have nothing to do with responsive design. E.g. Consider the current Suffusion skinning files. For each skin you have a skin.css file. The files are very similar in their structure and the only things that vary in them are the font and background colours. If I were to use LESS/SASS I could potentially combine all those skin.css files into one - something much easier to maintain. Of course, you could use LESS/SASS for responsive design, but that is more of a by-product of their functionality rather than their core functionality.

Thanks for the other references, though.