Tag: kranthi

Why Account Managers Shouldn’t Prevent Designers From Speaking To Clients


  

Working as a Web designer can suck sometimes. This is especially true when you don’t get to work alongside the client. Unfortunately this scenario is more common than you would think. Many organizations have been carefully structured to keep the Web designer and the client apart. But is that really sensible? Would projects run much smoother without your account manager or boss acting as the middleman?

This issue came to my attention following the release of my latest book “Client Centric Web Design.â€� In this book I provide advice about how to work more effectively with clients. However, I had made an assumption in the approach I presented, an assumption which turned out not always to be true. It assumed that the Web designer and client can work collaboratively together. Following the book’s release I realized that for many Web designers that this is not the case.


Image credits go to Brett Jordan.

Whether working in house for a large organization or as part of a Web design agency, many Web designers never get to interact directly with their clients. Instead, the client’s requirements and comments are filtered through a middleman who manages the project.

In this post I examine why I believe this is damaging to projects and what can be done to rectify the problem. However, before we can answer these questions, we must understand why this way of working has become common in the first place.

Why We Have Account Managers

I want to make it clear that I believe that both project and account managers play a valuable role. There are good reasons why they are part of the Web design process and I am not suggesting they should be removed.

It is the role of account managers to provide outstanding customer service. This is a vital (if often overlooked) role of any Web design agency—we are not here just to build websites, we are here to provide a service to our clients. That means making our clients happy by communicating well, meeting deadlines and delivering within the budget. Our project managers regularly receive gifts from our clients thanking them for a job well done. This is how close the relationship between client and account manager can become. By lifting the responsibility for customer service from the Web designer, account managers allow us to focus on the job of actually designing and building websites—a luxury that many freelancers envy.

The account manager also deals with the plethora of organizational tasks which keep a project running smoothly, not to mention protecting us from the endless comments and questions from the client. I have had the misfortune of working on many projects where we have been drip-fed feedback from multiple stakeholders almost continually throughout the project. If it wasn’t for the account manager, I would have very quickly lost control of what needed to be done on the website. Lets face it, they also protect the client from us, as we sometimes have an overwhelming urge to rant at them uncontrollably (or perhaps that is just me). They also act as interpreters, taking our technobabble and translating it into a language that the client can understand.

In short, a good account manager ensures the client is happy and that the project remains profitable. Those are valuable roles and one that a designer would struggle to do on top of their other responsibilities. Just ask the average overworked freelancer.

If then the account manger is so valuable, where is the problem?

So Where Is The Problem?

Although having an account manager is incredibly useful, things often get out of hand. The role of account manager transforms from being a part of the project team to the sole conduit between client and designer. Instead of facilitating a smooth running project they become the bottleneck through which all communication must pass. This funnelled approach to communication prevents collaboration between the client and the Web designer. This kind of collaboration is essential to ensuring a happy client and a successful website.

Without collaboration, educating the client is difficult. Unsurprisingly most clients don’t know much about the Web design process. However, by working alongside the client throughout the project, the client learns the best practice for Web design and why certain design decisions are made. This educational process works both ways. The client will learn a lot about the Web design process, but the designer will also learn a lot about the client and his business. When the Web designer understands the nuances of the project, business and client, they produce better websites. Without that understanding they are much more likely to go down the wrong road by wasting time and money, while frustrating the client.

This isn’t just limited to designers either. Like many Web design agencies, we excluded developers from client meetings for a long time. Their time was precious and we didn’t want to waste it in meetings. However, we eventually discovered that when the developer understands the details of a project, they produce more elegant solutions and often suggest directions which nobody else had considered. When all communication has to pass through a middleman, the chances of misunderstanding and mistakes are further increased. Like a game of chinese whispers, what is said by the client or designer can be distorted by the time it has passed through an account manager.

I remember experiencing this regularly when I worked for an agency in the late nineties. A passing comment made by a client would become a dictate from the account manager that I had to follow. Instead of being a designer who could bring my experience to bear on a project, I became a pixel pusher. Because I wasn’t hearing directly from the client, I could not judge the strength of their feelings and so had no opportunity to challenge them over issues I felt passionately about.

Finally (and probably most importantly), without the client and designer working together on a project the client feels no sense of ownership over the design. The projects that inevitably go wrong at my agency are those where the final decision-maker is not actively involved in the design process. If a client has been involved in the design process, commenting and working with the designer at every stage, they are less likely to reject the final design—they will feel the design is as much their creation as that of the designer’s. However, if their feedback was through an account manager, they won’t have that sense of hands on involvement.

Fortunately, we can have the best of both worlds. We can have the benefits of an account manager, while still allowing the designer to work closely with the client.

The Best Of Both Worlds

At Headscape the role of the account manager is not to control all of the client communications, but to act as a facilitator for those communications. This provides all of the benefits of having an account manager and none of the drawbacks.

For a start, the Web designer and developer always attends project kickoffs, so they meet the client at the beginning of a project. This also ensures that they get all of the background on the project firsthand, rather than via the account manager. The Web designer also works directly with the client discussing ideas and presenting design. This gives the designer the opportunity to present their work in their own words and hear the feedback directly from the client. They can also work collaboratively with the client on some aspects of the design, such as wireframing, to help increase the client’s feeling of ownership and engagement. This also has the added benefit of allowing the designer to question and challenge the feedback they receive, engaging in a much richer discussion with the client.

