Adding Viewport Meta Tag via WordPress Theme Functions

Add the viewport meta tag with a WordPress hook via your theme’s functions file to allow responsive web design and mobile-friendly themes

meta-viewport-thumbWith all the responsive web design activity over the past few years, I hope that any theme or site we work on we’re able to make responsive to some extent. An important part of making a web site responsive is adding a viewport meta tag to your html. Without explicitly stating our viewport, the mobile browsers will scale down the website to fit into their ‘viewport’. This is a good thing, since if it was a full website and the browser didn’t scale it down, you’d only see the top left corner, or some small section of the site. This viewport was introduced by apple for iOS and has spread to most mobile devices since. There are viewport properties or parameters we can set with this meta tag such as width and scale and can even use some device aware variables (like ‘device-width’) to set these values.

A WordPress Meta Viewport Hook

I usually end up using the following hook to add a viewport meta tag to my head in wordpress. I set the viewport width to match the width of the device. Then I set the initial scale to 1. Some go and set the maximum-scale to 1 as well. This would prevent users from zooming in on your site. I advocate that we should allow users to zoom if they wish since it is a gesture they may be used to and may still need (no matter how nice your RWD is, they may need/want to see it bigger). RWD is about giving the user a better layout for whatever device they are on, not restricting how they view it.

[cc lang=”php”]
/////////////////////////////////////////////////////////////////////////////////
// Add viewport meta tag to head
//
function viewport_meta() {
?>

"Common" Breakpoints are missing the point

Great article from Jeremy Keith about the nonsense it is to use breakpoints determined by devices. The whole point of responsive web design is to make your designs flexible. Let's not only target certain widths, let's just finish the thought and make it a great experience no matter what width it is. Let the content determine the breakpoints.

Embedded Link

Adactio: Journal—Fanfare for the common breakpoint
“Common” breakpoints are the new fold.

TypeButter jQuery plugin for kerning

WIth the craze that Responsive Web Design is stirring up and all the fuss about optimizing the delivery of size appropriate images we're also getting bombarded with high def retina displays and having to worry about image resolutions. But type is scalable and crisp at all resolutions and Zeldman proposes that web type is in a position to top images as the dominant element for aesthetic appeal for a while… Let's pretty our web fonts if they are supposed to be aesthetic, no?

Embedded Link

Web Type Will Save Us (Or, Who’s Afraid of the Big, Bad Retina Display?) – Jeffrey Zeldman Presents The Daily Report
Here we go again. First it was: “OMGZ0RZ, teh mobilez are coming – quick, we need to reduce all image sizes for small-screen layouts!” Now it's. “Mobile devices are cropping up with high-density s…

Link: Responsive IMGs — Part 1 « Cloud Four

Great series exploring and discussing responsive web design and how it relates to images. We can’t very well expect mobile users to load our big images meant for large screens, or our desktop users to scale up small images meant for mobile users (only if all those shows were correct and we could just say “enhance that image”). This series explains the problem very well and then explores current solutions out there and even some potential IMG tag updates that might make life easier..

Link: Responsive IMGs — Part 1 « Cloud Four – http://www.cloudfour.com/responsive-imgs/ by Jason Grigsby.

device server communication