September 11, 2011
So I stumbled upon this site while I was listening to a podcast (The Big Web Show) and checking out the artist’s website / blog (You know who Design) and thought it was super cool for web designer’s. I’m going to order some probably next week.
They make note pads and stencils with a pre-drawn browser or iPhone or iPad template on it so you can do your first concept design in there. They look pretty sweet. Once I say the metal stencils they sell with your standard social network icons and input fields and other things like that I think I was sold. I currently have two white boards in my office that I use frequently to work out design and development concepts so seeing this it’s pretty freaking awesome. The last photo is a dry erase board of a web browser that I’m definitely ordering to add to my collection. Here are some photo’s of the ones I’m most interested in.
You can find all these amazing products at UI Stencils. I’ll post some photo’s when I get mine. :>
September 7, 2011
So here it is my new / first blog site. I’m hoping this will spur me to try new things to experiment and push myself forward in the world or web development. I’ll also be putting up portfolio items under My Creations they will hopefully include some of my wedding photography shots, graphic design projects and as I said web development projects. Anyway this post is really about this site.
First things first:
HTML 5
I’ve decided as part of the pushing myself forward that I would start by coding this site as much as I can in html5. The main structure layout of the site is done in html5 using some of the new tags: header, hgroup, nav, article, section, aside, footer. All these tags, from what I’ve learnt are really here to allow for cleaner code and more defined markup. You’ll see further on how you can use the ‘header’ tag within an article to wrap you title content, you can do the same with the ‘footer’ tag.
Anyway here is the basic structure of the site:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <header id="header">
<h1 id="site-logo"><a href="#">Site Title or Logo</a></h1>
<h2 id="site-description">Site Description</h2>
</header>
<nav>
<ul id="main-nav">
<li><a href="#">All</a></li>
<li><a href="#">Thoughts</a></li>
<li><a href="#">My Creations</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</nav>
<div id="maincol" class="left">
<article class="post">
<h1><a href="#">Post Title Here</a></h1>
<p>some content</p>
</article>
</div>
<aside id="sidebar">
<section class="widget">
<h1>Title</h1>
<p>some content</p>
</section>
</aside>
<footer id="footer">
Some Content
</footer> |
So there’s the basic markup of the html5 layout. As you can probably see right away it’s much cleaner to read through seeing the tag ‘header’ wrapping heading content etc.
You’ll notice that I used a ‘div’ tag in the middle. I considered using a ‘section’ tag here, but after reading this article I found out that I’m better to use a div tag to wrap a area or column of main content in the case that I want to style it. The section element seems to be used more in either the ‘aside’ tag which acts as a group of information separate from an article or it can be used within an ‘article’ tag to then hold another ‘article’ tag.
I just want to also say that I’m learning as I go here so I’ll be more then happy to revise and change what I have if you know of a better or different process. Actually even if you can explain more how ‘section’ and ‘article’ are different that would be awesome too, that article does a fairly good job but I’m sure I can understand better.
There’s a few things I had to do first to ensure it would work in browsers that don’t support html5 just yet. What I came across is this conditional statement to include a line of script for IE browser before IE9.
1
2
3
| <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
You will also want to include in your CSS document a line of code to help reset the new tags for browser support as well.
1
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
I can’t really think of what else I’ve done for the html5 markup that I should talk about.
I was going to talk about how I used media queries to make this site adaptive for mobile devices but I think I’ll do that in it’s own post. But do check it out re-size your browser and see the magic also check it out on the iphone blackberry let me know what you think. I’m pretty pumped about it. I will also talk about how it’s all wordpressified (my new word by the way) and how I’m loving WordPress so far.
Please feel free to comment let me know what you think what I could improve on or change I’m totally open for ideas.
Thanks for coming
September 7, 2011
I let my mind wander a bit at lunch today and this is who showed up. Really started with a balloon that seemed to better suited as a boxing glove. Also I can’t seem to draw faces as well so that’s why he’s no faced.
Enjoy
Older Posts