The account manager is still very much a part of the process. He is still the client’s primary point of contact and remains responsible for ensuring the project stays on time and within budget. Also, whenever possible, he should be involved in discussions between the designer and client, to ensure he is fully aware of everything agreed upon. Where conversations take place without his involvement, the Web designer should report back to the account manager on the content of those discussions.

This all sounds great in theory. However, in the real world of company politics and long-held working practices, you may meet resistance when implementing this approach. In such situations it is important to proceed carefully.

Getting The Support Of Your Account Manager

None of us like change, especially when it involves others telling us how to do our job. It is therefore hardly surprising that you may well meet resistance from your account manager if you suggest the approach that I have outlined in this article.

The key is to not to get frustrated if you meet resistance. Look at it from their point of view: how would you feel if they came along and told you to design websites in a different way, or worst still, suggested they should be more heavily involved in the design of client websites?! No doubt you would be horrified, so take the time to empathize with your account manager and seek ways to make the transition easier.

I occasionally encountered designers who complain to me that they have tried to implement my approach and had been shot down by their account managers. Inevitably the reason behind this failure has been because they have tried to rush the transition. If you go in all guns blazing, the idea will be rejected. Instead, start small and build up over time.

One starting point that has worked for others I have spoken to is to sit in on key meetings. For example, if you are not normally part of the kickoff meeting, start with that. Or if you don’t get to hear the client’s feedback firsthand, ask to be involved in that call. Reassure the account manager that all you want to do is sit in so you can hear what was said. That way they won’t worry about what you might say in front of the client. Once you are involved in those meetings regularly it becomes easier for you to start slipping in the odd comment.

I also recommend thinking carefully about how you present this approach to your account manager. It would be easy to focus on why you want to do it. However, you will have much more success if you present the benefits the approach provides for them. Remember, their primary concern is to ensure that the project is delivered on time and within budget. Therefore, when suggesting your heavier involvement with the client, explain that this will reduce the chance of misunderstandings, leading to a faster sign-off. This in turn will mean less iterations and higher profits on the project—all music to the ears of your average account manager.

Finally, point out that if you work directly with the client it will ultimately mean less work for them. Everybody loves the sound of less work! If you present the idea of direct collaboration with the client as having benefits for the project (and for the account manager personally), the chances are you will meet a lot less resistance.

I confidently believe that allowing the Web designer to work with the client ultimately leads to better websites, happier clients and a greater sense of job satisfaction for the designer. However, I am also aware it has its challenges. I would therefore like to see more discussion about how to best get this collaborative relationship working with organizations that traditionally keep these two parties apart. Perhaps the comments are the place to kick start the conversation.

(jvb) (jc)


© Paul Boag for Smashing Magazine, 2012.


Why Account Managers Shouldn’t Prevent Designers From Speaking To Clients


  

Working as a Web designer can suck sometimes. This is especially true when you don’t get to work alongside the client. Unfortunately this scenario is more common than you would think. Many organizations have been carefully structured to keep the Web designer and the client apart. But is that really sensible? Would projects run much smoother without your account manager or boss acting as the middleman?

This issue came to my attention following the release of my latest book “Client Centric Web Design.â€� In this book I provide advice about how to work more effectively with clients. However, I had made an assumption in the approach I presented, an assumption which turned out not always to be true. It assumed that the Web designer and client can work collaboratively together. Following the book’s release I realized that for many Web designers that this is not the case.


Image credits go to Brett Jordan.

Whether working in house for a large organization or as part of a Web design agency, many Web designers never get to interact directly with their clients. Instead, the client’s requirements and comments are filtered through a middleman who manages the project.

In this post I examine why I believe this is damaging to projects and what can be done to rectify the problem. However, before we can answer these questions, we must understand why this way of working has become common in the first place.

Why We Have Account Managers

I want to make it clear that I believe that both project and account managers play a valuable role. There are good reasons why they are part of the Web design process and I am not suggesting they should be removed.

It is the role of account managers to provide outstanding customer service. This is a vital (if often overlooked) role of any Web design agency—we are not here just to build websites, we are here to provide a service to our clients. That means making our clients happy by communicating well, meeting deadlines and delivering within the budget. Our project managers regularly receive gifts from our clients thanking them for a job well done. This is how close the relationship between client and account manager can become. By lifting the responsibility for customer service from the Web designer, account managers allow us to focus on the job of actually designing and building websites—a luxury that many freelancers envy.

The account manager also deals with the plethora of organizational tasks which keep a project running smoothly, not to mention protecting us from the endless comments and questions from the client. I have had the misfortune of working on many projects where we have been drip-fed feedback from multiple stakeholders almost continually throughout the project. If it wasn’t for the account manager, I would have very quickly lost control of what needed to be done on the website. Lets face it, they also protect the client from us, as we sometimes have an overwhelming urge to rant at them uncontrollably (or perhaps that is just me). They also act as interpreters, taking our technobabble and translating it into a language that the client can understand.

In short, a good account manager ensures the client is happy and that the project remains profitable. Those are valuable roles and one that a designer would struggle to do on top of their other responsibilities. Just ask the average overworked freelancer.

If then the account manger is so valuable, where is the problem?

So Where Is The Problem?

Although having an account manager is incredibly useful, things often get out of hand. The role of account manager transforms from being a part of the project team to the sole conduit between client and designer. Instead of facilitating a smooth running project they become the bottleneck through which all communication must pass. This funnelled approach to communication prevents collaboration between the client and the Web designer. This kind of collaboration is essential to ensuring a happy client and a successful website.

