I’ll also get into showing some code. Going from abstract stuff like ethics all the way to putting some CSS on the screen will be a bit of a challenge. At any rate, in addition to some thoughts about what makes some a professional, I came up with the following list of things that are common to design front end development:

• Aesthetics
• Functionality
• Meaning
• Simplicity
• Elegance

These are all things that I try to keep in mind when I’m designing and also with my HTML and CSS.

In this case, I went with the unmatchedstyle crew to MailChimp in Atlanta to shoot some videos and and on the way back I got the perspective of looking out the back window at the sunset and the rain, which is something I haven’t really experienced in a long time.

I decided to take a few photos with the Best Camera app on my iPhone and after some tweaking I think it got some decently moody shots.

This relates to HTML in that it’s something that people obsess over, but which can often have little to do with the quality of the end product. What’s the point of clean, semantic markup if the website is ugly and unusable? What got me thinking about this was a recent post on HTML5 Doctor about the lonely <div> and the fact that in this crazy mixed-up world of HTML5, the forgotten div still has feelings. Really it does.

In the first example, the H1 tag is used as a title for the site, which is somewhat ‘controversial’. Is the H1 used for the title of the site, or the page? Or maybe even for multiple sections of a page? The ramifications are mind-boggling… not really. It just made me picture some nerd somewhere going “Hey, you can’t do that! The H1 is NOT for the site title!”. And just stepping back a little, the idea that there would be an argument over this is a bit absurd. Not that it’s unimportant, just a little absurd. In the way that if you say ‘hubble’ 20 times in a row, it might start to sound odd.

So as someone who designs and develops, it really is very important to know about these things. But it’s also very important not to get lost in the weeds. Read articles and documentation, form opinions and move on. Use what works. Would you rather use a bunch of divs instead of a list? Use H1 on the page title. Go for it. Maybe a little more time could be spent on making your site that much better.

On one hand it’s a necessary evil. On the other, the lack of real content prevents me, as a designer, from really knowing what the final product is going to look like. So I have to leave holes that may be too big or too small for whatever content may eventually go in there. Designing to content is ideal, but it is so rare.

But the point of this post is that I’ve been delving into the world of video and video editing. I am, admittedly, a novice and am currently spending more time consulting the internet on how to use Adobe Premiere than actually editing.

What strikes me a bit about editing is that it’s instead of a scenario where I need content to fill a predefined space, I’m faced with a plethora of content to fill an undefined space. There’s an empty container over here, and then a bunch of footage over here. And somehow it all has to be chopped up and made interesting. And as a designer, this is exactly the opposite of what I’m used to. But I can’t help but thinking is this way is going to help me out in some way…

Yes, recorder. I can make 8-track mixes in the comfort of my own home. I suppose wood veneer was something to be proud of at some point.

Full size download (3.5mb).

So not only is the Tuareg a group of people from North Africa, it’s also a never made dune buggy. Not to be confused with the Touareg.

It’s really an unfortunate name for a product. I mean I get that it kills stuff, but should the leaves be black?

And as it turns out, it’s not so good for people. Check out the skulls!

For example, on a small touchscreen device, it’s a good idea to make buttons or clickable areas obvious and large enough for fingers to tap. We also need to be aware that tried and true methods of interaction like hover states may not work on a touch screen. So we should looking for ways to modify our layout and interaction depending on the type of device the user is on. One way that we can start to attack some of these issues is by using the extended features of the media query that are new to CSS3. I’ll explain first what they are and how they work and then show how I approached using them on this site.

This seems familiar

The media query has been around for a long time and it’s probably familiar used in this context:

<link rel="stylesheet" media="screen" href="testy.css" />

The media parameter refers to the type of device we’re rendering on, it’s a limited list and generally we’ve been interested in ‘screen’ and ‘print’.

What’s new?

With the CSS3 specification of the media query, however, we can not only target the type of device we’re targeting, but parameters of those devices, like width, resolution, aspect ratio, orientation and more. Now, with a media query, if you want to target browser widths of less than 800px we could serve up a different stylesheet with something like this:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="testy.css" />

The same thing can also be accomplished inside the same css file also. I prefer this method and it achieves exactly the same thing:

@media screen and (max-width: 800px) {
      //CSS here to target 800px or less
}

So that’s the basic concept, lets look at a few ways to make use of it.

Putting it to use

