BlogmyQuery – BMQ

There is an aspect to Web design that no one likes to talk about: spec’ing. We all do it, we all hate it, but we also understand that specs are vital to both designers and developers.

For those who aren’t familiar with the term in this context, “specsâ€� is short for specifications — in the case of design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development. Specs function not only as instructions to developers, but also as a reference point to make sure the whole team is on the same page.

However, the process of producing specs is repetitive and time-consuming, especially for creatives. But now this can all change: Specctr, together with Adobe Fireworks, offers a quick and easy way to generate this important information automatically.

The Idea

My idea to make Specctr came from my personal experience working on a design team at a large corporation. Spec’ing was part of my routine. One day, after hours of spec’ing, my eyes hurt and I was bored and frustrated. Suddenly, I realized that this kind of intensive work should be automated, and that a designer’s time is much better spent designing rather than spec’ing.

Specctr is more than a tool: it is a business solution for any company whose designers must generate specs for developers. Specctr facilitates this communication and leaves designers and developers happier and more productive. Making this process quicker frees up the business to focus more intently on its core mission.

Possible time saved using Specctr for Adobe Fireworks.

Time saved using Fireworks and Specctr Pro.

In the process of creating Specctr, I brought my design background and practical experience in spec’ing to bear on the issues and opportunities in automating the process. Meanwhile, my colleague, Dmitriy Fabrikant, engineered the software from the ground up. Working in tandem at On Pixel, we released Specctr Pro in January 2012. Since then, it has received many favorable reviews.

Specctr Lite

In addition to the commercial version of the tool, we’re happy to release a free version called Specctr Lite as a contribution to the community. We chose to highlight width and height as well as text spec’ing abilities, because they are most common to a designer’s workflow. These two feature sets alone will save a lot of valuable time.

The Lite version includes:

• Width and height
• Text spec (font family, size, color)
• Expand canvas feature

Specctr Lite can be downloaded for free from our website, and we’re happy to say that it was created and released as a result of the involvement of Smashing Magazine!

Pro and Lite: a quick comparison

The Lite version is as easy to use as the Pro version, and its features work the same way.

Requirements And Installation

To use Specctr (Pro or Lite), you need:

• A Mac or PC
• A copy of Adobe Fireworks CS3, CS4, CS5 or CS5.1

The installation process is pretty straightforward:

1. Download the Specctr installer
2. Double-click the MXP file to open the Adobe Extension Manager
3. Click on “Install�
4. Restart Adobe Fireworks
5. In Fireworks, go to Window → Specctr to open the Specctr panel.

Please note: If you are using Windows Vista or 7, you might need to launch the Adobe Extension Manager as Administrator, otherwise the extension could fail to install.

If you still have questions, don’t hesitate to consult our online tutorial (PDF, 1.9 MB) or contact us directly!

Specctr Pro

A Brief How-To Guide

Once you install Specctr through the Adobe Extension Manager, restart Fireworks, and then open Specctr from the Window menu. Now that Specctr is open, you can spec a document in a few easy steps.

First, prepare your document by making room for your specs. Select the size of your design’s border, and click on the “Expand Canvas� button.

Select which details to display by toggling them on or off from the panel’s menu.

Now Specctr Pro will automatically display your spec with a click of the button.

To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Spec Object� button. The specs will be outputted to the nearest edge of the canvas.

Properties of objects in a spec

You can also spec the spacing between two objects by selecting them and then clicking the “Spacingâ€� button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas.

Measuring the space between objects

Finally, you can also spec the width and height of any object.

Insight Into The Fireworks Extension Development Process

The process of developing Fireworks extensions consists of the following steps:

1. First, we design and build the panels in Adobe Flash Pro.
2. We import the panels into Flash Builder and add the ActionScript code, which makes them run.
3. Finally, we have to connect with the Fireworks API, which is written in JavaScript, in order to manipulate Fireworks.

Because the development process is spread over three separate environments, integrating the different pieces of the application and debugging the application present some challenges. But in the end, it’s well worth the positive response from our users.

In the next couple of weeks, Dmitriy will release on GitHub a few ActionScript libraries that he has built during the process of developing Specctr. These libraries will hopefully reduce some of the pain points of the tiered development process. We might also write another article that highlights in more detail the development process for building a Fireworks extension.

One of Fireworks’ strengths is its potential as a development platform that leverages the creativity and innovation of its community. We would love to help this process and show that Fireworks is a powerful tool for Web design.