Without collaboration, educating the client is difficult. Unsurprisingly most clients don’t know much about the Web design process. However, by working alongside the client throughout the project, the client learns the best practice for Web design and why certain design decisions are made. This educational process works both ways. The client will learn a lot about the Web design process, but the designer will also learn a lot about the client and his business. When the Web designer understands the nuances of the project, business and client, they produce better websites. Without that understanding they are much more likely to go down the wrong road by wasting time and money, while frustrating the client.

This isn’t just limited to designers either. Like many Web design agencies, we excluded developers from client meetings for a long time. Their time was precious and we didn’t want to waste it in meetings. However, we eventually discovered that when the developer understands the details of a project, they produce more elegant solutions and often suggest directions which nobody else had considered. When all communication has to pass through a middleman, the chances of misunderstanding and mistakes are further increased. Like a game of chinese whispers, what is said by the client or designer can be distorted by the time it has passed through an account manager.

I remember experiencing this regularly when I worked for an agency in the late nineties. A passing comment made by a client would become a dictate from the account manager that I had to follow. Instead of being a designer who could bring my experience to bear on a project, I became a pixel pusher. Because I wasn’t hearing directly from the client, I could not judge the strength of their feelings and so had no opportunity to challenge them over issues I felt passionately about.

Finally (and probably most importantly), without the client and designer working together on a project the client feels no sense of ownership over the design. The projects that inevitably go wrong at my agency are those where the final decision-maker is not actively involved in the design process. If a client has been involved in the design process, commenting and working with the designer at every stage, they are less likely to reject the final design—they will feel the design is as much their creation as that of the designer’s. However, if their feedback was through an account manager, they won’t have that sense of hands on involvement.

Fortunately, we can have the best of both worlds. We can have the benefits of an account manager, while still allowing the designer to work closely with the client.

The Best Of Both Worlds

At Headscape the role of the account manager is not to control all of the client communications, but to act as a facilitator for those communications. This provides all of the benefits of having an account manager and none of the drawbacks.

For a start, the Web designer and developer always attends project kickoffs, so they meet the client at the beginning of a project. This also ensures that they get all of the background on the project firsthand, rather than via the account manager. The Web designer also works directly with the client discussing ideas and presenting design. This gives the designer the opportunity to present their work in their own words and hear the feedback directly from the client. They can also work collaboratively with the client on some aspects of the design, such as wireframing, to help increase the client’s feeling of ownership and engagement. This also has the added benefit of allowing the designer to question and challenge the feedback they receive, engaging in a much richer discussion with the client.

The account manager is still very much a part of the process. He is still the client’s primary point of contact and remains responsible for ensuring the project stays on time and within budget. Also, whenever possible, he should be involved in discussions between the designer and client, to ensure he is fully aware of everything agreed upon. Where conversations take place without his involvement, the Web designer should report back to the account manager on the content of those discussions.

This all sounds great in theory. However, in the real world of company politics and long-held working practices, you may meet resistance when implementing this approach. In such situations it is important to proceed carefully.

Getting The Support Of Your Account Manager

None of us like change, especially when it involves others telling us how to do our job. It is therefore hardly surprising that you may well meet resistance from your account manager if you suggest the approach that I have outlined in this article.

The key is to not to get frustrated if you meet resistance. Look at it from their point of view: how would you feel if they came along and told you to design websites in a different way, or worst still, suggested they should be more heavily involved in the design of client websites?! No doubt you would be horrified, so take the time to empathize with your account manager and seek ways to make the transition easier.

I occasionally encountered designers who complain to me that they have tried to implement my approach and had been shot down by their account managers. Inevitably the reason behind this failure has been because they have tried to rush the transition. If you go in all guns blazing, the idea will be rejected. Instead, start small and build up over time.

One starting point that has worked for others I have spoken to is to sit in on key meetings. For example, if you are not normally part of the kickoff meeting, start with that. Or if you don’t get to hear the client’s feedback firsthand, ask to be involved in that call. Reassure the account manager that all you want to do is sit in so you can hear what was said. That way they won’t worry about what you might say in front of the client. Once you are involved in those meetings regularly it becomes easier for you to start slipping in the odd comment.

I also recommend thinking carefully about how you present this approach to your account manager. It would be easy to focus on why you want to do it. However, you will have much more success if you present the benefits the approach provides for them. Remember, their primary concern is to ensure that the project is delivered on time and within budget. Therefore, when suggesting your heavier involvement with the client, explain that this will reduce the chance of misunderstandings, leading to a faster sign-off. This in turn will mean less iterations and higher profits on the project—all music to the ears of your average account manager.

Finally, point out that if you work directly with the client it will ultimately mean less work for them. Everybody loves the sound of less work! If you present the idea of direct collaboration with the client as having benefits for the project (and for the account manager personally), the chances are you will meet a lot less resistance.

I confidently believe that allowing the Web designer to work with the client ultimately leads to better websites, happier clients and a greater sense of job satisfaction for the designer. However, I am also aware it has its challenges. I would therefore like to see more discussion about how to best get this collaborative relationship working with organizations that traditionally keep these two parties apart. Perhaps the comments are the place to kick start the conversation.

(jvb) (jc)


© Paul Boag for Smashing Magazine, 2012.


Why Account Managers Shouldn’t Prevent Designers From Speaking To Clients


  

Working as a Web designer can suck sometimes. This is especially true when you don’t get to work alongside the client. Unfortunately this scenario is more common than you would think. Many organizations have been carefully structured to keep the Web designer and the client apart. But is that really sensible? Would projects run much smoother without your account manager or boss acting as the middleman?

