So, you want to build a website?

From planning to deployment, and development to support.
Whether it's your personal site, or a project for a client.
Let this site guide you through building a web presence that is both informative and easy to use.

Let's Get Started

Planning

Start off on the right foot.

Where Do I Begin?

The first step is to determine what your site is going to be about, and who your audience is. You can do this by asking yourself the following questions:

Determining business goals
  • What would you like your web presence to achieve?
  • What kind of objectives do you have for your site?
    • Are you focused on conversions / getting people to buy your product(s)?
    • Do you want your site to be informational / educational for others?
    • Are you trying to gather information from your visitors for some other purpose?
Determining target audience
  • Who is your product/service geared for?
    • Age?
    • Occupation?
    • Education level?
    • Geographic location?

These are just a few of the questions you should be asking yourself. By answering these questions, you can further determine what kind of content you'll need to create. Also they help determine the best way to reach your target audience.

Yeah, But What About Simple Redesigns?

There's no such thing. Even if the site you're building is just a refresher of a site that already exists, you should be going through the planning process to ensure that the new site meets all of the business's needs. The target audience may have changed, there may be new accessibility issues you need to address, new features to address needs not currently being met, or content may have changed and SEO is no longer accurate.

Heuristic analyses and task flows

These are unique parts of the planning process that need to be implemented in a "simple redesign."

A heuristic analysis is when usability tests are conducted by completing specific tasks on the website. These analyses will reveal problem areas that can then be addressed, giving the user a better experience.

Task flows consist of determining what the primary tasks are on the existing site, documenting how they are presently achieved, and pinpointing any potential improvement areas.

Never think that a redesign should be "simple"

So much more goes into a redesign than just changing the color palette and layout. And tackling it head-on with a full plan will allow for accurate quotes/estimates, ensuring that you don't short-change yourself.

Let's Create Content!

Content

What are you trying to share with the Internet?

Content is king.

Seriously, think about it. What is the purpose of a site without content? There isn't one. So this is the biggest and most important part of building out a new site or redesigning an existing one.

The Chicken and the Egg.

This is the age-old question, isn't it? Do we come up with a design first? Or content?

Well, the answer is quite simple. CONTENT. How can you possibly create an effective design without knowing what kind of content is going to be displayed in it?

Take e-zines for example. With a lot of articles to show and with each article having different weight for drawing attention you wouldn't place these in a single column layout, would you? No. You want columns, lots and lots of columns.

And a photography portfolio wouldn't be shown in lots of little distracting boxes, right? You want big, beautiful images that draw you in.

Gather content first

As soon as the planning stage is over, you should be generating your content or getting it from your client. At the very least you need to have an outline of what the major blocks of content will exist, how many pages, and if they will require separate layouts so you can plug in some filler text to get a good feel for how the site will look and you can begin the design phase.

What About SEO?

Ah, yes, the hot topic that everyone wants to talk about. This is possibly the biggest part of content creation. Before you / your client begins generating content, you should start planning for search engine optimization. For tips on climbing to the top of the search engine result pages check out the development page!

It's Time To Talk Design!

Design

Your design choices can make or break your site.

Now, design is a pretty subjective thing.

Beauty is in the eye of the beholder and all that. But there are certain techniques and methods that objectively make great design when it comes to web, so below are some tips and tricks to get you started.

White Space

Give your content and images room to breathe! Break things up and space them out. We aren't limited to 800x600 pixel screen resolutions anymore. According to W3Schools over 97% of users today have screen resolutions over 1024x768 px. 35% are at 1366x768 and 18% are at 1920x1080. So don't force yourself to adhere to the tiny crammed spaces of yesterday.

Desktop, Tablet & Mobile

As you are designing, keep in mind that users are looking at websites on a wide variety of devices, from their iPods, Phones, Tablets, Laptops and Desktops. Even on their television screens. So we want to be sure that we think about these different canvases while we figure out how everything will be displayed.

Mobile First!

Recently mobile devices bypassed traditional desktop usage for browsing the internet. So it's very important to ensure an excellent experience on mobile devices while users are on the go. So here's a list of tips for mobile design:

  • Put important information first - that means addresses, phone numbers, and links to purchase items.
  • Do not add content to the initial landing page that isn't immediately important (remember your business requirements!), instead focus on those calls to action. However, always ensure that there is a way to access it on an interior page.
  • Make the header and footer smaller. You're working with a very limited amount of space, you don't want to waste that valuable screen real estate with just branding and copyright info.
  • Hide the menu, replace it with a button that says Menu and can be toggled on and off so the user can use it when they want and not have to scroll by it if they don't need it.
  • Optimize your images, replace large images with small versions. Ensure that your site loads quickly because often mobile users are on slow connections!

Calls to Action

Calls to action can greatly boost your conversion rates. Sometimes regular links are overlooked - but a call to action button that is very visible can entice users to click on the link and purchase your product/service.

Colors