Further Reading

Here are a few useful resources related to extending Adobe Fireworks:

Extensions

• Aaron Beall
• John Dunning
• Matt Stow
• Orange Commands, Ale Muñoz

Other Resources

(al) (mb)

© Chen Blume for Smashing Magazine, 2012.

There many benefits to having an online web design portfolio, but there is something more than beneficial to displaying web design work online, in the arena in which it was intended; it just feels at home. Optimized and ready to show off its full potential. A high-quality portfolio can leverage the same interactive, responsive features that a well designed website uses, letting you show clients your strengths and capabilities.

A successful online portfolio will use the same rich media functionality that a great website would, too — and with these hosting services, templates, and themes, you don’t have to be an experienced developer to do set yours up. These tools allow designers at all levels of expertise to create a sleek, functional online web design portfolio worthy of the work it displays, from low-maintenance to highly customizable.

We’ll start off by taking a look at portfolio hosting services that allow for a wide range of customization. For those who use WordPress to host their portfolio or personal website, we’ve collected responsive and rich media capable themes and templates that are specially oriented toward portfolios.

Portfolio Hosting Services

Behance

Behance is perhaps the best-known and highest-visibility portfolio hosting service on the Web. They emphasize the fact that the Behance network gets “fifteen times the traffic of all other leading portfolio websites combined� — a powerful asset for designers looking to gain more exposure and a wider audience.

Behance offers fully customizable portfolios for creative professionals of various disciplines, and its graphics-heavy layouts and multimedia options are well suited for web designers. A free account offers unlimited images, video, text, and audio, and its social-media integration lets you share your work across multiple platforms. You can display work on your LinkedIn profile, promote it on Twitter and Facebook, or use Behance’s community tools to follow other users, and gain followers, too.

You’ll find curated sites, collections, and galleries from big names to independent designers, as well as active job boards and groups. Behance aims to connect talented designers and professionals with each other and with career opportunities.

Behance ProSite

ProSite.com is Behance’s paid portfolio hosting service that features even more customization options, personal domain names, white-label branding (no Behance logos), and syncing with the Behance network. The service costs $11 per month and functions as a personal website for creative professionals; you can import your blog and develop your personal branding vision. Behance ProSite is accessible to designers with all levels of development experience: no programming knowledge is required to build a site, and you can choose from a large variety of layouts and templates.

Viewbook

Portfolio hosting service Viewbook is embracing the mobile revolution: it’s available on Web and mobile and offers iPad-app integration, so you can display your work on the go. The interface is clean and minimalist, though the portfolios feature plenty of customization options.

Viewbook focuses heavily on social media: you can share and publish your work to Tumblr, Twitter, Facebook, and more with one click, or embed Viewbook albums in your personal website or Facebook timeline. Support is available for Adobe Lightroom, Google Analytics, and Wufoo forms for freelancers. Pricing is three-tiered, ranging from $4 per month for a basic gallery to $19 per month for a personal domain, unlimited websites, full customization, and Viewbook’s iPad app.

Cargo Collective

Cargo Collective is a web publishing platform with an emphasis on portfolio capabilities and support. The service offers public website hosting and “Personal Networks� for users, as well as a support and development forum. Some basic programming skills are needed to complete customization, though many templates are available as well. However, Cargo is best suited for those designers with more development experience.

Cargo sites offer built-in video and audio players for externally hosted content, as well as cloud-based image hosting. An expansive directory lists experienced designers and developers to aid other users in customization. Like Behance, Cargo Collective is community-oriented.

Wix

Wix is a DIY website-building service that lets users create a custom site — with no knowledge of coding necessary. Based on a drag-and-drop format, Wix now offers rich media capabilities, with both Flash and HTML5 support. Hundreds of free templates are available, and the service is based on a freemium model: users create free accounts, and upgrades cost between $4 and $16 per month for features like custom domains and e-commerce designs.

Fresh.li

Fresh.li, like Wix, offers creative-professional portfolio services without requiring programming experience. They boast that users can create “a new website in five minutes,� using either a fresh.li subdomain or a personal URL. Free portfolios aren’t as extensively customizable as other options, and just six templates are available, but paid options allow for customization using HTML and CSS.

Carbonmade

Carbonmade, with its simple but sleek interface, is strictly a portfolio-hosting service: no networking or career services are included, though it’s a useful option for designers who might have less experience and are primarily looking for a place to display their work.