This issue came to my attention following the release of my latest book “Client Centric Web Design.â€� In this book I provide advice about how to work more effectively with clients. However, I had made an assumption in the approach I presented, an assumption which turned out not always to be true. It assumed that the Web designer and client can work collaboratively together. Following the book’s release I realized that for many Web designers that this is not the case.

Why Account Managers Shouldn't Prevent Designers From Speaking To Clients
Image credits go to Brett Jordan.

Whether working in house for a large organization or as part of a Web design agency, many Web designers never get to interact directly with their clients. Instead, the client’s requirements and comments are filtered through a middleman who manages the project.

In this post I examine why I believe this is damaging to projects and what can be done to rectify the problem. However, before we can answer these questions, we must understand why this way of working has become common in the first place.

Why We Have Account Managers

I want to make it clear that I believe that both project and account managers play a valuable role. There are good reasons why they are part of the Web design process and I am not suggesting they should be removed.

It is the role of account managers to provide outstanding customer service. This is a vital (if often overlooked) role of any Web design agency—we are not here just to build websites, we are here to provide a service to our clients. That means making our clients happy by communicating well, meeting deadlines and delivering within the budget. Our project managers regularly receive gifts from our clients thanking them for a job well done. This is how close the relationship between client and account manager can become. By lifting the responsibility for customer service from the Web designer, account managers allow us to focus on the job of actually designing and building websites—a luxury that many freelancers envy.

The account manager also deals with the plethora of organizational tasks which keep a project running smoothly, not to mention protecting us from the endless comments and questions from the client. I have had the misfortune of working on many projects where we have been drip-fed feedback from multiple stakeholders almost continually throughout the project. If it wasn’t for the account manager, I would have very quickly lost control of what needed to be done on the website. Lets face it, they also protect the client from us, as we sometimes have an overwhelming urge to rant at them uncontrollably (or perhaps that is just me). They also act as interpreters, taking our technobabble and translating it into a language that the client can understand.

In short, a good account manager ensures the client is happy and that the project remains profitable. Those are valuable roles and one that a designer would struggle to do on top of their other responsibilities. Just ask the average overworked freelancer.

If then the account manger is so valuable, where is the problem?

So Where Is The Problem?

Although having an account manager is incredibly useful, things often get out of hand. The role of account manager transforms from being a part of the project team to the sole conduit between client and designer. Instead of facilitating a smooth running project they become the bottleneck through which all communication must pass. This funnelled approach to communication prevents collaboration between the client and the Web designer. This kind of collaboration is essential to ensuring a happy client and a successful website.

Without collaboration, educating the client is difficult. Unsurprisingly most clients don’t know much about the Web design process. However, by working alongside the client throughout the project, the client learns the best practice for Web design and why certain design decisions are made. This educational process works both ways. The client will learn a lot about the Web design process, but the designer will also learn a lot about the client and his business. When the Web designer understands the nuances of the project, business and client, they produce better websites. Without that understanding they are much more likely to go down the wrong road by wasting time and money, while frustrating the client.

This isn’t just limited to designers either. Like many Web design agencies, we excluded developers from client meetings for a long time. Their time was precious and we didn’t want to waste it in meetings. However, we eventually discovered that when the developer understands the details of a project, they produce more elegant solutions and often suggest directions which nobody else had considered. When all communication has to pass through a middleman, the chances of misunderstanding and mistakes are further increased. Like a game of chinese whispers, what is said by the client or designer can be distorted by the time it has passed through an account manager.

I remember experiencing this regularly when I worked for an agency in the late nineties. A passing comment made by a client would become a dictate from the account manager that I had to follow. Instead of being a designer who could bring my experience to bear on a project, I became a pixel pusher. Because I wasn’t hearing directly from the client, I could not judge the strength of their feelings and so had no opportunity to challenge them over issues I felt passionately about.

Finally (and probably most importantly), without the client and designer working together on a project the client feels no sense of ownership over the design. The projects that inevitably go wrong at my agency are those where the final decision-maker is not actively involved in the design process. If a client has been involved in the design process, commenting and working with the designer at every stage, they are less likely to reject the final design—they will feel the design is as much their creation as that of the designer’s. However, if their feedback was through an account manager, they won’t have that sense of hands on involvement.

Fortunately, we can have the best of both worlds. We can have the benefits of an account manager, while still allowing the designer to work closely with the client.

The Best Of Both Worlds

At Headscape the role of the account manager is not to control all of the client communications, but to act as a facilitator for those communications. This provides all of the benefits of having an account manager and none of the drawbacks.

For a start, the Web designer and developer always attends project kickoffs, so they meet the client at the beginning of a project. This also ensures that they get all of the background on the project firsthand, rather than via the account manager. The Web designer also works directly with the client discussing ideas and presenting design. This gives the designer the opportunity to present their work in their own words and hear the feedback directly from the client. They can also work collaboratively with the client on some aspects of the design, such as wireframing, to help increase the client’s feeling of ownership and engagement. This also has the added benefit of allowing the designer to question and challenge the feedback they receive, engaging in a much richer discussion with the client.

The account manager is still very much a part of the process. He is still the client’s primary point of contact and remains responsible for ensuring the project stays on time and within budget. Also, whenever possible, he should be involved in discussions between the designer and client, to ensure he is fully aware of everything agreed upon. Where conversations take place without his involvement, the Web designer should report back to the account manager on the content of those discussions.

This all sounds great in theory. However, in the real world of company politics and long-held working practices, you may meet resistance when implementing this approach. In such situations it is important to proceed carefully.

Getting The Support Of Your Account Manager

