SJP, Misspel Komedy, & Connected Web Solutions Present
Comedy Night at Holiday Inn New Cumberland

Headlined by Maddog Mattern

Featuring SOUL Joel & Pete Westwood

Hosted by Matt Scarpelli

Tickets ONLY $20 in advance and $25 at the door.
Includes the show & 2 drinks!!!

Photoshop Alternatives One simple example was providing a few alternatives to Photoshop for a client.  The client was under the impression that they needed Photoshop to resize and crop images to use in their CMS.  After pointing them along to Picnik, Aviary, and Gimp (if they wanted a stand-alone application), they were able to save a quick few hundred dollars.  This was not the first, nor the last, free service that we found to replace a powerful paid application.  Now a company like CWS could never replace Photoshop but for this particular client, these services could do everything they needed and more.

QR Code LibrariesAnother more recent example was clients looking to purchase a service that generates QR codes.  Again the clients did not realize that this was an unnecessary expense thanks to the libraries that are out there to generate these.  After a bit of Googling for the proper terms, I was able to find a few different libraries based the server technologies.  Sometimes we forget that Google is a powerful tool and, before throwing money at the problem, sometimes a good Googling can provide us with a myriad of solutions.

Spending on tech…

Before you go ahead and purchase that latest piece of hardware/software or decide on a web service, why not ask your web designer to see if they have any input.  

You could end up saving yourself a lot of time and money.  These are only a couple of examples but you can see the immediately savings.  Because of our thirst for knowledge we are constantly finding ways to save money, increase efficiency & productivity, and if we can’t find an answer, sometimes we even create our own  solutions  (see LeadSHIFT or ask about our ticketing system in development now).

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!

I just want to take the opportunity to say thank you to all our clients, consultants (Lee & Jim), and supporters over the last 5 years.  Without you, CWS would not be here today.  I can’t say thanks enough for all the fun web projects, hard work,  feedback, criticism, guidance, advice, Facebook likes, ReTweets, and support you have given.

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.

After seeing an article on Freelance Switch, Prospect to Client Tracking Spreadsheet, I figured rather than using just a document, why not build a simple web app to solve the same problem?  The article/document was the sole inspiration for LeadSHIFT.

I loved the idea of tracking the time from initial contact to signing a contract.  I also wanted to track things like which types of contact (email, face-to-face, phone, etc) and which types of project types (web design, app dev, consulting, etc) had the highest conversion rates.  If you know that you convert 75% of leads on the phone vs 45% with email why would you not get the lead on the phone?

Another great piece of trackable information would be referrals.  I thought wouldn’t it be great to see which contact referrals generated the most revenue or had the highest conversion rates.  Then when the time comes to seek more referrals you could see which contacts have referred well in the past and start there.

This is a simple FREE app that is open to everyone.  This is not supposed supposed to replace a CRM but supplement one.  If I see that there are enough users in the future, I may build in SSL protection and start storing things like email addresses and phone numbers and build out the people system a bit to have more CRM features.

For the time being, LeadSHIFT is just a tool to help freelancers and small businesses optimize their sales process.

Tweet

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.

For our latest app, LeadSHIFT,  we researched quite a few frameworks before choosing one for the backend and plan on porting the app to another to become familiar with its features.  I’ll give a brief overview of the ones we used below.

PHP Frameworks

After spending some time seeing which PHP framework I wanted to use, I finally decided on CakePHP.  I liked the fact that it had been around for quite a while with frequent updates and a strong community behind it.  When choosing a framework, a strong community is incredibly helpful when you run into trouble.  Even simple syntax and naming convention issues were just a Google search away.  I don’t think it’s the fastest framework out there but for an app of this size and complexity it is perfect.  I did run into some problems trying to do some complex queries through multiple tables but once I realized I could just use plain old SQL I easily got past them.

Javascript Framework

I have written about my love of jQuery in previous posts.  jQuery makes the headache of using Javascript go away.  It provided us with a simple way to clear form fields on focus and some pretty neat status effects (similar to Twitter when options are saved).  Whatever you do, make sure your web app works without Javascript enabled.  If you rely on jQuery for your web app to work you will be in some serious trouble when a user doesn’t have Javascript enabled.  Get things working nicely without it, and then maybe add a bit to enhance the user experience.  If the effects don’t add any value or make something easier, you are probably better off without them anyway.

CSS Framework (not really)

This one really isn’t a framework but I use it on every project to make things move a bit quicker on the CSS end.  By default, the majority of tags are marked up with size and margin information and sometimes more in the CSS.  By using the CSS Reset by Eric Meyer you can set all of these sizes, margins, paddings, and anything that might throw things off that are set in the default.  This basically gives you a clean slate in your CSS so you default styles don’t break your layout.

Stay tuned as we get ready to launch LeadSHIFT, a tool for managing leads and referrals for freelancers and small businesses, using the frameworks above.  Does anyone else use these frameworks or have you found better alternatives?  I would love to know in the comments.

Tweet