Take a look at the following list for some inspiration.  Look at them on your machine or mobile device and try different browser widths or switch between portrait and landscape to see differences.

Examples of Responsive Websites

CSS Tricks – http://css-tricks.com/

CSS Tricks was one of the first responsive sites I’ve seen that has more than just the standard resizing of elements. Not only does it have multiple widths outside of the standard ones for mobiles, tablets, and larger screens, but it also animates some elements (using CSS3) that will slide into place as your browser stretches. It’s a great example of responsive design and an even better resource for common solutions to coding problems.

The Boston Globe - http://bostonglobe.com/

This high-profile newspaper was the first big player to make the jump to responsive.  I love how when using a tablet/mobile device, the main navigation is condensed into an item called “Sections”.  When clicking, or hovering, it drops down to show the remaining main navigation categories.  Also notice the integrated weather that jumps around as your browser scales and the different use of fonts based on the current size.

Boagworld - http://boagworld.com/

I can’t say enough good things about Boagworld, as a resource, and now as a responsive design.  If you build or run websites, go there immediately and subscribe to all his feeds and audioboo’s.  Similar to the Boston Globe, his navigation is also condensed for mobile sizes, while still making it simple to search or subscribe (probably the 2 biggest goals of the site).  Larger images become hidden and content moves around slightly (very little is hidden) so the site is just as informative on a mobile device as it is on a workstation.

Think Vitamin - http://thinkvitamin.com/

Think Vitamin is a blog for web professionals with all kinds of great resources from articles to a podcast.  The site has a very unique navigation consisting of words and icons that hides and shrinks nicely as you get to smaller browsers.  Secondary content (topics, social icons, search, etc) is all hidden from the mobile views as well to make room for what is most important, CONTENT!

8 Faces - http://8faces.com/

8Faces is a beautifully crafted typography magazine with a responsive web design to match. While not as fluid as the others, it does a great job of keep relevant content obvious based on the browsing device. Check out the fluid slider images when you get down into the smaller mobile sized browser widths.

Try it yourself!

Go ahead and resize your browser or turn your mobile device to a different orientation while browsing this site! Notice how the sidebar is suppressed to below the main content on smaller resolutions and how images stretch to fit the full width of the browser in the mobile sizes. These are all very simple things to implement in your own responsive designs. With a bit of planning and time you can easily create a simple responsive design using media queries. Happy coding!

What I will do is briefly outline the steps from the initial meeting through a full launch from one of our previous projects that is simply a brochure site for a small business.  I will outline the hours as well to give you an idea of the man hours involved.

Initial Meetings & Communication (Proposals/Agreements)

The initial meeting can take place over the phone but is preferably done in person.  It is mainly a question and answer to understand the client’s needs and goals of the site.  We have a basic set of questions that help steer the discussion but this is mainly a time for listening and note-taking on our part.  This research and discovery phase is necessary to come up with an accurate project quote as well.  This formal quote is then prepared in a project agreement, eventually signed by both parties, that outlines the project scope, deliverables, timelines, etc. – 3.5 hours (including travel time and document preparation)

Creative

Once we have done the necessary research and discovery in the in initial meetings, we can move to the fun stuff.  The creative process can vary in terms of time and actual steps.  We have done everything from mood boards through to working prototypes and everything in between.  Check out a brief overview of our design process.  Each project calls for different steps.  This project required wireframes and mockups before it was ready for coding. – 3 hours

Ongoing Communication with the Client

This is the communication that is often forgotten.  Throughout each step of the creative process we try to keep the client involved and get feedback when necessary.  This usually involves a number of emails, phone calls, and even more meetings.  This particular project moved swiftly with 2-3 emails a week from each party as well as a call or two. – 2.5 hours

Team Communication

A project manager needs constant communication with team members.  We have to properly pass down all project information from the client to our designer and developer.  Each team member needs different pieces of information and questions are relayed back to the client before moving on with critical pieces at times.  This is also where the project manager can help guide the creative process in terms of wireframes and mockups as well in the case of the designer moving slightly away from the project requirements.  The project manager reviews every piece of the project that client, as well as any end-user, sees. – 5.5 hours

Development & Testing

This process is fairly self-explanatory.  For this project it was just a matter of coding the front-end with HTML, CSS, andJavascript without any need for a database.  We did have some simple integration with third-party services (Google Maps and Mailchimp) but both are very simple to integrate with.  We first built out the home page and tested in Firefox and Chrome.  We also did initial tests for Internet Explorer 6, 7, 8, and 9 at this point to make sure nothing was broken to the point of the site not being usable.  After the initial testing is done, the remaining pages are coded and then tested again in all the browsers to make sure everything still works as it should.   - 6 hours