None of us like change, especially when it involves others telling us how to do our job. It is therefore hardly surprising that you may well meet resistance from your account manager if you suggest the approach that I have outlined in this article.

The key is to not to get frustrated if you meet resistance. Look at it from their point of view: how would you feel if they came along and told you to design websites in a different way, or worst still, suggested they should be more heavily involved in the design of client websites?! No doubt you would be horrified, so take the time to empathize with your account manager and seek ways to make the transition easier.

I occasionally encountered designers who complain to me that they have tried to implement my approach and had been shot down by their account managers. Inevitably the reason behind this failure has been because they have tried to rush the transition. If you go in all guns blazing, the idea will be rejected. Instead, start small and build up over time.

One starting point that has worked for others I have spoken to is to sit in on key meetings. For example, if you are not normally part of the kickoff meeting, start with that. Or if you don’t get to hear the client’s feedback firsthand, ask to be involved in that call. Reassure the account manager that all you want to do is sit in so you can hear what was said. That way they won’t worry about what you might say in front of the client. Once you are involved in those meetings regularly it becomes easier for you to start slipping in the odd comment.

I also recommend thinking carefully about how you present this approach to your account manager. It would be easy to focus on why you want to do it. However, you will have much more success if you present the benefits the approach provides for them. Remember, their primary concern is to ensure that the project is delivered on time and within budget. Therefore, when suggesting your heavier involvement with the client, explain that this will reduce the chance of misunderstandings, leading to a faster sign-off. This in turn will mean less iterations and higher profits on the project—all music to the ears of your average account manager.

Finally, point out that if you work directly with the client it will ultimately mean less work for them. Everybody loves the sound of less work! If you present the idea of direct collaboration with the client as having benefits for the project (and for the account manager personally), the chances are you will meet a lot less resistance.

I confidently believe that allowing the Web designer to work with the client ultimately leads to better websites, happier clients and a greater sense of job satisfaction for the designer. However, I am also aware it has its challenges. I would therefore like to see more discussion about how to best get this collaborative relationship working with organizations that traditionally keep these two parties apart. Perhaps the comments are the place to kick start the conversation.

(jvb) (jc)


© Paul Boag for Smashing Magazine, 2012.


Create A Responsive, Mobile-First WordPress Theme


  

Let’s assess the situation. WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. More and more mobile devices are flooding the market every day, changing the way people use the Internet. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices. So, what are we waiting for? Let’s get to work!

How to create a responsive mobile first WordPress Theme

At first, the idea of designing and developing a fully responsive, mobile-ready WordPress theme might be overwhelming. You might be thinking, “How do I handle a responsive design with all of this flexible content that a WordPress theme has? What should I consider when designing for touch devices? And do I really have to get rid of drop-down menus and other hover elements on mobile devices?�

But after doing some research and looking more closely at some of the responsive WordPress themes and theme frameworks out there, you will probably wrap your head around the idea pretty quickly, and the evolving world of WordPress theme design will sound like a huge opportunity that you can’t wait to get started on.

It’s All About Preparation

Having a detailed design concept is even more important for a responsive WordPress theme than for a static-width theme. At this stage, you haven’t decided anything, so nothing will get in your way of creating a clever and practical layout that adapts smoothly to different screens.

First, consider what you want to achieve with your WordPress theme, which user group you are targeting, and what their needs are. With these considerations, you can create a list of useful elements for your layout.

Creating the Theme’s Concept

Using this list, you can plan your theme by sketching the layout at various screen sizes.

Responsive WordPress theme layout sketches

When sketching, be aware that the layout widths you choose are only rough reference points to represent the common screen sizes of today’s smartphones, tablets and desktop computers. Your goal should always be to create a responsive design that adapts smoothly to a wide diversity of screen sizes.

Ethan Marcotte, author of Responsive Web Design, described his approach to responsive Web design in a recent interview, explaining:

I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of “320px,â€� “480px,â€� “768px,â€� or whatever — the Web’s so much more flexible than that, and those pixels are a snapshot of the Web as we know it today. Instead, we should focus on breakpoints tailored to the design we’re working on.

While working on your concept sketches, also think about which layout options to offer in the theme (such as header and sidebar options or multiple widget areas) and how they will adapt to different screen sizes as well.

Responsive Layout Sketches
An optional sidebar element in a responsive layout.

Tools for Concept Sketching

Which tool you use to develop the theme’s concept is not important. Just choose one that allows you to work quickly and that doesn’t interrupt your workflow.

If you feel most comfortable sketching on a piece of paper or in a notebook, go for it. You could also try sketching on an iPad using a popular app such as Paper by FiftyThree or Bamboo Paper, together with a digital pen like Wacom’s Bamboo Stylus. Working directly on a tablet will make sharing your ideas later with the developer a lot easier. One of my all-time favorite articles is Mike Rohde’s “Sketching: The Visual Thinking Power Tool,� which promotes sketching as a simple visual tool for thinking.

The iPad as a Sketching Tool
Use your tablet a simple fast sketching tool.

A Good Concept Saves Time

If you develop the concept precisely at the beginning of the project, you will save a lot of time and effort later in the design process. The layout will adapt to different screen sizes more intelligently if you have thought a lot about the design’s behavior before even opening Photoshop (or your software of choice).

Theme-Specific Challenges to Consider

Because designing a WordPress theme with very flexible content is quite a different challenge than designing a static website, at this early stage of the process you should find solutions to the following theme-specific problems:

1. WordPress’ Navigation Menu

