Add the viewport meta tag with a WordPress hook via your theme’s functions file to allow responsive web design and mobile-friendly themes
With 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() {
?>
I think a portfolio is something that should be very interactive and intuitive. Check out what that has led to: circlecube’s interactive pog portfolio. I’ve been toying with trying to get something that was fun to look at, but also showed some work. Here is a first look at my Interactive portfolio of work which includes physics simulations and many options to play with the presentation of the body of work. Showing it to a friend he said it made him think of pogs (since the thumbnails are round and moving everywhere).
Well, if you’re interested, this is the same portfolio that is listed statically on my website. That’s because I’m using amfphp to read my wordpress database and get the custom post type of portfolio and access all the tags, images and details of each portfolio item. I’m using TweenNano from greensock for some of the motion but all the physics is coded in as3. I’m using the slider and switch from Nick Jonas.
Enjoy playing with the settings!
Now I’m thinking of other ways to implement it: specifically hooking into API services like last.fm, dribbble or twitter. Or rebuild it with jQuery and html5!
I’ve been building websites for years and always enjoy the immediacy of designing and coding a site and having it live relatively quickly. Compare web production to the construction industry where projects span out years and even decades in some cases. Even though the web does foster a faster deliverable, there are many lessons from the physical world that help us better understand and manage web projects.
What is the point of a building? It’s a roof over your head, but more importantly it’s a location. People visit and expect it to be there next week. A website is a location as well in fact url even stands for Uniform Resource Locator and a domain name is your address. There are whole sciences about how to attract people to a certain location online and keep them coming back for more. For those with a brick-and-mortar business a website is a portal or even a drive-thru window to permit easy shopping access and a gallery to showcase your products. It allows your visitors to browse and interact with your products or content from their own home. A physical store that is confusing and messy won’t sell much, but clean it up and get some Feng Shui master in there and the same space can be transformed into a pleasant, functional and usable location. So from the tangible world we can learn that we want a location that is memorable, a layout that is intuitive and agreeable and a presence that is easy and pleasing to our visitors.
Building a website also follows the same process as building a house?
First a house takes planning and preparation. It’s best to make sure you understand what it is you want in your house, what materials will be used and how much it will cost. Long ago, construction crews figured out it cost way to much time and money to change projects on the fly and now require them to be nailed down even before groundbreaking. Web designers have not all learned this lesson yet and have been lenient with demanding a spec. Some clients think they can say “I want a website for x” and then expect the designers and developers to telepathically know all the elements of the site and build it correctly the first time. I’ve worked for so-called visionary gurus and they wanted a new website and didn’t take the time upfront to plan the site and subsequently I redesigned their website daily! Trust me, that kept the site from being functional or usable.
Building a house takes a construction crew, with a website it may be considerably less people, but it does help to have a few people each with their expertise. The main goal here is to make sure you’ve got someone who can handle each piece of the project. An architect will draw up the plans for your house after the requirements are discussed. So these blueprints or wireframes as we call them in web design contain the details needed for the project to be completed. They are written with all the policies and codes in mind so that in the end the structure can be valid, functional and above all- usable.
The website, like a house, sometimes isn’t even recognizable until the very final stages of the project. We don’t complain to the foreman that the walls aren’t the right color when the windows aren’t yet hung and the drywall mud is still wet. When constructing a house first the foundation is set and everyone knows that a weak foundations will ruin the whole project from the get go. Once the foundation is solid the framing begins, and although while the house is being framed there are holes in the house all will turn out fine in the end. Looking at a website before it’s actually complete when even possible can be a very scary thing: things don’t fully connect, layouts are screwy, links may be broken and graphics are totally wrong or missing, but all will turn out in the end as long as the construction crew know what they are doing and the client let’s them focus on doing it.
Once the house is up and walls are in and there’s a roof overhead is when things actually start to look right. Now is the time to be focused on the content of the site and putting everything in the right place. Get the walls the right colors and eventually even hanging pictures and accents in each room. Final tweaks to the place or feel of the place, but now is not the best time to start thinking – ‘What if we moved the kitchen to the basement!’ or ‘Oh, We forgot the elevator/fireplace!’. While these drastic changes are likely possible, they will have more of an after-thought and will be either very difficult or very expensive to correctly put into play, or both.
Once last thing to say in this endless analogy comparing a brick and mortar construction to a website project, what about when it’s “done”. When the house is done and the dust has settled and you’ve moved in. There are always things that still need doing: tweaks, fixes, customizations, just plain maintenance, appliances break and plumbing clogs. Not to scare anyone from the american dream, but it happens, even online. Plugins need updating, security holes are found, bugs come up, things need updated. It happens. The trick is to expect things to happen. For a house you can find any number of Home Warranties that protect you from the sudden costs of repairs. Most web design shops will have a similar maintenance plan that warrants a certain amount of work in a certain amount of time to account for such surprises.
And finally the big bad wolf test. Would your website survive a big bad wolf coming to blow your site down? Make sure that whoever is building your website knows enough to not build your house out of straw or sticks. They need to be up on current technologies and you need to be confident in their ability to give you a valid site that can withstand any visitors at your very own online location.
With 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.
