Honu_logo

Posts Tagged ‘CSS’

New Blog Uses HTML5, CSS3 and the BluePrint CSS framework

8 February 2010 by Bret

It seems like we’ve been doing a lot of blog designs the last couple of weeks. One might even dare to call it a theme or a trend. Pretty soon we’ll be in need of a jingle. Just so we don’t disappoint, we want to tell you about a new blog we just finished for ActiveWrap, Inc over at blog.activewrap.com.

The new ActiveWrap blog runs on WordPress and was coded with HTML5 and CSS3. We took the design of ActiveWrap.com which I did in 2007 and brought it up to date. The original site design used XHTML transitional while the blog uses HTML5 with many of the cool new tags like header, footer, article and aside.

The Problem

When I did the original design I set the width of the site at 900 pixels and created all the graphics to match. You would think I would have used the same structure and made it easy on myself…nope. Instead I decided I wanted to use the BluePrint CSS framework that we’ve been using for awhile. I like the BluePrint framework because it makes structure really easy, and it includes some nice typography and form styles.

The problem with switching to BluePrint was that by default BluePrint is set up at 950 pixels. Thankfully, they have a nice Ruby script that allows you to customize the width and size of the grid columns so that you can essentially make the site whatever width you want to. So after doing a little math I was able to setup BluePrint to do 24 columns, each 28 pixels wide and a 10 pixel gutter, that brought the site width to 902 pixels.

For the geeks or anyone who cares, the formula I used to figure out the perfect width was: (xy) + ((x-1)z) or where x = 24 for the number of columns, y = 28 for the width of each column, and z = 10 for the distance between each column all in pixels or simply (24 x 28) + (23 x 10) = 902

I didn’t know at first if I was going to be able to get away with being only two pixels short or not on the graphics. I should have known better. A couple pixels short might as well be a football field. So, I had to go back into the source files and extend them by 2 pixels, all that just to use BluePrint. But in the end I think it was worth it.

Finally, in addition to some rounded corners here and there, I decided to put a little drop shadow on the header and content area just to add some CSS3 interest for the kids.

Overall the design ported over pretty nicely from XHTML to HTML5 and from Joomla 1.0 to WordPress.

HonuStudios.com gets an HTML5 and CSS3 makeover

29 January 2010 by Bret

After experimenting with actual HTML5 tags and not just the doctype on Johnny Knight’s website, we decided to give our main site and this blog a little HTML5 and CSS3 makeover. So we converted the navigation to nav tags and the header and footer to header and footer tags.

For us it’s not about jumping on the latest in geeky coding trends, although it’s fun to learn new stuff. It’s more about cleaner, leaner, and prettier code. When it comes to coding, it’s always the goal to be able to do more with less. Which is why we’ve wholeheartedly embraced CSS rounded corners and drop shadows. It’s always a pain to create the graphics for something that seems so easily done in the browser.

As part of the makeover we changed the menu around and on the CSS side of things we added a semi-transparent box behind the links and a white drop shadow to give the menu a bit of a glow. To do the semi-transparent box we used the CSS background-color property setting it to rgba(36,62,115,0.5) the ‘a’ is for alpha, or the opacity channel, here were setting it to 50% opaque.

To finish the makeover, we decided to top the whole sundae off with a little CSS3 animation cherry up in the header on our main site. To see the animated cloud goodness though, you’ll have to have Safari, Chrome or Webkit.

Why we chose HTML5 and CSS3 for our latest project.

20 January 2010 by Bret

Our latest project and the first of 2010 was a redesign of a site I did several years ago for my friend and client, Johnny Knight. Johnny is a talented Los Angeles based DJ and artist.

From Joomla! and XHTML to WordPress and HTML5

When I redesigned the site several years ago I switched to Joomla! because of the “module” positions and the non-blog way that content is organized. But Joomla! is complicated to learn for most clients and it can be a pain to work with. Since that redesign, WordPress has really become much more than a blog engine, it’s become more of a versatile CMS, so I switched the site back. Switching is easy to do when there isn’t a lot of content. The site was pretty much a place to showcase Johnny’s remixes and announce event dates. Back then XHTML and CSS2 was the way to go so that’s what I used.

Why HTML5 and CSS3?

Given the ability to play and use more cutting edge code, we decided to fully go with HTML5 and CSS3. HTML5 is the way of the future but it’s still young and new and not yet fully supported by the current Internet Explorer, but there’s a way around that. We’ve been using the HML5 doctype and CSS3 styles and effects for months, but that’s where our adoption stopped. With Johnny’s site though we decided to take a chance and go all the way with the structural markup.

The advantages of HTML5 are numerous, but for a blog the big advantage is the structure that HTML5 element tags like header, article, section, nav and footer bring to the document. No longer do you need to mark up a page with this familiar code:

<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div class="header">
  <h1>Shasta's Cookie Cart</h1>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="post">
    <h2>Post Title</h2>
    <p class="date">Post Date</p>
    <p>Post copy in here.</p>
  </div>
  <div class="post">
    <h2>Post 2 Title</h2>
    <p class="date">Post 2 Date</p>
    <p>Post 2 copy in here.</p>
  </div>
</div>
<div class="footer">
  <div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  &copy; 2010 Shasta's Cookie Cart
  </div>
</div>
</body>
</html>

Now HTML5 brings logical, semantic markup that not only makes sense to the geeks but to search engines, screen readers and other not so geeky folks. Without being too geeky the above code would turn into:

<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>

<header>
  <h1>Shasta's Cookie Cart</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section>
  <article>
    <header>
      <h2>Post Title</h2>
      <p class="date">Post Date</p>
    </header>
    <p>Post copy in here.</p>
  </article>

  <article>
    <header>
      <h2>Post 2 Title</h2>
      <p class="date">Post 2 Date</p>
    </header>
    <p>Post 2 copy in here.</p>
  </article>

</section>

<footer>
<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
&copy; 2010 Shasta's Cookie Cart
</nav>
</footer>

</body>
</html>

Once the HTML5 code was in place we styled the site with some CSS3 markup. We’ve been using CSS3 markup for awhile now to do cool things like rounded corners, drop-shadows and reflections, so that wasn’t as new for us as using HTML5 markup for the site. Unfortunately Internet Explorer doesn’t currently support CSS3, we’ll just have to wait for version 9 for full support. However, Safari, Mobile Safari, Firefox, Chrome, and Opera do, so why not use it? It won’t look bad to IE users, just…plain. Though IE9 promises more support.

Summation

So to sum it all up, HTML5 and CSS3 are great, new, shiny, and make a designers day. We’re beginning to use both in our day to day work for clients as we can.

Johnny Knight is open to cutting edge stuff, a great DJ, and can also be found on Twitter @djjohnnyknight.

Internet Explorer users won’t see all the shiny HTML5 and CSS3 coolness just yet, but they’ll still see your content and be able to navigate the site just fine. Ultimately it’s up to our clients when it comes to things like CSS3, most are cool with it and don’t mind that some can’t see the coolness. It’s kind of like wearing a pair of KangaROOS®, some people don’t see the cool factor. But, those that do, appreciate the statement of fashion and the sweet hidden pocket.