Until responsive Web design found its way into WordPress theme designs, most themes seemed to rely on good old-fashioned drop-down menus to give users multi-level navigation. But because drop-down menus rely on mouse hovering, they don’t work well on touch devices.

We already have some smart solutions for developing responsive, touch device-ready navigation. Brad Frost has a very helpful resource comparing common solutions for responsive menus in his post “Responsive Navigation Patterns.�

2. Responsive Layout Options

Most themes offer users at least some layout options, such as left or right sidebar, header widget and footer elements. To offer this kind of flexibility in a responsive theme, you will have to consider how all of the layout elements will behave on different screen sizes. For instance, if you want to offer a left sidebar option, consider that the content of this sidebar would appear above the main content area on mobile devices. In most cases, this wouldn’t be the best solution because mobile users want to read the most important content first (such as the latest blog post) without having to scroll down a sidebar.

3. Flexible Widget Areas

Widget areas are another challenge for responsive designers. After all, designing one is not easy if you don’t know what kind of content the user will put in it. So, you need to make sure that the design works no matter which and how many widgets are used in the widget areas.

Enough Headaches. Let’s Get To The Fun.

Because you are creating a responsive website, designing the entire website pixel by pixel in Photoshop and then just handing it over to the developer would result in too static a design and too time-consuming a process.

Working With Reference Points

Instead, the design process should be used to figure out the general look and feel of the theme. At this stage, you should also work more intensively on the challenges mentioned, such as responsive navigation, layout variations and flexible widget areas.

How you prepare the design for further development will depend partly on the nature of the project and how closely you will work with the developer. In general, showing your design in the three layout versions is a good starting point: smartphone, tablet and desktop. These “screenshots� can then be used as reference points for development.

Responsive web design layouts
A responsive layout in three variations.

Designing in the Browser

Design details such as font sizes, white space and button styles can be defined later directly in the browser. Because browsers often treat these elements differently, designing and testing them directly in their final environments is way more efficient.

Designing for Touch Devices

Because your design will also be used on touch devices, you have to consider the special requirements of these devices. Using a finger to navigate a website is entirely different than using a precise mouse cursor.

This is why buttons and form input fields need to be at the right size. Font sizes and white space should also be applied more generously, so that users can navigate easily and read content comfortably.

Exercise Your Communication Skills

Staying in constant communication with the developer during the entire process is very important (i.e. if you are not the developer yourself). Especially in a responsive design process, incorporating the developer’s knowledge into your decisions will keep you from having to change things later on.

Development

After wrapping up the design process, the first decision to make is whether to code the theme from scratch or to use a blank or starter theme (such as Automattic’s Toolbox or the newer _s theme).

If you want to work with one of the popular responsive frameworks such as Twitter’s Bootstrap or ZURB’s Foundation, then you could use a starter theme that already includes the framework, such as BootstrapWP or WordPress Foundation. Another popular starter theme is Bones, which uses 320 and Up as a mobile-first boilerplate.

Of course, the way you start a theme will always depend on the project and your personal preferences. But if you’re still learning, then a blank theme would serve as a solid foundation for development.

Go Mobile First

A smart approach is to design and develop for the smallest layout first (i.e. smartphones) and then work your way up to tablet and desktop screen sizes. To get further insight into the mobile-first approach to Web design, read the book Mobile First by Luke Wroblewski.

Mobile First Web Design
Design and develop your WordPress theme starting with the smallest size first.

Supporting Media Queries in Old Browsers

With the smartphone layout as your default, you will need to rely on a JavaScript solution such as Respond.js to support media queries in old browsers (such as Internet Explorer 7 and 8).

Alternatively, you could add CSS classes for old IE browsers through conditional comments, and then add CSS styles to set a maximum width for old IE browsers outside of your media queries. You can find a detailed explanation of this method in the article “Leaving Old Internet Explorer Behind.�

Images in a Responsive Theme

With the release of high-pixel-density devices such as the new iPad and new MacBook Pro, you will also need to reconsider the images in your theme.

Alternatives to images would be to use a CSS solution or use icon fonts. Fewer images will also result in a much more lightweight theme, which will speed up performance on slow mobile Internet connections. Trent Walton shares his reflections on the Retina-optimization of Web design in his article “In Flux.�

Test, Test, Test

Particularly when developing a responsive theme, testing your work live as soon and as often as possible is critical. This way, you can quickly correct styles during development as necessary. Also, test whether fonts are easy to read and whether images, gallery sliders and embedded elements such as video work correctly on different devices.

How to Test on Mobile Devices

Of course, checking your theme on one of the many screen-resolution-testing tools, such as Screenfly, during development is very helpful, too.

Testing a web design with Screenfly
The mobile version of United Pixelworkers’s website tested with Screenfly.

But because of the different behavior of mobile browsers, touchscreens and high-density screens, constantly testing your theme on actual devices is important.

Unless you work for a big company, finding ways to test your theme during the development process can be quite a challenge. Of course, you won’t be able to test on all of the devices out there, but besides the devices that you own, you could ask friends, family, other freelancers and coworkers to help you test. You can also visit your local electronics store to test on the devices there.

Test your WordPress theme on multiple devices
Test your WordPress theme on various devices as often as you can.

A helpful post with a lot of testing advice is part 5 of the recent “Build a Responsive Site in a Week� tutorial series on .NET magazine.

Responsive Theme Vs. Mobile Plugin

A mobile theme plugin such as the popular WPtouch plugin can be a great temporary solution to give mobile users a better experience on an existing website. In most cases, offering visitors an optimized mobile experience with the help of a plugin is probably better than not optimizing at all.

