HTML5

Dude, What’s My User Agent?

I’m just wrapping up a 45+ hour WordPress project, and I’m in testing and refining mode, and lo and behold, iPads and iPhone browsers don’t want to display like the other browsers.

When I test on the iOS browsers, I have text that’s partially hidden and has to be raised 70 pixels. The odd thing is that the Galaxy S4’s default browser has the same issue.

The problem with these changes are that the mobile devices don’t have a way to show you the source code; there’s no right click and view source, no F12 key, and no menu items available for help. Without the source code, I can’t read the user agent.

What’s a front-end developer to do?

Behold, WhatsMyUserAgent.com!

When you are in the same situation, simply

  1. Go to What’s My User Agent, and you’ll get a huge string of information.
    1. For example, my Galaxy S4 Default browser showed me the following:
    2. Mozilla/5.0 (Linux; Android 4.3; en-us; SAMSUNG SGH-M919 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.3
  2. Choose a string that will be unique for the device you are trying to hack adjust,
    1. In my case, I targeted SGH-M919
  3. Target your selector by preceding the tag, class, etc. with the following data-useragent attribute selector like so:
html[data-useragent*='SGH-M919'] div.classIWantToChange { }

Caveats!

Be careful of the following:

  • When choosing a string from the user agent to target, be careful not to select something that might target other devices and browsers (for example, KHTML also appears on my Chrome browser on Windows, and I don’t need to adjust it.
  • Be sure to test on as many devices and browsers as you can (within some reason–are you getting paid for the testing? is the remuneration commensurate with the migraine inducing testing and fixing?
  • Are you ready for all the new browsers to be? How about new devices?

One Giant Step for IE: One Baby Step for the Web

It looks like I’ll be calling IE Internet Exploder for years to come. The reports are coming out, and it looks like even though IE9 supports the main HTML5 and some CSS3 technologies, they left out some of the best: like transitions (animations), border-image (it’s a lot of fun, but can be tricky at first), text shadows & gradients.  

Microsoft has opted for a conservative approach to new web technologies in IE9. While the nearly complete Firefox 4 and the recently released Chrome 10 support more of the HTML5, CSS 3 and web API stack, IE9 is a huge step forward for Microsoft. IE9 offers support for the most widely used elements of HTML5 — like the new audio, video, canvas and semantic tags. Still, Microsoft has decided to pass on many of the new APIs. Cutting edge web tools like the offline web applications API, the File API, Web Workers API and the Web Notifications API won’t work in IE9. That’s bad news for web developers, but it’s also bad news for IE users since the web shows no signs of slowing down to accommodate IE.

If you want the full list of IE9 features, go to the IE9 Guide for Developers. Designing websites for Internet Explorer (all of them, even v9), is like paying alimony: the marriage was a bad idea to begin with, and we’ll be paying for it for years to come.

A few posts ago, I defined a layout that degrades gracefully is one that works on Internet Explorer, now I classify Internet Explorer 9 as legacy software.

A comparison between Chrome9 (scored 242) and IE9 (scored 116) from Feb. of 2011 -
Here are the results of an HTML5 test comparing Chrome9 beta build and the release candidate of IE9.

How I Might Code a 2-Column Layout in HTML5

HTML5 has a whole host of cool new elements and attributes to be on the lookout for, but the thing that gets me most jazzed is I no longer have to create a boatload of <div> tags with id attributes. That’s because they took into account web designers and the way we code & structure layouts when redesigning HTML5. Here is how I plan to start using the new tags for layout design:

The Old School Markup

The old-school way to code a layout is to determine all “real estate” sections to your page (call them windows, panes, divisions, etc.), then create 1 <div> with a unique id attribute for each section like so:  

<div id="banner">
   <h1>Website Logo or Title Goes Here</h1>
   <h2>Tagline goes here. Note: this could be in a p tag with a tagline id attribute</h2>
</div>
<div id="navcontainer">
<ul id="navlist">
     <li><a href="index.html">home</a></li>
     <li><a href="about.html">about us</a></li>
     <li><a href="gallery.html">images</a></li>
     <li><a href="contact.html">contact us</a></li>
     <li><a href="site.html">site map</a></li>
</ul>
</div>
<div id="page">
   <div id="content">
      <h2>Content Header Goes Here</h2>
      <p>Paragraph goes here.</p>
      <!-- Continue on with more content for the "content" div -->
   </div><!-- close "content" div -->
   <div id="sidebar">
      <h2>Side Bar Div</h2>
      <p>Add side bar content here.</p>
   </div> <!-- close "sidebar" div -->
</div> <!-- close "page" div -->
</div> <!-- close "container" div -->
<div id="footer">
   <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</div> <!-- close "footer" div -->

Note the following:  

  1. According to the W3C, it is acceptable to use the <div> tags with identifying id attributes as a way to select the specific tag with CSS to be displayed in the way we deem fit
  2. Some people surround everything with a “container” or “wrapper” <div> to allow us to center all of our content and possibly add some interesting background graphics to the body element, but I’m beginning to move away from that technique because it adds an extra meaningless <div>, and you can still apply width and centering technique to each main div (“banner”, “navcontainer”, “content”, & “footer”)
  3. Creating a “page” div that has two direct child elements: <div id=”content”> and <div id=”sidebar”> makes it much easier to display as two columns, plus, you can add a background color to the “page” that matches the “sidebar” div and make it look like the sidebar’s background color extends as far as the “content” div (provided you have no padding on the “page” and you do set the “content” background color)
    • However, the extra div is mostly meaningless, and combined with the “container”/”wrapper” div, you’re mostly just adding markup in order to make more stylistic changes

The New HTML5 Way to Do it

Note: I should give credit to A List Apart’s article, titled A Preview of HTML5 for giving me inspiration (in fact most of what I’ve come up with came from that site). The remaining ideas came from trying to “translate” my HTML from above and the W3C’s specs on section tags in HTML5. For each new tag, I added a content with a definition of that element taken straight from the W3C spec. 

<header>
 <!-- The header element represents a group of introductory or navigational aids. -->
 <h1>CSS Samples</h1>
 <h2>Different Ways to Style a Layout</h2>
</header>
<nav>
 <!-- major navigation blocks are appropriate for the nav element -->
 <ul id="navlist">
  <li><a href="index.html">home</a></li>
  <li><a href="about.html">about us</a></li>
  <li><a href="gallery.html">images</a></li>
  <li><a href="contact.html">contact us</a></li>
  <li><a href="site.html">site map</a></li>
 </ul>
</nav>
<section> <!-- a section represents a generic section of a document or application...a thematic grouping of content,
               typically with a heading. -->
  <article> <!-- an article represents a self-contained composition in a document, page, application, or site and that is,
                 in principle, independently distributable or reusable -->
     <h1>Content Header</h1>
     <p>Content content goes here.</p>  
  </article> 
  <aside> <!-- The aside element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups
               of nav elements, and for other content that is considered separate from the main content of the page -->
     <h1>Here is my aside Header</h1>
     <p>Here is my paragraph of text</p>
 </aside>
</section>

<footer>
 <!-- A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. -->
 <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</footer>

Note: This isn’t the only way to code a page in HTML5. In my opinion, the difficulty mainly lies in the difference between the usage of a section and an article; I chose to go the route that Standardista recommended. In the case of a blog, each post should probably be its own <article>, and they could be sectioned into 2 parts (the post and the comments section) using the <section> element (for obvious reasons). 

Also Note: this post is about using HTML5 for semantically marking up a page for layouts. The elements I introduce here (header, nav, section, article, aside, & footer) have not been officially recommended by the W3C. They are currently in “last call” status, which means they are probably not going to change between now and recommendation stage.