Carbonmade portfolios are functional and relatively minimalist in design, though the site itself features whimsical graphics and illustrations. Free and paid options are available; the latter, at $12 per month, offers domain binding and technical support.

Specialized Portfolio Hosting Services

Certain portfolio-hosting services are geared toward particular categories of creative professionals, or toward goals like career building. The services below are for designers who are looking for specific capabilities from their online portfolios.

The Creative Finder

The Creative Finder is a division of DesignTAXI, a news site with a focus on web design. It offers portfolio hosting and integration with networking and career services, letting creative talent find employment opportunities and professional connections. Portfolios on The Creative Finder function essentially as galleries of a user’s work, allowing for professional contact, networking, private messaging, and linking to profiles on social-media platforms.

Sortfolio

Sortfolio is career-focused, as well. The service offers listings for designers rather than full portfolios. It offers the most functionality to designers who are already relatively established, but who want to expand their reach to big-name clients. Free listings are available, and $99 per month will get you large, interactive display ads and personal-branding options.

Krop

Krop is a tool for job-seeking web designers and creatives; it brings together job listings from recruiters and paid portfolio hosting, at $9.99 per month. Portfolios are fully customizable, and Krop’s back-end creative database lets recruiters target designers by specific capability, location, availability, and professional level.

Subfolio

Subfolio, a DIY portfolio tool, allows users to configure portfolios on their own servers. The service is best for designers with significant development skills: it’s a PHP5 file browser application that lets users manage settings, file types, themes, and more. Subfolio reads the files you place within a directory folder and then turns the content into a website, turning folders into sections and files into pages. It’s currently in private beta, though you can request an invitation here.

Themes and Templates for WordPress

Many web designers choose to host their personal websites and portfolios on WordPress. The platform’s open-source software and powerful CMS offer extensive customization options for users of all development skill levels. Many portfolio-specific themes and templates are available for WordPress, and, as with the hosting services detailed above, options are available for those looking for all degrees of customization. Below are a number of themes and templates that are particularly well suited to web designers.

Responsive Themes

Responsive themes allow portfolio content to be displayed correctly — and attractively — on multiple devices, screen sizes, and resolutions. Given the rapidly increasing importance of the mobile web, it’s crucial for web designers to optimize their portfolios and content for mobile devices if they want to reach a broader audience.

Theme Trust

ThemeTrust.com offers premium WordPress themes with responsive, minimalist interfaces, many of which are optimized for web-design portfolios. Some examples of portfolio themes (all ThemeTrust themes below cost are priced at $49):

Infinity

Infinity, a responsive portfolio theme, features a grid layout and infinite scrolling capabilities. The image-heavy interface allows designers to showcase their work front and center. Among its features are a built-in lightbox, social-media integration, and threaded comments.

Solo

Solo, a single-page portfolio theme, leverages jQuery effects within a minimalist layout. The theme features expanding project displays, automatic scrolling, and integration with Flickr and Twitter.

Reveal

Reveal offers an Ajax-powered portfolio with a responsive layout; the theme features animated jQuery drop-down menus, smooth portfolio filtering animations, and extensive customization options. The image-heavy, grid-system layout displays well on all devices.

Hero

Hero’s parallax home-page banner lets designers prominently feature their best work. The responsive theme includes templates for pagination and archive pages, making it easy to organize a larger body of work.

ThemeForest

ThemeForest.net offers themes and templates for designers with programming backgrounds: for WordPress, Joomla, HTML/HTML5, Magento, and more. Below are examples of responsive themes and templates which work particularly well for web-design portfolios.

Tinfoil

Tinfoil is a one-page portfolio template that includes jQuery tools and minified CSS and JavaScript. Beyond the portfolio itself, the template features a gallery, blog, contact form, and more.

Parallax

Parallax, an HTML portfolio template, offers (of course) a parallax slider, a skeleton grid system, and a three-layered background that creates the illusion of depth. The WordPress version focuses more on blog capabilities, though it also offers extensive customization options, with an intuitive interface.

Milestones

Milestones, a single-page template for either personal or commercial portfolios, is a colorful template with a host of features especially useful for web designers. It offers valid HTML5, a contact form, a jQuery slider for the portfolio itself, and various social-media integration options.

Themify

