I want to start this discussion because of a conversation that came up today in the #drupal-omega IRC room.
The idea is to introduce a completely restructured layout/presentation architecture into Omega incorporating the mobile-first method, and using @media-queries in order to adjust/alter presentation for other screen sizes.
I've seen this topic come up a lot, and there currently (that I know of) isn't any theme, little on a base theme with the power behind it Omega has, and this could be the piece to the puzzle that really takes it home down the road, and for some of my future plans with the project, and my own business model.
References
Examples of adaptive design
- http://colly.com/
- http://sasquatchfestival.com/
- http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html
- http://garretkeizer.com/
- http://adfont-calendar.com/
- http://www.yiibu.com/
- http://simplebits.com/
- http://seesparkbox.com/
- http://handcraftedpixels.co.uk/
- http://css-tricks.com/
With each of the examples above, make sure you are resizing your browser window, and noticing how things adjust based on the size of the browser. Also, try some of the links in your mobile browser, and see the effect as well.
The key here is, and can be clearly understood stepping through the presentation slides in the first resource link, that it is imperative that we begin building and designing for mobile first, THEN working on our more advanced browser capabilities.
The question in my mind is NOT this:
If this type of baseline structure should be built into Omega
The question in my mind IS this:
How?
And not how like how do I do media queries, or how do I make it all fancy and crap like that, but the how is meant to be... what would be the best approach...
If you note this link, you see (by resizing your window width) how the site adjust and changes, but in sequential steps of predefined sizes. You see in this link the site (using the same technique) adjusting fluidly, making a lot more adjustments.
Omega has both the 960 grid fixed width and fluid width ability, so the way I envision this option is to essentially start with a clean CSS slate (in a new omega subtheme) which is based on the mobile device ONLY... this would use something (still in the grid system mind you), but targeted for <320 pixel browsers. In this case, the grid elements would just all stack on top of each other, and be the same width. Then there could be step ups (notice this link again).
I envision let's say 4 sizes:
- < 320px = stacked elements
- < 800px = normal 960gs functionality with altered grid widths
- < 1020 = 960gs at its best
- > 1200px = normal 960gs functionality with altered grid widths
That's my thought, and the general idea of the chat in IRC today... I'd love to hear some thoughts as this IS a high item on my priority list, but I want to really confirm a good path to take. While it may be "easy" to build something like the example sites above in an one-off site theme, building similar functionality into a base theme like Omega is a much more daunting task to ensure that it is flexible enough for ALL applications, and provides a perfect starting point for this type of adaptive web design.