Launch (including any quick post launch fixes)

Check out our launch process post to read exactly what we do on launch but this is usually the easiest part of the project.  It’s usually just a matter of moving files from the testing server over to the live server, which is exactly what happened in this case.  This doesn’t mean it’s always a cakewalk.  There have been times where the live servers were not configured properly where it took days to get a site up and running.  This is an odd case but we didn’t have the necessary server information until near launch. – 1.5 hours

Total Man Hours: 21.5 hours

So as you can see there are a few hours that go into the building of a fairly straight forward brochure website.  These were basically top-level views of each process as each one could have a post on itself, and maybe that’s what I’ll do in the future!  Now depending on the size of the agency (freelancer to large web agency) the hourly cost can vary and will sometimes be a fixed price.  Freelancers can afford to charge much less than a large agency since there is little to no overhead.  Large agencies have employees, benefits, and other office expenses.  That’s why the difference from a large agency can be up to 10x more expensive than a freelancer.  When billing hourly, I’ve seen beginning freelancers charge as little as $10-20/hour (here in the US), rockstar freelancers charge up to $100/hour (these guys are known in the industry and get pulled in as consultants on big contracts), and large agencies charge up to $150/hour (and sometimes more) depending on the type of work.

So based on our man hours above we have the following

Beginner Freelancer @ $20/hour – $430 
Rockstar Freelancer @ $100/hour – $2,150
Large Agency @ $150/hour – $3,225

Most agencies (and rockstar freelancers) will have fixed project costs and different steps but this is just one way to look at the breakdown of time and cost.  Keep in mind that these are only numbers that I’ve seen previously in my experience over the last 7 years or so…mileage may vary.

Hopefully this sheds some light on where all the time and money goes into a web project.  While this list might not be all-inclusive, it’s a great starting point in understanding a fairly straightforward web project.

Just about all of these are no-brainers but maybe there are some that you haven’t seen that you can add to your launch process.  We keep the site on our testing server throughout development  so our clients can see how the site will look without having to send screenshots or show them a laptop at a meeting.  Once we have sign-off on the testing server, we begin this launch process.

Edit .htaccess file for redirects

