Website questions to ask a client in a discovery session

webdesign meeting

So you’ve just landed a client that needs a new website re-design. Depending on what they already have in place, you probably are going to need a discovery session with them in order to understand what it is they’re going to need to meet their business needs. These sessions can be very in depth requiring vast amounts of wireframes, mock-ups, user surveys etc. Unfortunately not all clients have big budgets and can afford to take all these aspects of production into consideration. I think they are all important in the design and maintenance of a web product but lets face a lot of small businesses only have $1500 for their website and that is not enough to cover the breadth of design and development specificatiosn previously mentioned.

Below I have compiled a short list of questions you can ask the client in order to identify the needs and requirements. If timelines are tight you can email them the list and ask them to fill out as much as possible. Let them know that the more information they give, the better chance of launching a succcessful product will occur.

Company-related questions

  1. Do you currently have a website? What is the URL?
  2. Describe the products/services you sell.
  3. Who are your main competitors? How do you differ?
  4. What are your top 3 frustrations with your current website?
  5. What do you like most about your current website?
  6. What do your current competitors website have that you aspire to?
  7. Age range of your target client base?

Project-related questions

  1. Technical skill level of your client base. Have a scale ranging from zero to ten with zero being the least technologically skilled and ten being the best.
  2. Will your visitors require any special needs? Mobile version of site, multiple language support, larger type for easier reading, etc.)
  3. Imagine your website in 5 years from now. Complete the sentence: I know my website works becauseā€¦
  4. Name 3 things that are most important about the design of your new website.
  5. Name 3 things that is least important in the design of your new website.
  6. Do you have any color preferences, existing brand colors, and/or colors you do/not wish to include?
  7. What are some existing websites that appeal to you? Provide links if possible.
  8. Deadline, timing or exact date of completion for your website?
  9. Do you have a budget you are trying to meet?

Additional questions

  1. Do you need to be able to update the website on your own? (ie: CMS)
  2. Will this be an e-commerce website? Will you be selling any products or taking payments on your website?
  3. Do you need a copywriter? If you are using existing copy on your current website, will it need to be modified in any way?
  4. Is your logo and other imagery web ready?
  5. Do you have all images that you would like to be included in your website or would you like the designer to use imagery where appropriate?
  6. How will you be updating the site in the future (if they are not using a CMS)?
  7. Will you be needing an additional SEO help (registering with search engines, adding businesses to Google Business Center, Analytic setup, etc.)?
  8. Do you already have a domain and host setup for your new website? If so, do you have the FTP and host log in information accessible?
  9. Any specific features you would like included? Log in ability, calendars, forums, blog, subscription services (RSS, email or newsletters)?

So as you can see this list of questions should help get a website project started and moving along. Nothing here is written in stone and every client will have different needs. But it helps to get a core set of questions in place.

Handy CSS and code snippets to use in your development

Handy code snippets for front-end development

CODE SNIPPETS:

HIDE LINK FOR VISUAL IMPAIRED OFF SCREEN

[php]<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="hidden"><p><a href="http://www.google.com">For the visually impaired, please click this link to launch the search tool</a></p></div>
</body>
</html>
[/php]

CENTER DIV

.centerContent{
margin: 0 auto;
display:flex;
justify-content: center;
}
*************ADD EXTERNAL LINK ICON****************
[php]<a href="">
<sup><abbrv title="opens in new window" class="smaller">
<span class="icon-share small">
<<pseudo:before>></<pseudo:before>>
</span>
</abbr>
</sup>
</a>
[/php]

TABLE list

[php]<ul>
<li>foo<br>foo</li>
<li>barbar</li>
<li>baz</li>
</ul>

ul {
width: 100%;
display: table;
table-layout: fixed; /* optional, for equal spacing */
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid pink;
vertical-align: middle;
}
[/php]

JQUERY Word Swap

[php]//$("#sort label").text($("#sort label").text().replace("Search:", "Filter:"));//replace the default word ‘Search’ with filter

function replaceNodeText() {
if (this.nodeType === 3) {
this.nodeValue = this.nodeValue.replace(replaceNodeText.find,
replaceNodeText.replace);
} else {
$(this).contents().each(replaceNodeText);
}
}
replaceNodeText.find = "Search";
replaceNodeText.replace = "Filter";
$("#sort_filter").contents().each(replaceNodeText);