But in the long term, a fully responsive theme has many advantages to a plugin:

  • The website can maintain its unique branding across all devices.
  • Users will get the same experience on all devices and thus have less trouble navigating the website.
  • The website will be easier to maintain (the administrator won’t need to install and update the plugin).

Responsive theme vs mobile theme plugin
A responsive WordPress theme on the left, and a mobile plugin at work on the right.

Conclusion

Responsive Web design is often still described as a trend. And some might quietly hope that the trend will pass sooner or later. But responsive Web design is so much more than a trend: it’s a new mindset, as has been said:

It’s such a shame that Responsive design is often degraded to being a ‘Web design trend’. It isn’t. It’s a new mindset.

In a multiple-device world, where the Internet seems to be available everywhere, responsive Web design feels so much more like a natural process that is just starting to show its potential.

So, what should our job as theme designers and developers be? Because responsive WordPress themes are still so new and in constant development, we must not be afraid to start from scratch, search for improvements and continue learning. And let’s share our knowledge and experience with each other along the way.

(al)


© Ellen Bauer for Smashing Magazine, 2012.


Create A Responsive, Mobile-First WordPress Theme


  

Let’s assess the situation. WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. More and more mobile devices are flooding the market every day, changing the way people use the Internet. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices. So, what are we waiting for? Let’s get to work!

How to create a responsive mobile first WordPress Theme

At first, the idea of designing and developing a fully responsive, mobile-ready WordPress theme might be overwhelming. You might be thinking, “How do I handle a responsive design with all of this flexible content that a WordPress theme has? What should I consider when designing for touch devices? And do I really have to get rid of drop-down menus and other hover elements on mobile devices?�

But after doing some research and looking more closely at some of the responsive WordPress themes and theme frameworks out there, you will probably wrap your head around the idea pretty quickly, and the evolving world of WordPress theme design will sound like a huge opportunity that you can’t wait to get started on.

It’s All About Preparation

Having a detailed design concept is even more important for a responsive WordPress theme than for a static-width theme. At this stage, you haven’t decided anything, so nothing will get in your way of creating a clever and practical layout that adapts smoothly to different screens.

First, consider what you want to achieve with your WordPress theme, which user group you are targeting, and what their needs are. With these considerations, you can create a list of useful elements for your layout.

Creating the Theme’s Concept

Using this list, you can plan your theme by sketching the layout at various screen sizes.

Responsive WordPress theme layout sketches

When sketching, be aware that the layout widths you choose are only rough reference points to represent the common screen sizes of today’s smartphones, tablets and desktop computers. Your goal should always be to create a responsive design that adapts smoothly to a wide diversity of screen sizes.

Ethan Marcotte, author of Responsive Web Design, described his approach to responsive Web design in a recent interview, explaining:

I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of “320px,â€� “480px,â€� “768px,â€� or whatever — the Web’s so much more flexible than that, and those pixels are a snapshot of the Web as we know it today. Instead, we should focus on breakpoints tailored to the design we’re working on.

While working on your concept sketches, also think about which layout options to offer in the theme (such as header and sidebar options or multiple widget areas) and how they will adapt to different screen sizes as well.

Responsive Layout Sketches
An optional sidebar element in a responsive layout.

Tools for Concept Sketching

Which tool you use to develop the theme’s concept is not important. Just choose one that allows you to work quickly and that doesn’t interrupt your workflow.

If you feel most comfortable sketching on a piece of paper or in a notebook, go for it. You could also try sketching on an iPad using a popular app such as Paper by FiftyThree or Bamboo Paper, together with a digital pen like Wacom’s Bamboo Stylus. Working directly on a tablet will make sharing your ideas later with the developer a lot easier. One of my all-time favorite articles is Mike Rohde’s “Sketching: The Visual Thinking Power Tool,� which promotes sketching as a simple visual tool for thinking.

The iPad as a Sketching Tool
Use your tablet a simple fast sketching tool.

A Good Concept Saves Time

If you develop the concept precisely at the beginning of the project, you will save a lot of time and effort later in the design process. The layout will adapt to different screen sizes more intelligently if you have thought a lot about the design’s behavior before even opening Photoshop (or your software of choice).

Theme-Specific Challenges to Consider

Because designing a WordPress theme with very flexible content is quite a different challenge than designing a static website, at this early stage of the process you should find solutions to the following theme-specific problems:

1. WordPress’ Navigation Menu

Until responsive Web design found its way into WordPress theme designs, most themes seemed to rely on good old-fashioned drop-down menus to give users multi-level navigation. But because drop-down menus rely on mouse hovering, they don’t work well on touch devices.

We already have some smart solutions for developing responsive, touch device-ready navigation. Brad Frost has a very helpful resource comparing common solutions for responsive menus in his post “Responsive Navigation Patterns.�

2. Responsive Layout Options

Most themes offer users at least some layout options, such as left or right sidebar, header widget and footer elements. To offer this kind of flexibility in a responsive theme, you will have to consider how all of the layout elements will behave on different screen sizes. For instance, if you want to offer a left sidebar option, consider that the content of this sidebar would appear above the main content area on mobile devices. In most cases, this wouldn’t be the best solution because mobile users want to read the most important content first (such as the latest blog post) without having to scroll down a sidebar.

3. Flexible Widget Areas

Widget areas are another challenge for responsive designers. After all, designing one is not easy if you don’t know what kind of content the user will put in it. So, you need to make sure that the design works no matter which and how many widgets are used in the widget areas.

Enough Headaches. Let’s Get To The Fun.

