One of the key steps in creating a responsive web layout is defining how it will look on mobile devices. While media-queries allow us to define alternate CSS for the positioning and scaling of elements, the viewport meta tag defines the width and scale of the “page” itself.

Here’s an example of a tag that will force the browser to resize a website based on the device’s viewport:

<meta name=”viewport” content=”width=device-width”>

So, what does this mean?

Most mobile web browsers will scale web pages down so the entire width of a page fits neatly. Which is great, especially for sites that haven’t been optimized for small displays. The caveat is, the browser doesn’t scale pages up in size to fit the screen, even if the width of the page is set to device’s resolution. Enter the meta tag.

By adding the viewport meta tag we can force the browser to use its display resolution (or any specified number) as the base width for a website. A few other parameters can be added as well to further handle user/browser scaling.

Here are a couple articles to add to your Instapaper:

• Using the viewport meta tag to control layout on mobile browsers
• Configuring the Viewport

Having trouble viewing posts from a new custom post type? Are you only seeing “Nothing found” or your 404 page?

Try re-saving your Permalinks structure.

This has come up a few times when I’ve used a custom structure for my permalinks (/%postname%). For whatever reason, re-saving your permalinks settings allows posts from all post types to show up at their proper urls.

Need help setting up custom post types? This article from Smashing Magazine will get you started: How To Build A Media Site On WordPress

While prepping a bunch of videos for HTML5, I found that my go-to video conversion software didn’t offer OGG support, which is essential for cross browser playability. After searching the googs and trying a bunch of different options I found (using John Gruber’s article as a solid recommendation) ffmpeg2theora.

It’s great. Not only does it work on Mac/PC/Linux, it’s really easy to use. I was able to crank out some great looking OGG videos in no time, even with my limited exposure to command-line computing.

Here’s a quick and simplified overview of how to get started with ffmpeg2theora on a mac, from a non-expert. OK, let’s go!

Getting started with ffmpeg2theora

Now go ahead and change a few more of the options until your video is the size and quality you like. And since we’re working in Terminal, you can open up multiple windows and convert multiple videos at the same time.

If you haven’t heard of Typekit it’s definitely worth taking a moment and poking around the website. In a nutshell, they want to expand the capabilities of web typography by increasing the number of fonts web designers can choose from. I’m pretty sure they do this with the @font-face, a bit of javascript and a subscription. Either way it has some pretty awesome capabilities.

The awesome thing about Typekit and @font-face is that they work in Safari; the shitting thing about Typekit and @font-face is that they don’t work anywhere else (at least not IE, FF, Chrome or Opera).

edit: @font-face will work in IE, FF, Chome & Opera, but additional font file types are needed and it must be in a version running CSS3. OTF & TTF work in Safari, but EOT is needed for IE, and SVG is needed for Opera.

Here’s an additional resource on the subject: Mozilla Hacks @font-face

I decided to make a little web utility so that I could more easily preview the Typekit fonts without logging in and using their previewer. Since I currently have a free membership with Typekit I’m only able to use two of their fonts at a time, so I decided to add a few free typefaces that I found. If I do end up getting a membership I think it will come in handy.

Font Previewing

Continue reading →