Soften your text color, instead of straight black try a dark gray (such as #333-#444). While contrast is good, sometimes it can be too much. Black text on a stark white background can be hard on the eyes. Consider that the physical books we read are very rarely straight black on white. The pages are generally a softer tan and the ink is slightly faded. It gives a much more natural look.

Avoid difficult to see color schemes, like yellow text on red or blue backgrounds. These color combinations are not only hard to read for the average user, but can also make it impossible to read for our color-blind visitors. Use colors that are complimentary on the color wheel. You can find great color schemes on Adobe Color CC (previously known as Kuler)

Ready To Develop!

Development

If your site doesn't function well, people won't bother to use it.

Clean, Meaningful, and Semantic Code

This is really important. Make sure your code is clean and properly nested and that it - above all else - makes sense in its context. If it's a blog, use article and aside tags. If it's a header, use the header tag, same with footers. Sections of content should use the section tag. Navigation items should use the nav tag. There are a lot of new HTML tags that were introduced in HTML5 to assist in semantic coding. Check them out on the W3 Schools website.

Explain yourself!

Comment, comment, comment! If it's not absolutely obvious, you should explain it. If you're not sure, comment anyway. It does a world of good for the next developer who comes along.

Create comments that are descriptive and thorough, explaining what you are doing and why.

Accessibility is Key

Make sure your site is accessible for all visitors. Not just mobile site users - but for those who are blind or have other impairments. Here are some do's and don'ts:

  • Don't use "click here..." for links.
  • Do make the anchor text descriptive and use a title attribute if it's not obvious where the link will lead in the current context.

  • Do add alt tags to every image. These assist screen readers in describing images to blind visitors.
  • Don't create generic alt tags like "image", "picture", "graphic", or the filename.
  • Do create descriptive alt tags that clearly describe what the image is of.

  • Don't auto-play videos/audio files on your site.
  • Do allow users to choose to auto-play media on your site.

  • Do add captions and transcripts for media such as audio and video.

  • Do ensure that users can easily adjust sound levels.

  • Do implement descriptions for charts and diagrams.

  • Don't incorporate colors that have low contrast or are difficult to read.
  • Do use colors that are easy to see with high contrast for visitors who have vision impairments.

  • Don't use tiny text sizes or hard to read font-faces.
  • Do use text that is readable and appropriate for your audience that can be resized.

  • Don't incorporate any flashing media or colors that could induce seizures.

  • Do ensure that all functions can be controlled by either keyboard or mouse.

  • Don't create lots of modals or pop ups for collecting information from your users.
  • Do create easy to use forms as regular pages so your visitors can choose to enter info.

  • Don't block users from viewing your content just to force them to like your social media page.
  • Do encourage interaction with Twitter and Facebook integration on your site in a non-intrusive way.

Time for testing!

Testing

Get your site in front of anyone and everyone!

This is a crucial part of the process of building an effective website. What is easy-to-use for you, may not be for the average user who doesn't know anything about building websites.

As such it's incredibly important that toward the end of the development stage, you begin usability testing.

Test your site in every browser, resolution, etc that you can get your hands on. iPhones, Android and Windows phones, Windows and Mac machines, Chrome, Firefox, Safari, and of course (and unfortunately) Internet Explorer/Edge.

Gather as many people as you can on as many different devices as you can and have them explore the site and give you feedback. Get people who are not close to the project and can act objectively as standard users so you can gather valuable feedback.

What is easy for you as the designer or developer of the site, may not be easy for a standard user.

Give your testers specific tasks to achieve on the site and determine how easy or difficult it was for them to complete. This will help guide you onto any revisions that you may need to make to ensure that your site is effective.

Be sure to follow up!

Follow Up

Don't let your site become obsolete!

Revisit What You've Already Done

It's so incredibly important to revisit the site at least quarterly to ensure that content is up to date and SEO information is accurate. You don't want to put all of the time and energy into creating a web presence just to let it get dated and obsolete.

Maintaining Your Reputation

If someone searches for sites built by you and finds horribly dated or broken websites, that reflects poorly on the brand you've been working so hard to create for yourself. So while you may not want to revisit projects you've already completed, you're going to have to decide which is more important to you - some time investment or losing street cred. If it's one of your own sites, give it an occasional face lift (this isn't even the original design for this site!) and refresh some content to keep it relevant.

Maintaining Relationships

If you built the site for a client, check in with them! Just drop a quick email to see how it's going. Ask if they are still happy with their finished site, and if they are having any problems or have questions or concerns. This will not only ensure that your clients are happy and more likely to stay loyal to you, but they will be more likely to recommend you to others which is a huge bonus for you! Plus there's the chance for you to up-sell with a redesign or content changes and gain a little extra work for yourself.

Whew! We're finally done!

You now know the best practices to take a website from the planning stage to deployment! Now go get 'em!

Want to see these best practices in action?

Contact me to get started on a project!