<h3>center content in div:</h3>
.box{
display: flex;
flex-direction: column;
align-items: center;
}[/php]

RESPONSIVE TEXT CSS

[php]body {
font-size: calc(.7vw + 14px);
line-height: 1.5;
font-family: ‘Source Serif Pro’, serif;
font-style: normal;
font-weight: 400;
}

* {
box-sizing: border-box;
}

.content{
font-size:100%;
}
.wrapper {
margin: 0 auto;
padding: 2em 1em;
max-width: 45em;
}

h1 {
font-size: calc(4em – 1rem);
line-height: 1;
margin-bottom: 2rem;
}

p {
margin: 0;
margin-bottom: 1em;
}

p.pullquote {
font-size: 1.3em;
margin-bottom: 1em;
padding-left: 1.5em;
border-width: 0px 0px 0px 3px;
border-style: solid;
font-weight: 700;
margin-left: -1.5em;
}

.content .content{
font-size:66%;
width:66%;
background:yellow;
padding:1em;
}
[/php]

2 elements on the same line

[php]<div class="wrapSame">
<div class="memberName"><input name="member_name" label="member name" value="member name" title="member name" size="25"></textarea></div>
<div class="sameLine"><input id="searchBox" size="25"><input type="image" src="/site-resources/resource-files/img/magnify-22w.png" onsubmit="submit-form();" /></div>
</div>

.sameLine {
padding-right:40px;
display: inline;
float:right;
vertical-align:top;
}
.sameLinetext {
padding-right:40px;
display: inline;
float:right;
width:80%;
vertical-align:top;
}
.wrapSame{
display:block;
margin-bottom:20px;
clear:both;
}
[/php]

Have Two boxes side by side

[php].wrapCompany{
width:100%;
border-bottom:0px solid #000;
overflow: hidden; /* add this to contain floated children */
margin-bottom:60px;
}
.boxList{
width:45%;
float:left;
margin-left:2%;

}
.boxList2{
margin:0 auto;
width:45%;
float:left;
}[/php]

Alternate Table ROW background colour css3 Zebra Stripes

[php]
.profileTable{
width:100%;
border-collapse:collapse;
}
.profileTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.profileTable tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD background rows */
.profileTable tr:nth-child(odd){
background: #b8d1f3;
font-weight:600;
}
/* Define the background color for all the EVEN background rows */
.profileTable tr:nth-child(even){
background: #dae5f4;
}
[/php]

Hide h2 text from render

[php] nav header {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}[/php]

Prevent Googlebot from indexing web service pages:

[php]User-agent: googlebot
Disallow: /Office/LocationDetails.aspx
Disallow: /office/default.aspx
Disallow: /Electronics/Communitylist.aspx
Disallow: /electronics/locationdetails.aspx
Disallow: /electronics/Communitydetails.aspx
Disallow: /electronics/communitydetails.aspx
[/php]

Styling hyperlinks in a paragraph contained within a div with a class of sfContentBlock

[php].sfContentBlock p a, .sfContentBlock p a:link{
text-decoration:underline;
color:#0000ff;
}
.sfContentBlock p a:visited,.sfContentBlock p a:hover, .sfContentBlock p a:active{
text-decoration:none;
}
[/php]

Tool Tip with CSS used on Page Portal

[php]
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

<h3>CSS3 extras</h3>
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML:
<a href="#" title="tool tip" class="tooltip">skills
<span> <img alt="" src="https://crmportalqa.ola.org/images/default-source/default-album/callout.gif" class="callout" />
*Hint These could be academic, volunteer or work done in your community and at home.</span> </a>
[/php]

CSS Button used on Page Portal

[php].appButton {
background-color:#74ad5a;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:3px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
padding:10px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #92b879;
}
.appButton:hover {
background-color:#68a54b;
}
.appButton:active {
position:relative;
top:1px;
}
HTML:
<p><a href="/portal-secure-pages/Application" class="appButton">Start Your Application</a></p>
[/php]

No Page Cache

Put in head tags:
[php]<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
[/php]