Common Mobile Layouts
Common Mobile Layouts
Vancouver's HTML5 Meetup Group hosted John Boxall “Common Mobile Layouts” talk on Thursday, Sept. 7, 2011. I'm going to share his wisdom with you, as well as that of Mozilla's Jeff Griffiths, speaking on new and developing Mozilla initiatives, and Steam Clock Software's Nigel Brooke, introducing WebGL.
This meetup vastly exceeded the expectations of the organizers: about 30 people crowded into a room designed for about 15, making for a cozy, hot – I mean “hot” as in “heat” - experience! Thankfully, our hosts, IQMetric, fed us pizza, beer and other assorted cold drinks: no one passed out! Hurray!
The evening was structured with the two lightning talks first, then the main talk. I'm going to reverse that order, though I encourage you to read to the end: Mozilla and WebGL - the bomb!
Common Mobile Layouts
Boxall, an engaging and knowledgeable presenter, began by telling us that his talk would cover:
- a boilerplate, and
Webkit, Boxall says, is the layout engine used by close to 100% of mobile devices. Thus, his tools for laying out mobile apps are:
- a webkit inspector,
- livereload, and
95% of mobile development can be done on the desktop, using a webkit browsers' development tools, says Boxall. This translates into Safari and Web Inspector, or Chrome and Developer Tools. Yep, you heard that right: 95% of mobile development can happen in your desktop browser. He did mention that when designing apps, you might want to check things on an actual device, citing the example of length of pages: on a browser, scrolling through a long page is not nearly as onerous as on a mobile device.
Here's the github repo: https://github.com/mockko/livereload and here's what it is:
"LiveReload is a Safari/Chrome extension + a command-line tool that:
- Automatically reloads a page when any other file changes (html, image, server-side script, etc).”
Say goodbye to Cmd-Shift-R!
Sassy CSS; formerly known as Syntactically Awesome CSS (SASS), is a language that you apply to your CSS, that allows you to do things that you cannot do with straight CSS. You can set base text colours, for example, and use percentages of those bases for headers and other elements. You can use math operations or symbols to adjust the size of base margins. You can nest CSS elements to avoid code repetition, and much more.
What's the difference between SCSS and SASS? Syntax. SCSS is a superset of CSS3: every .scss file is valid CSS3. SASS, which preceeded SCSS, is written a bit like HAML: you don't use brackets and semi-colons, but indentations, to specify tag endings and groupings. Though SASS is being replaced by SCSS, .sass files will continue to be supported. All about SASS/SCSS: http://sass-lang.com.
As I write this, John has not posted his talk slides yet. I expect they will be posted soon, and will include his boilerplate. What's a boilerplate? In programming, “boilerplate” refers to snippets of code that need to appear, as is, or near as is, in many places. In HTML, this is a boilerplate:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
Boxall's boilerplate for creating mobile layouts is, he says, pretty much Paul Irish's HTML5 boilerplate, with additions to the viewport tag, and body classes.
Paul Irish's boilerplate: get it here.
Header Layouts - “The Split”
Boxall first talked about header layouts. He described what he called “The Split”, which as you might guess, floats the logo to the left and the menu buttons to the right.
Fluid layouts are the way to go for mobile, he said, mainly to deal with vertical and horizontal displays being used for the same content. Margins around elements can be hard-coded in pixels, but everything else needs to expand and contract to fill the screen. Any space around clickable elements, he reminds us, should be added as padding to the element, to make the clickable area as large as possible. With the Split header layout, Boxall reminds us not to make the area between the logo and menu items linked: on iphones, users can tap the top middle of their screens to return to the top of a page, and you would not want your app to interfere with this native functionality.
"overflow: hidden" is another CSS property Boxall makes great use of. He uses it mainly for a side-effect of the property; namely, that when applied to an element beside a floated <div>, it keeps the element from running over or under the floated <div>. Read about it here.
Footer Layouts – “The Grid”
Along with common website footer elements, copyright, contact info and/or privacy info, mobile sites usually include a:
- “back to top” anchor, and
- “view full site” link.
Boxall described a “Grid” layout for footers, which he makes using CSS defined tables (ie. “display: table;” and “display: table-cell;”. Working with fluid layouts, he wants to keep borders and padding from being added on top of his elements' widths (and heights), so he uses the “webkit-box-sizing: border-box” property. Using this property, he can easily float divs, for example, uniformly giving them a width of 50%, 33.33%, 20%, etc., and have them all line up nicely beside each other. More on the “webkit-box-sizing” property here.
Lastly, he uses the CSS3 pseudo-class, “nth-of-type” to target odd or even elements in table-like layouts. Read about “nth-of-type” here.
Jeff Griffiths shared “5 Things”:
- Jetpack – if you want to write a Firefox extension, Add-on Builder and Add-on SDK are ready to help you, now!
- Open Web Apps/Web Intents – Open Web Apps is Mozilla's API for Firefox, while Web Intents is Google's API for Chrome. Both aim to make it easier to connect applications and web sites, or to make their respective browsers work more like operating systems. Mozilla and Google recently announced that they will work together to make an API that works across both Firefox and Chrome
- BrowserId – An identity system, tied to something like a person's email, that allows them to easily and securely sign into web sites without having to remember a whole bunch of passwords. Coming soon! (Can't wait!)
- WebAPI – An API for accessing device hardware from the browser, WebAPI, along with HTML5, aims to replace the native mobile app. Mozilla's goal is to have working tech available by March 2012.
The downsides to using WebGL, aside from the less than universal browser support, include less than optimal performance in some situations and the large development effort required.
WebGL frameworks include:
- Spider G
Visit http://learningwebgl.com to learn more.
That's it! All in all an informative night comprised of solid mobile development tips from John Boxall and great overviews of existing and developing technologies from Jeff Griffiths and Nigel Brookes. Thanks to the Vancouver HTML5 Meetup Group organizers, IQMetric and of course, John, Jeff and Nigel for dropping knowledge.
John's slides: coming soon.
Jeff's slides: http://talks.canuckistani.ca/5things/#1
Nigel's slides: (Nigel?!)