Over the last few years, Web designers have begun to apply many of the same principles to their digital work, and a number of popular frameworks, such as the 960 Grid System ( 960.gs) and the Semantic Grid System ( semantic.gs), now make grid layouts accessible to all. That two-dimensional structure made up of intersecting vertical and horizontal axes allows a designer to align and organize elements in a visually pleasing way on a layout, as illustrated in Figure 1. Using a grid for typographic design is a practice that has been around in some form or another for centuries, predating even the invention of moveable type.
By the time you’ve finished this article, you should have a solid foundation for implementing responsive Web design in your own applications. I’ll also mention some popular frameworks for creating mobile Web applications, and wrap up with a brief discussion on using HTML5 to build “native” applications. Along the way, I’ll note some frameworks and libraries that help you adopt these techniques. I’ll start with an overview of some up-and-coming CSS layout modules, and then discuss some techniques for making non-textual elements such as images and embedded video adaptive as well. This month, I’ll introduce you to some ideas around these other two pillars of responsive Web design. Media queries are the engines that drive responsive, adaptive sites, but they’re only effective when site design is also responsive and adaptive. Marcotte focuses on media queries, but he also points out two other necessary practices: fluid grids and flexible images.
Last month, I mentioned the term responsive Web design, a term coined by Ethan Marcotte in his seminal article of the same name ( bit.ly/9AMjxh). Responsive Web Design, Revisitedīut there’s more to the story: CSS media queries are great, but they’re only a piece of what you really need to create great mobile Web experiences. They’re brilliant modules, for sure, and the reason I wrote about them last month is because you should be using them today. Compared with undesirable alternatives such as browser sniffing (sometimes called device detection) and having to create mobile experiences on a per-platform basis, media queries seem like a true gift. To wit, the introduction to media queries in the previous article was framed around the creation of tablet and mobile experiences.Ĭonsidering the difficulties building mobile sites and apps presents, it’s no wonder that media queries took off.
Though media queries have broad applicability across the device spectrum, they’re often mentioned in the context of building mobile sites and applications. Last month, I introduced you to CSS3 media queries ( /magazine/hh882445), a new module that allows you to adapt page styles based on conditional rules. Volume 27 Number 05 Building HTML5 Applications - Using HTML5 to Create Mobile Experiences
0 kommentar(er)