This site is a 2 column fixed-liquid site with a maximum width of 900px, and the left and right columns are set to 70% and 30% respectively. As the browser width gets smaller, the columns scale to keep their relative widths, but as the size gets smaller it starts to get too narrow for the content. There’s no reason we couldn’t target even larger screens, but in this case we want to make our design flexible as the screens and devices get smaller and smaller. It seems logical to start targeting from largest to smallest so my first goal is to target a class of devices/screens that have a width of around 800px. This would include Android phones (when in landscape) and the iPad (in portrait), at least. One thing that happens that I want to address is when the sidebar gets narrow, the social icons start to overlap each other, and I feel like the thumbnails for the work section get too small. So by building off the code above we can add some css inside along these lines:

@media screen and (min-width: 480px) and (max-width: 800px) {

body {
	line-height: 1.5;
}

#sidebar-social ul li,
#sidebar-portfolio ul li {
	width: 50%;
}

}

Previously in the css the width of the social icons is set to 33% and the thumbnails is 25%, which makes them 3 and 4 across. By changing it to 50%, it goes to two across, making the thumbnails larger, and giving the text more room. The image below shows what happens for widths larger than 800px, the right is less than 800px.

I’ve also added a couple more things. I added a ‘min-width’ to the query. This will keep it from applying these rules to screens smaller than 480, we’ll be targeting those soon enough. I also changed the overall line-height, based on the recommendation of Andy Clarke in his article on proportional leading.

Down the Rabbit Hole

Now we’re going to target smaller devices, which mainly are going to be smartphones with decent browsers. I honestly haven’t done much serious testing on anything but the iPhone, but I hope to do some more on Android when possible.

We can set ‘min-width’ to 480px, which means we’ll be targeting the iPhone in portrait and landscape orientations. Since the screen is so small, I feel like it would be better if we just focused on the column with the list of posts or just one post and lost the sidebar. But we really don’t want to hide it, do we? It’s still good content. What we can do is remove the floats from the columns and letting the natural order of the html push the sidebar below the main post. We can achieve this like so:

@media screen and (max-device-width: 480px) {

#sidebar, #posts {
       	float: none;
    	width: auto;
    	padding: 0;
}

}

The result, iPhone screenshot overlaid:

The first thing you might notice is that I’ve changed the query to ‘max-device-width’, the ‘device’ is referring to the actual size of the screen, as opposed to ‘max-width’ which would refer to current size of the browser. Either one really works, but this is specific. I think this is a good start, but it introduces a new problem. All of that sidebar content is pushed all the way down the page with no way to get to it. So what I’ve done is added a link in the html that is hidden by default, and only shows on these smaller devices. I’ve assigned it a class of ‘mobile’, in case I want to apply it to other parts of the page I can just show all things with that class.

HTML:
	<p class="mobile">
		<a href="#aboutme">About »</a>
	</p>

CSS:
@media screen and (max-width: 480px) {
	p.mobile {
		display: block;
	}

	#header p.mobile  {
		float: right;
		padding: .4em 0 0 0;
	}

}

So now, on the iPhone, there’s an ‘About’ button at the top that targets what was the sidebar down near the bottom. As an aside, notice I’m setting values that affect the width in relative units, this ensures that as the page scales down, we have a nice consistent spacing around the elements.

Small screen, fat fingers

I think we need to revisit those social icons. When the screen is a small touchscreen we need to make sure that links are easily ‘tappable’. Once we’ve determined we’re on this device, we can restyle the images to make them more touch-friendly, like so (iPhone on the right):

Only the start

That’s just a few ways to think about using media queries, but the real usefulness of them is getting us to think deeper about the way we design needs to address an increasing array of devices and resolutions and how users are interacting on them.

More Info

There’s been a lot of talk about media queries lately, here are a few good sources:

• Chris Coyier has a good rundown in his post CSS Media Queries & Using Available Space.
• Ethan Marcotte’s article about ‘Responsive Web Design’

But now, if I go back and look at design I did a measly few months ago it’s easy to wonder what I was smoking. That’s why this postcard, which I did in either 1998 or 1999, cracks me up.

Let’s see what’s going on the front here:
Clip Art? Check. Oddball, slightly techy, font? Check. In this case it’s Eurostile. I had quite the affinity for it for a while. Clever ‘joke’ set in Comic Sans? Check.

How about the back?

So it appears that I’ve used 2 more fonts on the back, for a total of 4 for the card. Also notice that there’s not a capital letter in sight. I probably went years without using anything from the uppercase. All in all, just awful.

But hey, at least I was trying. Oh, and the band was The Verna Cannon. It was pretty wimpy.

Does it work?

Eh.. No. The cable was just a long dry mess with a nub at the end. So I took it apart and lots of crusty junk fell out.

A sacrificial cable and some soldering and it’s time to test it out.

All we need now is a test subject

Luckily, Molly is willing and is a great singer and songwriter to boot. Here’s a song of hers called “My Heart’s Not Safe With Yours” recorded with the revived mic.