Rather than having 2 different URLs for a domain (http://yoursite.com and http://www.yoursite.com), we prefer to point all traffic to either the www. or the site without the www but never both.

Double check email addresses for web forms

We don’t usually use the client’s email address for testing so we must send these emails to the appropriate email addresses for the clients (and test the forms as well so they can see what a form submission will look like).

Favicon generation

Check out Dynamic Drive’s FavIcon Generator. Sometimes we use the logo or a logo element with this tool and other times we’ll create a custom 16×16 image depending on what we think is necessary for the client.

Install Google Analytics code

By doing this before we push the site live, we ensure accurate statistics from the beginning.

Get and block stakeholder IP addresses from analytics

Once a site launches, a client (and usually their whole office) will spend plenty of time combing through the site, looking for any quick fixes or adjustments. By blocking their IPs from the get-go, we don’t have to worry about them skewing the traffic stats over the first few days after launch.

Remove homepage links to index and set to domain

Rather than having http://yoursite.com and http://yoursite.com/index.html, we link directly to the URL. This also can give a small SEO push if the domain is keyword rich.

FTP files

Using Filezilla or Transmit, we push all the files and folders to the server.

Final testing with browsers

After FTPing the files up, we check the site in IE6-9, the latest versions of Firefox, Chrome, Safari, and Opera. At this point, we’ve already tested every page in these but it doesn’t hurt the double check on the live server.

So this is our standard site launch process. We don’t throw massive launch parties although there is occaissional solo dancing after a particularly long project. We like to the think the launch is only the first step to web greatness. It is your initial jump into the web world. The next few weeks/months should be used to review statistics and feedback so that you can adjust your site or test small changes and features. Websites are not static objects only to be touched once every 6 months or longer.  The best performing sites are constantly being updated with new content and features.

Tweet

I always found it very useful to see how other designers and agencies took websites from start to finish.  I think that I am comfortable enough at this point to share our design process here at CWS in hopes that it can help some young up-and-coming web professionals.

Phase 1 – Requirements Analysis
This is by far the most important phase so that time is not wasted during the rest of the process.  During the requirements analysis, it is our responsibility as the web design team to interview the stake holders and learn as much about the project as possible AND get a feel for what the stake holders are looking for.  We ask them questions about their customers, ask them for a list of good (and bad) looking websites, determine whether or not they have a logo and color scheme selected.  These are only a few questions but the more information we can gather in this phase the better.

Phase 2 – Mood boards
Mood boards are a great way to make sure you are on the right track in terms of some of the style guidelines as well as the emotions that are envoked.  Some people use a structured mood board guideline to identify color schemes, fonts, and other elements in a very organized way.  I feel this is a bit restrictive so we do our mood boards like collages without much structure.  We find bits and pieces from websites, art, photos, and anything else we might find relevant to the project.  The key is to not spend too much time on these and create a few different options.  This helps us get on the same page as the client.

Phase 3 – Wireframes

Using feedback from the requirements analysis and mood board phases, we then move onto the wireframes.  We sometimes use graph paper and sometimes we use digital tools.  We have even started using a dedicated wireframing/prototyping tool to make sharing with clients easier.  The goal of these wireframes is to establish the layout of elements.  We do not bother with colors, actual text, or images.  It is an exercise that can help establish priority on the page through positioning and sizing of these elements.

Phase 4 – Mockups
Once the layout is finalized from the wireframes, we then open Photoshop (or Fireworks) and start dropping the colors and whatever copy we have.   We also drop in whatever image elements we have (logos, marks, etc) and  start selecting photos to use in certain places.  Sometimes we do not know exactly the image we’ll need (see the mockup and our crude graphic to the right) but we know that the space will be reserved for the appropriate image.  The hope is that by the mockup stage nothing major will need to change in terms of layout because it has been established already in the wireframing phase.  Once the mockups (usually after some minor revisions) are approved we are good to start coding.  Ideally we want the site to match closely to the mockup but it is inevitable that there will be minor changes in the final site.

Step 5 – Coding
The mockup looks great and it’s time to start coding.  We usually start with one of our frameworks to make the initial coding much easier and to save some time.  We slice up the necessary images and start dropping them in as well as the finalized copy, prepared either by the client or a copywriter.  We make sure to adjust page titles, headers, image alt tags, and more for SEO to get the site ranking well  as soon as possible.  Once we get the site looking great in all the browsers, we go back and double check in IE6 and IE7 just to make sure that it is usable.  After all the pages have been coded and signed off by the client we go ahead and launch.

What’s Next?

Stay tuned for the next post which will be about our process of launching and the  steps after the launch to ensure the site performs as well as possible.

With this in mind, most of us (including CWS at times) design sites and content for ourselves before considering the audience and users.  We become so wrapped up in our own content and source material that it becomes hard to distinguish what is actually important to the users of the site.  We think about what looks good to us and stop there.  Obviously we all want to be proud of our websites but we must be careful not to look past the audience in the process.

By establishing your typical web user/lead/client you can cater to their needs first, followed by your own.

QUICK FIXES

• Look at your analytics and figure out where most of your users are leaving and optimize those pages first
• Ask your current users/clients if there is anything your website can have to be more useful to them
• Spend $39 to have a recorded user session at usertesting.com and find areas of improvement in your site
• Take some time to learn as much as you can about your current audience
• Don’t assume you know what your users want/need.  Ask them!

Q & A

Do users keep calling/emailing you asking the same question?
Provide the answer prominently on your site…in multiple places if necessary.  Take advantage of size, color and font weight (boldness) to dictate priority.

Does your audience have an accessibility issue? (ex.  you sell eyeglasses so there is a vision accessibility concern)
Based on the example above, you would increase the size and weight of your fonts to cater to your users first.  Just because you think the font size is fine with your 20/20 vision, your users will struggle to read the small fonts.  Did you check your site’s compatibility with color blindness?  As much as 8% of your users could not be seeing the colors accurately.

Are you not getting as many form submissions as you like?
Think about what information is a essential and trim your form to just that.  Nothing turns off ANY web user more than a long complicated form with too many fields.  When it comes to web forms, less is more.

Is your bounce rate incredibly high? (Users don’t make it past your home page)
Clearly state your call to action on the home page and provide something of value to the user.  This can be as simple as highlighting a product/service that is requested most and why it’s better than the competition with links to more information or directly to contacting you.

So again take a step back and evaluate who your site is for.  Happy users lead to a happy business.

Educate the client
Be sure from the beginning of the project that the client understands what you can do to help them.  Before showing them anything (even a wireframe) make sure they know that any feedback and criticism should be identified as a problem.  By identifying the problem, you can then provide them solutions that will be in the best interest of the site.  If the client knows up-front that you are there to provide solutions to problems they identify, you will save yourself a ton of time.  No more  “Make that font bigger!”.  Instead you might hear, “This text doesn’t stand out enough from the rest of the copy.  What can we do to make it a little more obvious and noticeable?”, which still allows you to do your job as the designer.

Ask the client why
If the client still insists on making design solutions just calmly ask them why they want a certain change to be made.  This is the easy way to identify the problem using the client’s words.   There will be times where a client’s suggestion will be a good design solution but for the wrong problem.  Identify the problem first and then you can either confirm their idea or present new solutions that might be better suited for the problem.

Key Things to Remember
Remember in the long run, the client hires you or your agency.  Ultimately the decisions will be theirs to make for their own sites.  It’s our job as designers to present the best solutions to their problems and be able to explain why a certain solution will be the best fit.  Don’t immediately shoot down a  suggestion, make sure the problem is identified.  If their solution is a viable fix, fantastic!  If not, explain to them logically why not and some other alternatives.

A few quick stats in the last month since the redesign…

Pageviews: +40.26%
Pages/Visit: +33.64%
Bounce Rate:  -50.51%
Average Time on Site:  +24.82

These stats are not skewed by anything since I haven’t written any blog posts, launched any sites, or had any other new links since the previous month.  These are based on average traffic.

BEFORE

AFTER

Some of the noticeable changes are

• 12 column grid based design
• Minimalistic look
• Enhanced navigation with subtle jQuery animation (with graceful degradation in IE7 and IE6)
• Current page indicator
• Info heavy footer (with contact and email newsletter signup forms)
• Removal of external links to recent projects
• Moved testimonials to About page sidebar
• Removed list of services and focused on the 2 core services we provide

We will constantly be evolving this site over the next year, running A/B tests, testing certain elements, to improve conversions where-ever necessary.  Check back for results of these A/B tests to see how colors, different wording, and images can affect the site.

Using the amazing project management platform, 5PM, I was able to pull all sorts of information necessary to create our project management status board pieces.  I love seeing when my people add a new progress note or if the “Other CWS Tasks” list gets cut in half.  I know stuff is being accomplished.

CWS Status Board Items

• Tasks assigned to me (via 5PM)
• Tasks assigned to others (via 5pm)
• Progress bars for tasks (via 5pm)
• Events in the next 7 days (via Google Calendar)
• Current time since we don’t have a clock (PHP)
• Current weather and tomorrow’s forecast (Yahoo Weather)
• RSS feeds for Digg, Lifehacker,  Smashing Mag, and Web Designer Depot (probably counter-productive)

Every container is automatically refreshed via AJAX so there is never a reason to manually refresh the page.  Every 30 minutes or so it will do an automatic full page refresh because Yahoo Weather doesn’t like the AJAX request for some reason but, again, no manual page refresh is required.

Why have a status board at all?

Think about how many windows or tabs you have open when you are working.  Think about the time it takes to navigate from 1 to the other and check what might be happening.  Imagine if you could always have a screenshot of the most important things going on regarding your company.  Rather than checking all your tabs, you just glance at your status board and see everyone all in 1 place.

Now if I can find a way to easily import Quickbooks data into this, this will be a super status board!  Any ideas on things to add?  How would you set up your status board?

The set up process took about 30 minutes to create the new buttons, pages, and inserting the necessary javascript code.  You install 1 piece of javascript in the original  and then another piece in the variations.  The 3 variations are below.

And now the results after letting it run for a few weeks.

As you can see the 2 variations have both outperformed the original at this time.  This simple test shows how useful this free service can be.  It will prove invaluable when testing call-to-action buttons, text, placement, forms, and just about anything else you can test.

This won’t be for everybody but for those that understand it, it can be another powerful weapon to greatly improve click-throughs and conversions.

I will probably let the test run a few more weeks to allow for 100 visitors on each variant to get a more accurate result.  Google recommends 100 visitors for each variant to reach an accurate conclusion.

Has anyone else had success with this tool or do they have any others to recommend?

3 years ago when starting the company I saw the need for this kind of product.  We had no good way of communicating with all the soccer alumni that went through my school.  We always thought it would be nice to have a way to communicate with all of them and provide job opportunities and a way to mentor the younger alumni or even current students.  alumLINK now makes this possible.

Head on over to http://myalumLINK.com and give it a test drive.  We are currently implementing this for teams, Greek organizations (fraternities/sororities), as well as athletic departments and even entire schools!