Themify.me provides WordPress themes that are extensively customizable — without requiring coding knowledge. Theme packages do include PSD files and Themify frameworks if you have programming experience and would like to further customize them.

Folo

For designers focusing primarily on networking, Folo is a useful theme: it allows designers to display their work samples and available services, and features the same customization options as other portfolio themes. Folo’s circular slider and twenty-one layout options — lists or grids — make it a flexible option for designers looking for business opportunities.

Blogfolio

Blogfolio’s interface combines a web-design portfolio with blog posts, turning your portfolio into an integrated personal website. The theme’s image-heavy layout features threaded comments, custom menus, feature boxes, and various grid or list options.

Simfo

Simfo, a responsive portfolio theme, offers full customization for designers with programming experience; it’s coded with HTML5 and CSS3. The theme offers a feature slider, a plugin-free lightbox gallery, and optional search options, RSS, and social-media icons.

In the End

Whether your development skills are as well honed as your design abilities or whether you’re looking for a simple, straightforward online portfolio, there is an array of choices available for hosting services, themes, and templates. The best part? Flexible customization options mean that you can change your portfolio as your skills, needs, and experience changes — all with the support of design communities and networks. What are some of your favorite web design portfolio options?

(rb)

Probably the most remarkable characteristic of our Web design community is that we care about our craft. We care about best practices, about our work, about learning, sharing and improving our skills. This very spirit is the driving force behind our daily work at Smashing Magazine, and this spirit is what has prompted us to organize the very first Smashing Conference: a friendly, valuable and inspiring community event that will help us all become better at what we do.

Whether you are a designer, developer, content strategist or business owner, at the Smashing Conference you’ll explore insights hands on and gain practical tips and new perspectives on our craft. We are very happy to provide an opportunity for you to share and gain practical knowledge in an intimate, informal atmosphere — right in our beautiful home town of Freiburg, Germany, at the foot of the legendary Black Forest.

The legendary Historical Merchants Hall, a late-Gothic building built between 1520 and 1530. Its façade is decorated with statues and the coat of arms of four Habsburg emperors. An exquisite location for the very first Smashing Conference. Image credit.

When and Where?

We’re delighted to invite you to come together for this inspiring, forward-thinking event on 17 to 19 September 2012. The conference will host a two-day single-track conference on September 17th and 18th, as well as three workshops on September 19th. By “we,â€� we mean Vitaly Friedman, editor-in-chief of Smashing Magazine, and Marc Thiele, who has been running community events such as beyond tellerrand for over 12 years.

The aim of the event is to deliver the same high-quality content that we deliver on Smashing Magazine, in the familiar atmosphere that beyond tellerrand events are known for. This will be a high-caliber yet friendly event that brings great value to everyone involved, and we’d be honored if you took a part in it.

The conference will take place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest.

The main hall of the venue. 350 tickets are available in all for our two-day single-track event. Image credit

Keeping the conference affordable for everyone is important to us. All tickets includes two full single-track conference days, on Monday and Tuesday. Please note that only 350 seats are available.

We are pleased to announce that the first 70 early-bird tickets are on sale for a price of €249. The regular price after that is €349. And all prices include the German VAT of 19% and booking fees! Get your ticket now before it’s too late. We’d be honored to meet you in September!

Speakers and Topics

If you’ve been following Smashing Magazine for a while, then you won’t be surprised by the focus of the Smashing Conference. We’re aiming to cover a wide variety of Web design topics, such as visual design, front- and back-end development, UX design, mobile, responsive design, the business aspects of running a website, as well as the intricate details of the designer and developer’s workflows. We’re encouraging our dear speakers to share details on how they work, what tools they use, and what their design and coding process looks like. We’re aiming for valuable, practical and inspiring talks.

We’ve handpicked all of the speakers to ensure the high quality of the event. So far, 10 out of 15 speakers are officially confirmed. Please note that the topics presented here are subject to change. More details on the conference, speakers, talks and workshops are available on the conference’s official website.

Speakers