Because you are creating a responsive website, designing the entire website pixel by pixel in Photoshop and then just handing it over to the developer would result in too static a design and too time-consuming a process.

Working With Reference Points

Instead, the design process should be used to figure out the general look and feel of the theme. At this stage, you should also work more intensively on the challenges mentioned, such as responsive navigation, layout variations and flexible widget areas.

How you prepare the design for further development will depend partly on the nature of the project and how closely you will work with the developer. In general, showing your design in the three layout versions is a good starting point: smartphone, tablet and desktop. These “screenshots� can then be used as reference points for development.

Responsive web design layouts
A responsive layout in three variations.

Designing in the Browser

Design details such as font sizes, white space and button styles can be defined later directly in the browser. Because browsers often treat these elements differently, designing and testing them directly in their final environments is way more efficient.

Designing for Touch Devices

Because your design will also be used on touch devices, you have to consider the special requirements of these devices. Using a finger to navigate a website is entirely different than using a precise mouse cursor.

This is why buttons and form input fields need to be at the right size. Font sizes and white space should also be applied more generously, so that users can navigate easily and read content comfortably.

Exercise Your Communication Skills

Staying in constant communication with the developer during the entire process is very important (i.e. if you are not the developer yourself). Especially in a responsive design process, incorporating the developer’s knowledge into your decisions will keep you from having to change things later on.

Development

After wrapping up the design process, the first decision to make is whether to code the theme from scratch or to use a blank or starter theme (such as Automattic’s Toolbox or the newer _s theme).

If you want to work with one of the popular responsive frameworks such as Twitter’s Bootstrap or ZURB’s Foundation, then you could use a starter theme that already includes the framework, such as BootstrapWP or WordPress Foundation. Another popular starter theme is Bones, which uses 320 and Up as a mobile-first boilerplate.

Of course, the way you start a theme will always depend on the project and your personal preferences. But if you’re still learning, then a blank theme would serve as a solid foundation for development.

Go Mobile First

A smart approach is to design and develop for the smallest layout first (i.e. smartphones) and then work your way up to tablet and desktop screen sizes. To get further insight into the mobile-first approach to Web design, read the book Mobile First by Luke Wroblewski.

Mobile First Web Design
Design and develop your WordPress theme starting with the smallest size first.

Supporting Media Queries in Old Browsers

With the smartphone layout as your default, you will need to rely on a JavaScript solution such as Respond.js to support media queries in old browsers (such as Internet Explorer 7 and 8).

Alternatively, you could add CSS classes for old IE browsers through conditional comments, and then add CSS styles to set a maximum width for old IE browsers outside of your media queries. You can find a detailed explanation of this method in the article “Leaving Old Internet Explorer Behind.�

Images in a Responsive Theme

With the release of high-pixel-density devices such as the new iPad and new MacBook Pro, you will also need to reconsider the images in your theme.

Alternatives to images would be to use a CSS solution or use icon fonts. Fewer images will also result in a much more lightweight theme, which will speed up performance on slow mobile Internet connections. Trent Walton shares his reflections on the Retina-optimization of Web design in his article “In Flux.�

Test, Test, Test

Particularly when developing a responsive theme, testing your work live as soon and as often as possible is critical. This way, you can quickly correct styles during development as necessary. Also, test whether fonts are easy to read and whether images, gallery sliders and embedded elements such as video work correctly on different devices.

How to Test on Mobile Devices

Of course, checking your theme on one of the many screen-resolution-testing tools, such as Screenfly, during development is very helpful, too.

Testing a web design with Screenfly
The mobile version of United Pixelworkers’s website tested with Screenfly.

But because of the different behavior of mobile browsers, touchscreens and high-density screens, constantly testing your theme on actual devices is important.

Unless you work for a big company, finding ways to test your theme during the development process can be quite a challenge. Of course, you won’t be able to test on all of the devices out there, but besides the devices that you own, you could ask friends, family, other freelancers and coworkers to help you test. You can also visit your local electronics store to test on the devices there.

Test your WordPress theme on multiple devices
Test your WordPress theme on various devices as often as you can.

A helpful post with a lot of testing advice is part 5 of the recent “Build a Responsive Site in a Week� tutorial series on .NET magazine.

Responsive Theme Vs. Mobile Plugin

A mobile theme plugin such as the popular WPtouch plugin can be a great temporary solution to give mobile users a better experience on an existing website. In most cases, offering visitors an optimized mobile experience with the help of a plugin is probably better than not optimizing at all.

But in the long term, a fully responsive theme has many advantages to a plugin:

  • The website can maintain its unique branding across all devices.
  • Users will get the same experience on all devices and thus have less trouble navigating the website.
  • The website will be easier to maintain (the administrator won’t need to install and update the plugin).

Responsive theme vs mobile theme plugin
A responsive WordPress theme on the left, and a mobile plugin at work on the right.

Conclusion

Responsive Web design is often still described as a trend. And some might quietly hope that the trend will pass sooner or later. But responsive Web design is so much more than a trend: it’s a new mindset, as has been said:

It’s such a shame that Responsive design is often degraded to being a ‘Web design trend’. It isn’t. It’s a new mindset.

In a multiple-device world, where the Internet seems to be available everywhere, responsive Web design feels so much more like a natural process that is just starting to show its potential.

So, what should our job as theme designers and developers be? Because responsive WordPress themes are still so new and in constant development, we must not be afraid to start from scratch, search for improvements and continue learning. And let’s share our knowledge and experience with each other along the way.

(al)


© Ellen Bauer for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress