How to Create a Responsive Web Design Proposal

feat-imgAs a web designer, I love what I do. I love creating mockups, I love coding, I love the research, I love creative solutions, and I love geeky glasses and extra large headphones.

You know what I don’t necessarily love? Writing proposals, estimating timelines, and budgeting.

Don’t get me wrong, it’s not exactly a deal breaker for me, I just don’t necessarily look forward to it. However, I do understand its importance and it is absolutely a necessary evil.

But here is my problem with proposals: I am a problem solver, not a fortune-teller. It is for this reason, that I cannot stand when someone tells me to estimate how much time it would take me to redesign this website or create a mockup, and they want an answer on the spot. I can give a pretty accurate estimate, but in reality, every unique project needs a unique solution. In addition, new technologies and concepts are introduced everyday- which can make the proposal that much more difficult. Responsive design, for example, is a relatively new concept that must be researched before correctly estimating a timeline, strategy and budget.

So, in order to craft an accurate proposal, I need to really sit down, and pretend I have already started the project. In this article, I will explain my process for writing a responsive web design proposal.

What’s the Deal with Responsive Design?

For many clients, responsive design can be a tough sell. It is relatively new, it can be more expensive, more time-consuming and involve more resources. However, as anyone who is up to date on web design and content strategy will tell you, it is where the web is going. There are several benefits to building a site responsively, some of which include:

  1. You build a website once, and it works seamlessly across thousands of different screens.
  2. Make a change once, and the results are universal across the board.
  3. No more worrying about duplicate content.
  4. Easier link management.
  5. An arguably better user experience.
  6. Google recommends it. (Really, what more reason do you need than that?)

Speaking with the Client

Although you understand the importance of designing responsively, your client might not. But before you throw a laundry list of reasons why responsive design is important to a project’s success, it is crucial to first speak with the client.

Speaking to the client is imperative in this case. It can help you gauge their awareness of and receptiveness to the concept. In addition, as with any design- related project, it helps us to understand the specific problems the client is encountering. Understanding these problems is essential in creating effective solutions.

Please note that at the beginning of that last paragraph, I wrote “Speaking to the client…”- I mean this literally. You should speak with the client- in person, on Skype, on the phone, etc. Having this interaction allows us to pick up on things that you can’t see or hear in an email, such as the tone of the person’s voice, the level of their frustration, or the emphasis of certain issues.

During the initial phone call/Skype/face-to-face meeting, discuss the problems that your client is encountering with their current site. Some common complaints may include:

  • The site design is outdated.
  • There is not enough engagement for today’s users.
  • The homepage has a high bounce rate.
  • The site doesn’t work well on mobile devices.

It is at this stage of the process that you should be asking questions and LISTENING TO THE ANSWERS. As much as we all love to hear ourselves talk, there is a place and a time for that. Right now, you should be jotting down notes, and attempting to understand the client’s wants and needs. You don’t need to be thinking about solutions just yet. The important thing here is to listen and comprehend.

Follow Up

Once you have completed the initial conversation with the client, you may want to follow up with an email. In this email, you should provide all the notes from your phone call, and have the client approve everything. This ensures that you are both on the same page, and that you can move forward, together, in the right direction.


Now that you have spoken with the client and confirmed that you understand the problems, it is time to begin creating solutions.

And you thought this would be quick and easy! Do you understand my frustration with proposals now?

In all seriousness, this may seem like a lot of work to do just for a proposal, but it really will save you a huge headache in the future. The higher the level of communication that you establish with the client now, the more likely you are to avoid major issues later in the project.

As you research, be sure to continue taking copious notes- capture screenshots, copy URLS, write down your ideas, etc. These will come in handy very soon.

Creating a Timeline

Using the notes from the research you just conducted, you can more easily create a timeline for the project. Take into account all aspects of the project: research, design, content creation, development, client response, user testing, etc. Estimate how long each phase will take and include it in the calculation. If other parties (copywriters, developers, etc.) will be involved be sure to consult with them.

After you create your timeline, assign dates to it. This will help the client understand exactly when things will be completed, at which times his/her input will be necessary, etc. When assigning dates, be sure to give yourself ample time between the date the proposal will be given, and the time the project will start. This way, if your client needs time to look over things, you aren’t starting behind schedule. If the client responds right away, you have plenty of time to get ahead on your research!

Putting It All Together

A proper proposal will have a lot of information. My last proposal was about 1300 words, and included screenshots and in-depth justification for each aspect of the project. It may have been a bit time-consuming, but it was worth it. Because I am so passionate about what I do, I enjoy the research. And, all the research paid off, as the client agreed to follow through with the project!

When composing a proposal, I follow this basic outline:

I. Overview
II. Inspiration
a. Example
i. Link
ii. Justification
b. Example
i. Link
ii. Justification
c. Example
i. Link
ii. Justification
III. Timeline
IV. Budget in an Hourly Breakdown
a. Research
b. Design
c. Development
d. Client Revisions
e. User Testing

Wrapping Things Up

When writing proposals, it is important that you maintain authority and guide the client to the solutions you have designed. In order to do this, you need to speak with the client, listen carefully, conduct thorough research, provide examples, and clarify expectations.

Overall, the most important aspect of creating a proposal is communication. It is crucial that you understand the problems from the beginning, so you can propose and implement the most efficient solutions.

Have you been thinking about a responsive redesign? Contact us today, and see if I can convince you!

February 15, 2013

Written by Bridget Farrell

Bridget Farrell is the designer, illustrator and artist in charge of creating and implementing clean, elegant web solutions for Optimum7 and their clients. Upon her graduation from Nova Southeastern University in Fort Lauderdale, FL, Bridget began to design professionally. Although she loves logo and print design, she feels that web design is where her true passion lies today. “I enjoy designing for the web because it’s truly the direction marketing is heading in. Most CEOs aren’t looking to order stationary for their companies; they want polished, well-developed websites- and this is where I come in.” Bridget has a constant thirst for knowledge and thrives on keeping current with all of the latest technology. She works with Photoshop, Illustrator, HTML, CSS, PHP, Javascript, MySQL, WordPress, Joomla and Volusion. A true nerd at heart, Bridget can often be found spending her nights and weekends reading, researching and occasionally practicing yoga.

This entry was posted in Web Design and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Devid White
    Posted February 21, 2013 at 11:28 am | Permalink

    Hello, I am looking to build a responsive website. So, I have fully read your post, and you are an intelligent and thoughtful designer! I cannot wait to begin the process!

  2. Thomas Strike
    Posted February 21, 2013 at 4:30 pm | Permalink

    This is a great subject. I to have the same dislike for this opening stage of a project. I like to create, but what am I going to create? That’s why we end up engaging the potential client with this dreaded process of creating a proposal.

    An opening discussion with the client is paramount and should be done face to face. One should make an appointment with the client of at least an hour to discuss the project. By making an appointment, it gives the client a chance to clear his slate and his mind to devote this time to the project. It also gives him an opportunity to look forward to this meeting and think about what he needs to contribute to the discussion. When you are finished with this meeting, you should leave with a full understanding of what this project’s content, aesthetics, and it’s operation should be, and be well defined in your mind. From this your proposal should be easy to create. It should offer the client a reasonable timeline and the final draft will be a contract that specifies what the client can expect from you and what you need from the client.

    Your theme title of Responsive Design should be part of every designer’s strategy. The alternative to this would subject one’s self to a mountain of repetitiveness, not to mention the risk of having your theme drift on you as you work your way through the site.

    I personally design using Concrete5. It is a CMS not like WordPress, Joomla, or Drupal. It is a CMS for serious responsive web construction unlike those that were created with blogging in mind. With c5, I build a package that includes a master header and footer design. Even the body of the page layout is created as a reusable element, Once all of the basic elements are created, they are re-used throughout the whole site and the page design need not be done each time a new page is created. You can create as many different page body layouts as you want to draw from. For pages that are basically stand alone but are completely integrated into the project, c5 has that concept available also. By using a Content Management strategy, it also holds the theme of the web site together. Page creation is as simple as adding the content and it’s structure on the page where you want it. C5 has a sharp learning curve, depending on how good of a PHP programmer you are, but it’s well worth getting to know it.

    In conclusion Responsive Design strategies should be your standard, not an elective.

  3. Edwin Lap
    Posted March 11, 2013 at 12:50 am | Permalink

    Nice post. I deal with this on a regular basis and the key like you said is COMMUNICATION with the client, face to face (or via skype, webex, gotomeeting) and literally having a document in hand for sign off “do you understand…” sign here.

    It is going to be harder and harder to explain to clients what they are getting in the end, but it is our responsibility to explain it to them.

  4. Posted March 11, 2013 at 8:54 am | Permalink

    Hi Edwin,

    Thanks so much for the comment, I’m glad you liked the post!

    Regular communication is definitely key to any client-designer relationship. I also think it is important to mention that they type of communication will vary from client to client. For example, some clients will have a firm grasp on the topic and others will not. It is important to remain calm, and explain everything as best you can in order to keep the client happy and informed.

    Thanks again for the comment, Edwin! :-)

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>