Speaker	Talk	Details
Aarron Walter	The Real Me
Aarron Walter is the lead user experience designer for MailChimp, where he socializes with primates and ponders ways to make interfaces more human. Aarron is the author of Designing for Emotion, the purple stripe in the rainbow of knowledge from A Book Apart. He lives with his wife and son in Athens, Georgia, and is a wannabe barista. He tweets about design under the moniker @aarron.
Chris Heilmann	To be announced
Chris Heilmann has dedicated a lot of his time to making the Web better. Originally from a radio journalism background, he built his first website from scratch in around 1997, and he spent the following years working on a lot of large international websites, and a few years at Yahoo building products and training people; he is now at Mozilla. Chris has written and contributed to four books on Web development and has written many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more.
Jeremy Keith	The Spirit of the Web
Jeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there.
Jonathan Snook	Your CSS Is a Mess
Jonathan Snook writes about tips, tricks and bookmarks on his blog. He has also written for A List Apart, 24ways, and .net magazine, and he has coauthored two books, The Art and Science of CSS and Accelerated DOM Scripting. Most recently, Snook has written the eBook SMACSS, sharing his experience and best practices on CSS architecture. Snook also works on the design team at Shopify.
Josh Brewer	Responsive Is as Responsive Does
Josh spends his time thinking about, designing and building things that live at the intersection of form, function and aesthetic. He is principal designer at Twitter and is the co-creator of 52 Weeks of UX, Ffffallback and Shares. He is also an advisor and mentor at The Designer Fund.
Lea Verou	To be announced
Lea has a long-standing passion for open Web standards and has been often called a CSS guru. She loves researching new ways to take advantage of modern Web technologies, and she shares her findings on her blog. Lea also makes popular tools and libraries that help Web developers learn and use these standards. She speaks at a number of well-known international Web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures in the Web development course at the Athens University of Economics and Business.
Paul Boag	Better Websites, Happier Clients and Improved Job Satisfaction
Paul Boag has been working on the Web since 1993. He is Web Strategist at Headscape Ltd, a Web design agency that he cofounded back in 2002. Paul also produces and hosts the longest-running and award-winning Web design podcast at boagworld. He is a regular speaker at conferences and author of Client-Centric Web Design.
Rachel Andrew	The Future of Content Management
Rachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website.
Stephen Hay	To be announced
Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. Aside from his client work, he can be found speaking at industry events about Web design-related topics such as CSS layout and responsive design workflow. Stephen is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences. He is also co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side. Stephen has written for publications including A List Apart and .net Magazine. He also coauthored the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack.
Tim Ahrens	Web Fonts Backstage and On Stage
Tim Ahrens is a type designer based in Berlin, where he runs Just Another Foundry with Shoko Mugikura. As a former architect, he is interested in the interplay between technology and design. He develops design software such as the Font Remix Tools and Web applications such as the FontFonter. Since 2010, he has been working as a consultant for Typekit.

Gallery of the speakers at the Smashing Conference.

Workshops

Trainer	Workshop	Details
Aarron Walter	Interface Design Bootcamp
Whether you are designing a Web app or website, following best practices and standard design methodologies will help ensure that your interfaces are usable and engaging. In this workshop, we’ll explore the design process in detail, including user research, wireframing, prototyping and visual design. Through real-world examples, you’ll see how an idea can evolve into an interface.
Andy Clarke	Fashionably Flexible Responsive Web Design
Responsive design has made designing flexible websites fashionable again, but there is more to being fashionably flexible than technology or using CSS3 media queries. So, this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the “content out,â€� instead of from the “canvas in.â€� He’ll demonstrate how to separate design from layout; and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (color, texture and typography) before reassembling it for a fluid continuum of devices, from phones to desktops and everything in between.
Jonathan Snook	SMACSS: Scalable and Modular Architecture for CSS
The SMACSS workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It brings the eBook to life with practical examples and in-depth discussion.

Gallery of the workshop experts at the Smashing Conference.

Further Details About the Conference

As we finalize some major details of organization, we are working hard on a plethora of small details to make the event as valuable and memorable as possible. Please expect more speakers to be confirmed soon and more topics to be announced.

Also, we are looking for sponsors of the event, so if you are interested, please get in touch with us. More details on the location, hotels, speakers, talks, workshops and after party are presented on the official Smashing Conference website.

One of the workshop rooms, with medieval decoration and statues of medieval knights. 30 seats are available for each workshop. Image credit.

Facts

• In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business.
• Dates: 17 to 19 September 2012 (workshops on the 19th, and conference on the 17th and 18th).
• Venue for workshops and conference: “Zum Roten Bären”, Historical Merchants Hall, Freiburg.
• Early-bird price (only 70 tickets): €249 ($315) (including German VAT and fees).
• Regular price: €349 ($440) (including German VAT and fees).
• Each workshop costs €349 ($440) (including German VAT and fees).
• Twitter: @smashingconf
• Lanyrd: http://lanyrd.com/2012/smashingconf/
• Facebook: http://www.facebook.com/smashingconf
• Website: http://www.smashingconf.com

