Turn Your Mobile HTML 5 and CSS Strategy Inside Out
Posted by M. David Green on June 28th, 2011 filed in CSS, HTML, HTML 5, Mobile, Progressive Enhancement, semantic HTMLComment now »
Developing for mobile devices seems to come second for most web developers, after developing for the traditional desktop web browser. When thinking about supporting different browsers, we generally focus on progressive enhancement in terms of adding functionality rather than basic layout. But if you think about how your semantic HTML will be used, it’s likely you’ll come to the same conclusion that I did: a mobile device should be your first target development platform.
One of the principles of semantic HTML development is that you want to boil your page down to its most elemental, essential components before you start, and build your structure around these. HTML 5 provides a number of new page elements that can help identify those basic components, but it doesn’t change this key approach.
However, the need to support the smaller screens and tighter bandwidth associated with mobile devices actually provides a developer with a new opportunity. By paring down a site to the minimal set of components necessary for a complete mobile experience, a developer can create a solid semantic structure for that page right from the start. A page built in that manner is much easier to enhance for a richer desktop experience than it would be to trim away desktop features for a more minimal mobile device experience later.
This is the bare essence of progressive enhancement, and it will sharpen your focus as it streamlines your process.
To do this effectively, it may be useful to turn your CSS inside out, and build your standard stylesheet as if all you were developing was a mobile site. Once you have that working the way you want it on a mobile device, you can specify the presentation for desktop web browsers conditionally. This not only keeps your stylesheets lean and responsive; it also helps you focus your development efforts around the most critical elements of your site.
This may sound like a very different way of approaching your site development, but it’s not all that complicated, thanks to a few convenient CSS conventions. The real trick is thinking about your desktop site as an enhanced child of your mobile site, instead of the other way around.
For example, imagine you’re creating a new HTML 5 website with a main page, a set of related subpages, and a template that involves a standard header, footer, navigation menu, and a sidebar with a set of elements you want repeated on each page. You’re already ahead of the game if you’ve visualized this as a set of repeating components that can take advantage of our new semantic HTML 5 elements, such as header, footer, nav, article, section, and aside.
The first question to ask is what the simplest presentation of a site like this could be. If you stripped away anything that would detract from a user’s experience on a mobile device, what would you have left? Might the sidebar elements be extraneous? Or if they are necessary, do they have to float off to the side, squeezing the space available for the main content of a page, or could they be pushed down to the bottom of the page?
With these thoughts in mind, you might start building your semantic HTML 5 page skeleton by populating a header, article, and footer, inserting both a section and an aside into the article. Put the elements together in the order that they would be read logically if there were no styles applied, and you can begin to imagine how they will appear to a mobile device. So the aside would be placed after the section inside the article. That way it will easily fall after the section on a mobile screen when the page is built, unless you explicitly position it to the side.
After building the basic semantic HTML structure, and making sure that all the elements on the page use appropriate HTML 5 elements, you’re well on your way to having a mobile site that flows easily into a small screen with few bandwidth-hogging embellishments. In your stylesheet, you can now add all the design driven rules for features such as colors, fonts, alignments, and background images to make this lean and sleek mobile site support your branding and style guide requirements on your iphone or Android device, or any mobile device that supports CSS styling. Remember that all these styles will be inherited on the desktop, saving you the trouble of re-creating them independently for both environments.
To add styling for desktop browsers, you just need to add the following @media definition to your CSS stylesheet, and put your desktop-specific CSS definitions inside of it:
@media only screen and (min-width: 768px) {
/* Put desktop CSS definition overrides here */
}
This definition includes a conditional statement querying the browser window to see if it is 768 pixes wide or wider. Since this definition falls after all your general CSS style definitions, it will override them selectively, and let the rest cascade through. And because these definitions sit inside of the @media definition, they will only be applied in the case of a browser with a width of 768px or more.
So for example, to get that aside sitting comfortably off to the right of your window in desktop browsers, you might want to float the section and the aside to the left, and give the article a hidden overflow and a right padding the width you want the sidebar to be. Then give the section a width of 100% and a border-right the width you want the sidebar to be, and a negative margin-right that matches. Then give the aside the same width, giving it a negative margin-right that matches the right border width of the section:
@media only screen and (min-width: 768px) {
article {
padding-right: 250px;
overflow: hidden;
}
article section {
float: left;
width: 100%;
border-right: 250px solid transparent;
margin-right: -250px;
}
article aside {
float: left;
margin-right: -250px;
width: 250px;
}
}
Now your mobile device and your desktop browser will share most of the same basic styles, and the same semantic HTML structure, but the site will expand horizontally on browsers wider than 768px to allow the aside to appear as a sidebar next to your page content.
And there may be other rich presentation elements such as tabbed navigation or larger background images that you would want to incorporate into your desktop browser experience in the same way. This is the place in your CSS to do it.
Of course, some older browsers might not recognize conditional @media definitions. But that’s another benefit to using this approach. Those browsers will ignore these new definitions, and serve those users the pared-down but fully functional mobile-friendly version of your site–which is probably what you want when trying to support ancient technology in the 21st century.
Developing your site inside out, considering the mobile device application first, will strengthen your skills and improve your process:
- For web developers, it forces you to focus on the basics first, and use progressive enhancement at the deepest levels of your page structure.
- For user interface and user experience designers, it isolates experiential design from visual design in a way that supports the advantages of each platform and how users expect them to behave.
- And for visual designers, it encourages the creation of a device-independent style guide, as it separates branding from layout to optimize the user experience for each type of device.
Once you get your head around it, you may never go back to developing pages for the desktop first.
Digesting an interesting meeting
Posted by M. David Green on June 9th, 2011 filed in Culture, Media, SocietyComment now »
Taking a quick walk to ponder some interesting ideas that came up at an informal lunchtime brown bag meeting.
What is the object?
How do we make that apparent?
Nice that this great spot is only a seven minute walk from the office.
Just another glorious San Francisco sunset
Posted by M. David Green on June 1st, 2011 filed in Uncategorized1 Comment »
Back at the office
Posted by M. David Green on May 31st, 2011 filed in Uncategorized1 Comment »
Does it get any better than this?
HTML 5, Progressive Enhancement, and Semantic HTML
Posted by M. David Green on May 29th, 2011 filed in CSS, HTML, HTML 5, Javascript, JQuery, semantic HTMLComment now »
HTML 5 is supposed to change everything all over again, but can we use progressive enhancement, or does HTML 5 mean starting from scratch after all the lessons we’ve learned about semantic HTML and beautiful markup from HTML 4?
Different web browsers interpret HTML differently. It’s a fact of life, and it can feel like a curse to HTML developers when their clean semantic HTML and CSS code fail to deliver the same results to users across all browsers. Yet the folks developing the next generation of browsers continue to push forward with browsers that include incompatible features from unreleased standards, or proprietary standards that lure us into innocently building web apps that break for our poor users on competing browsers. That’s happening right now with CSS 3 and HTML 5 (branded as “HTML5″ by some and just plain “HTML” by others).
The proposed HTML 5 standards introduce a number of useful semantic elements that can help HTML developers plan the structure of their documents. But even with the new web standards in flux, the savvy HTML developer comfortable with the concept of progressive enhancement can start using these elements right now.
New HTML 5 Semantic Elements
Among the new semantic HTML elements to help a developer structure a web page are new general container elements called header, footer, and nav. These are block-level elements that can replace the conventional div with a class of header, footer, or nav commonly used by HTML developers for branding, nav bar, and attribution.
We now have article, section, and aside elements to group content within a page. And since a single page of HTML 5 may have multiple sections with multiple articles, or multiple articles with multiple sections, the cascading style sheet selectors for these elements should provide inheritable styles, just as it would be with a set of divs that share the same class.
Each of these articles or sections, as well as the main content area, may now also have its own hierarchy of headers from h1 to h6, wrapped safely inside its own header elements. No more limiting yourself to a single h1 per page. The CSS styles for these headers can be inherited logically based on the containers.
Progressive Enhancement
But we still live in a world where we have no control over the browsers a user might have. Is it an old one, designed well before standards for HTML 5 were even proposed? Or is it a new one, with a unique idea of how to interpret the elements in this new unfinished web standard?
Happily, there are some Javascript utilities that are coming to the rescue. One of the smallest and simplest is the Google HTML 5 Shim. This simply allows older browsers to recognize the current set of HTML 5 elements for the sake of CSS styling. Yes, this even works in Internet Explorer 6!
Another tool is Modernizr. This handy bit of code includes a shim, but also adds several enhancements that allow features such as advanced CSS3 selectors to take advantage of the native features of older browsers. After all, if we’re going to create our beautiful markup, we want our cascading style sheets to have all the modern advantages, too. To get started using it, all you have to do is include the script, and add a “no-js” class to your html element.
What We’re Losing
The proposed XHTML standard many of us adopted—in spite of the way it was actually interpreted by web browsers—isn’t going away. However, future development has been halted, and we are being encouraged to use HTML 5 instead for web development. HTML 5, like earlier flavors of HTML, doesn’t require us to close all of our elements the way XHTML does, and supports target tags for opening links in separate windows. Of course, creating structured HTML with XML-inspired closed elements is still a good practice, as it makes our page structure cleaner and easier to manage and maintain.
One of the convenient enhancements that follows the practice of actual HTML developers who ignored the published standard is that we no longer have to worry about including block-level elements inside our anchor elements. It is now permitted to put an entire div inside a link, and our HTML 5 markup with still be compliant.
And although we’ve all learned to favor em and strong elements over i and b elements…some of the time…HTML 5 has reinvented our old bold and italic friends, redefining them based on how they have been used by HTML developers over the years instead of deprecating them.
There are plenty of other changes in the proposed HTML 5 standards, but these are a few that might get you started down the right path as you apply the concepts of progressive enhancement to your HTML development.
So with a good sense of semantic structure, we can approach any web design we encounter and parse it into clean, cross-browser compliant HTML 5 based on the web standards that exist. It just takes a little sense, a little discipline, and some Javascript tricks, to help our web sites survive whatever the browser developers throw at us!
Drawing Fingers
Posted by M. David Green on October 21st, 2010 filed in UncategorizedComment now »
This is what happens when you spend the evening drawing value keys in compressed charcoal. Feels all smooth and powdery. But don’t touch anything afterward.
Macaroons
Posted by M. David Green on October 3rd, 2010 filed in Uncategorized1 Comment »
Apparently I can make macaroons. They seem more like candies than cookies to me. 
Amazing Chocolate Chip Cookie Dough
Posted by M. David Green on October 3rd, 2010 filed in UncategorizedComment now »
I did a bunch of baking this week, including my usual weekly batch of oatmeal cookies for my man to have for breakfast, plus my first batch of chocolate chip cookies following the recipe from the Cooks Country iPhone app
I have to say, while the Cooks Country technique was unusual–especially the bit about melting and browning the butter before adding in the rest if the ingredients–I was blown away by the results. The dough itself was a toffee-like delight, with an amazing mixture of raw and cooked flavors. But the cookies were phenomenal!
Cilantro again
Posted by M. David Green on September 29th, 2010 filed in UncategorizedComment now »
I always manage to forget how much cilantro they put on the biryani dishes at Pakwan. But the food is great once you dig it out from under the soapy layer of green.
KFC Math
Posted by M. David Green on September 28th, 2010 filed in UncategorizedComment now »
I have to question the calorie counts in the KFC nutrition guides. A grilled drumstick is 90 calories, an original recipe fried one is 120 calories, and an extra spicy crispy one is 190 calories. They look pretty close in size and weight to me. I suspect the value for the extra spicy crispy pieces is closer to reality for all of the fried ones.
And an original recipe thigh is only 220 calories while a spicy crispy one is 390 calories? As Amy Poehler would say, “Really?”