“Zum Roten Bären“, one of the locations for the conference’s workshops. Large view.

We’re very excited about the Smashing Conference, and we’ll do our best to make it a valuable, memorable and useful event. We can’t wait to meet you, and please feel free to contact us if you have any questions about participation or sponsorship.

© Smashing Editorial for Smashing Magazine, 2012.

You’ve heard it many times before: make sure your JavaScript plays nice with other code, especially if you package it up as a plugin and share with other developers. Perhaps the most obvious thing to think about is global variables, which you want to avoid creating since they can easily clash with other global variables.

How you apply and remove event handlers may also cause problems that can be really hard to troubleshoot. Recently I was working on a project where I had attached a function to the window.resize event. But my function simply would not run, and it took me forever to figure out why.

Read full post

Posted in JavaScript.

Copyright © Roger Johansson

“Mobile Web design.� Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design and might have heard of the mobile-first approach developed by Luke Wroblewski, which entails planning the content and design for mobile devices first and then desktops second, rather than the other way round.

But if your WordPress website has a desktop theme in which everything is set in pixels, then the thought of adopting a responsive design might have you running for the hills.

It doesn’t have to be that way.

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Plugins: The Quick Way To Make Your Content Mobile-Friendly

Designing for content is increasingly becoming more common than squeezing content into a pixel-perfect design, as documented here on Smashing Magazine.

If your website is more about content than design (say you run a blog that is content-heavy and designed for reading), then you won’t be too fussed about what your website looks like on mobile devices. You just want people to be able to read it without having to zoom in, move the viewport around or generally tie themselves up in knots until they decide to leave.

If this is the case, then a simple plugin might do the trick. Below are some plugins to consider.

WPtouch

WPtouch, which comes in free and premium versions, strips out your existing theme and displays your content and not much else, but the result is user-friendly, robust and easy to read.

WPtouch is widely used on websites, including Stephen Fry’s blog and Social Media Examiner. You can see below how the plugin renders those two websites. The premium version has options to modify the colors and some styles, including a bespoke menu at the bottom of the screen, as seen on Social Media Examiner.

Social Media Examiner desktop design

Social Media Examiner mobile design, using WPtouch

WordPress Mobile Pack

The WordPress Mobile Pack has some color options and can be used as a mobile switcher if you want a completely different theme for mobile devices. It also has a mobile interface for editing posts, although this has been superseded to some extent by the WordPress apps for iOS and Android.

WordPress Mobile Pack screenshots

BuddyPress Mobile

If your website runs BuddyPress, then you’ll need a plugin to ensure that none of its functionality is lost on mobile devices. BuddyPress Mobile has theming options, and you can edit the style sheet to make the mobile design your own.

BuddyPress Mobile

Mobile Themes: The Next Level Up

If you want a consistent design across desktop and mobile, but you don’t yet have a theme or you want to develop one, then a mobile theme might be the answer.

More and more mobile themes have sprung up over the last year. In particular, Twenty Eleven, WordPress’ default theme since version 3.0, is responsive enough for many websites.

Twenty Eleven on the desktop

Twenty Eleven on mobile

Below are some other themes that include a mobile or responsive style sheet.

Carrington

The Carrington family of themes can be used as parent themes. You can edit the CSS and functions to suit your needs, and it has a mobile version.

Carrington on desktop

Carrington on mobile

Scherzo

Scherzo is clean and minimalist and would be great to use as a parent theme. It uses a mobile-first responsive design.

Scherzo on desktop

Scherzo on mobile

Jigoshop

E-commerce websites are trickier to make mobile-friendly, but Jigoshop can help. It’s a full e-commerce plugin and theme, with a responsive layout that can be tweaked to suit your design.

Jigoshop on desktop

Jigoshop on mobile

A Different Theme For Mobile Devices

In the days before responsive design gained traction, websites commonly had two versions: desktop and mobile. The mobile version might have been on an m. subdomain or have a .mobi extension. Some websites out there still do this, mainly huge news websites that serve different content depending on the device.

Fewer WordPress administrators are choosing to do this now, but if you do want to go down this route, then serving two versions of your website from the same database is possible, by using a mobile switcher.

Here are two plugins that make this possible:

• WordPress Mobile Pack
  This tool, already mentioned above as a theme that makes your website mobile-friendly, can also be used as a mobile switcher, detecting mobile devices and using a separate theme of your choice.
• WPtap Mobile Detector
  This targets mobile devices and enables the theme of your choice.

Using one of these plugins enables you to develop a completely separate theme for mobile devices, with its own layout, navigation and content structure.

Or, Finally, Make Your Current Theme Responsive

If you don’t want to throw out your existing theme, then the best way to give mobile users an experience that is at least visually similar to the desktop version is to build responsiveness into your theme.

A responsive theme contains media queries in the theme’s style sheet to define CSS that applies only to devices of a specified maximum or minimum width. A truly responsive theme has a fluid layout that adapts to mobile devices and larger screens to some extent already, but with some extra styling to make the layout optimal for mobile devices.

1. Defining the Media Queries

To get started, you will need to define media queries in the style sheet. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. This will go at the end of your theme’s style sheet.

Start by defining the screen width you are developing for. There are two main approaches to this:

1. Start with the narrowest screen width you are targeting (which will usually be mobile phones in portrait orientation); add all of the CSS needed for this screen width; and then add successive media queries for wider screens. This is known as the mobile-first approach, and it has the benefit of making websites faster on mobile devices because only the CSS needed for those devices is loaded.
2. Start with the widest screen width (usually desktop monitors) and work down, adding CSS that applies to each screen width in turn. While this might slow down loading on mobile devices, it has the advantage of working in IE 8 and below, which doesn’t understand media queries. At the moment, most websites are developed this way because they involve making an existing desktop design responsive, so this is the approach we’ll cover here.

A media query consists of three main parts:

1. The @media rule;
2. The media type (the most common being print and screen — we’ll use screen);
3. The maximum width of the screen you are targeting.

You could have a media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels:

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

}

The CSS to be applied to that screen width and any screen narrower than it would be written between the braces.

An alternative to the @media rule would be to create a linked style sheet with the CSS for each screen width. But I don’t do that because it adds another server request with the potential to slow the website down; and managing all of the styles becomes harder if they’re in more than one place.

Here are other media queries for commonly targeted screen sizes:

• (max-width: 480px)
  Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
• (max-width: 780px)
  Works for iPads and other large tablets in portrait mode and any screens narrower than them.
• (max-width: 1024px)
  Works for iPads in both orientations, as well as for small desktop browsers.

You can run one media query after another so that each change you make applies to the screen size you’re querying, plus any widths queried further down in the style sheet. In this case, you would work with wider screens first. For example:

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

}

If you are ignoring tablets, you would include this media query first and add any CSS for mobile phones in both portrait and landscape modes (for example, any changes to graphics or text size). You would then follow it with this:

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

}

Here, we’re adding any styles that apply only to phones in portrait mode (such as layout changes). You don’t need to repeat the CSS that applies to both landscape and portrait modes because this will still apply. In the same way, you don’t need to repeat any styles that will stay the same for desktop views because they will cascade down from the earlier parts of the style sheet.

2. Making the Layout Responsive

Phew! So, now we’ve defined media queries, and we’re ready to roll with some mobile-friendly CSS. Below are the main things you will need to work on for a standard WordPress website. Let’s assume your website’s markup is similar to that of the Twenty Eleven theme (i.e. html → body → header (or div #header) → #main → #content → #primary → #secondary → footer (or div #footer). You might need to substitute your own elements and IDs for the ones in the examples below.

Overall width of website
You’ll need to change this so that it displays correctly. Add the following code between the braces of your first media query:

body {
width: 100%;
float: none;
}

This ensures that the website’s body fills the width of the device and removes any floats. At this point, you might also want to change the background image if there is one (more on that shortly).

You will now have the following code at the bottom of your style sheet:

@media screen and (max-width: 480px) {
   body {
   width: 100%;
   float: none;
   }
}

Width of content and sidebar
In portrait mode in particular, there isn’t room for a sidebar to the right of the main content. Add the following code to the media query relating to devices with a maximum width of 320 pixels:

#content, #primary, #secondary {
width: 100%;
float: none;
margin: 10px 0;
}

Footer content, especially widgets
If your footer has widget areas or other elements with floats applied, you will need to override them for mobile devices in portrait mode.

If you want the footer widgets to be full width in both landscape and portrait modes, then simply add footer.widget-area to the CSS for the sidebars and content.

However, you might want the widget areas to be laid out side by side in landscape mode, depending on how many you have. In that case, you’ll need to do the following:

1. Work out the percentages for the widths, padding and margins (some box-model maths for you!);
2. Add the relevant code to your media query for devices with a maximum width of 480 pixels;
3. Add a separate query for devices with a maximum width of 320 pixels after the one you’re working on, with the following code:

footer .widget-area {
width: 100%;
float: none;
margin: 10px 0;
}

You might also need to adjust the text alignment and borders and padding, depending on your existing theme. Margins should be set to 0 on the left and right; suit them to your theme at the top and bottom, but generally they should be smaller than in the desktop version.

Image sizes
The images in your design might still break the layout or break out of their containing elements, making your website shrink when viewed on a mobile device. There is an easy fix for this:

body img {
max-width: 100%;
}

This will ensure that images are never wider than their containing element. You might need to tweak the CSS if images sized further up in the style sheet have greater specificity.

However, this solution isn’t ideal. The images might look smaller, but mobile devices will still have to download their full sizes, which will slow down response times and possibly lose visitors, as well as annoy users on expensive data plans (more of them are out there than you might think). There a number of solutions to this, some of which you will find in this roundup of articles on responsive images. You may recall the mobile-first approach mentioned earlier; one benefit of this approach is that it serves different-sized image files to devices based on screen width.

Text size
So, our layout is working, and everything displays nicely. But now that the website is narrower, the text might appear huge. We’ll need to adjust the text’s size with the following code:

body {
font-size: 60%;
line-height: 1.4em;
}

This sets the font size as a percentage of the size set for it further up in the style sheet.

4. Changing the Navigation Menus and Creating an App-Like Interface

Sometimes mobile users will want to access specific content; for example, visitors to a store’s website will want to find the store’s location easily, and visitors to an e-commerce website will want to shop with a minimum of clicks (or taps). Sometimes you might want to adjust the navigation to make the website look more like an app.

Here are some methods you can follow to do this:

• Use CSS to turn menu items that are visible on the desktop into drop-down menus, using code similar to what you would use to create a second-level drop-down menu on a desktop website.
• Use conditional PHP or a plugin such as Mobble to display a different menu depending on the device, as seen on the website that I developed for Centenary Lounge:
  
  Centenary Lounge desktop website
  
  Centenary Lounge mobile website
• Use CSS to display menu items as a vertical list of buttons to give the website an app-like look, such as on Cafe Blend:
  
  Cafe Blend desktop website
  
  Cafe Blend mobile website
• Use a plugin such as Dropdown Menus to display menu items as a drop-down walker, freeing up screen real estate.
• Use background images combined with media queries and floats, to create a grid of visual buttons for your navigation, giving the home page an app-like feel.
• Use fixed positioning to fix the navigation to the bottom of the screen, minimizing the need for scrolling, as seen earlier on Social Media Examiner.

The possibilities are limited only by your imagination and creativity!

5. A Problem!

You’ve added the media queries above, but your smartphone still displays the desktop version. Don’t worry! This is because many smartphones use a virtual viewport that is equal to the width of a small desktop, which prevents desktop-designed websites from breaking when rendered in the browser. This can be easily fixed by placing the following code in the head of each page. Because yours is a WordPress website, you need to add it only once, to the header.php theme file:

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

What this does is tell the phone to treat the size of the screen as its actual size, not the virtual size… if that makes sense.

Summary

Here’s what we’ve looked at in this article:

• Four different ways to make a WordPress website mobile-friendly: with a plugin, with a prebuilt responsive theme, with a separate mobile theme, and by making the existing theme responsive;
• Media queries for responsive design and how they target different device widths;
• Some common styles to make a WordPress website responsive in its layout, images and text.

As you can see, no one option is necessarily the best; it will depend on the website, on the budget and on the time and capability of those involved. Over time, most mobile-friendly WordPress websites will have responsiveness built into them, instead of using a separate theme, mobile website or plugin.

Hopefully this article has given you a starting point to make your WordPress website mobile-friendly. This is just the beginning of the possibilities. To further develop your mobile website, you might want to consider a mobile content strategy; a mobile-first design; APIs and native device functionality to create an even more app-like experience; and more.

Enjoy!

(al)

© Rachel McCollin for Smashing Magazine, 2012.