Posts Tagged ‘google analytics’

Making A Website From Start To Finish – Part 3

In Part 1 and Part 2 of this tutorial of how to make a website from start to finish, I talked mostly about the preparation before you begin the development and publishing process of the website. Now, in Part 3, I’ll talk about the actual coding and development of the site, the publishing process, and then how to test and improve your site once you’ve finished it. Here’s a list of each item we’ll talk about:

  • Database Design and Creation
  • Site Development
  • Cross Browser Testing
  • Installing Analytics
  • Publishing Your Website
  • A/B Testing, Data Analysis, and Site Optimization

As in Parts 1 and 2 of this tutorial, I’ll use our fake restaurant website as an example for each item in the list.

1. Database Design and Creation: Before you go ahead and build your website, you should determine if you need a database to store any information for display or interaction purposes. If you are using WordPress, then there are tons of plugins that can help with this. If you aren’t using WordPress, then you should build out your table structure, determine the foreign key relationships between tables, build them, and insert at least some test data before you begin your site development. I’m not a database expert, so I won’t go on to describe the details of this step, that’s up to you, I’m just saying you should handle it before you start developing.

For our restaurant website, we can go in one of two directions. We can have hardcoded menus, or, we can use a database to power the menus. If menu items are consistent in structure (if individual items all follow the same pattern of a name, description, and price for example), then I’d opt for a database. I’d set up a table of menu items and menu categories (such as appetizers, salads, desserts, etc.), and possibly seasons since we talked about the menu changing seasonally before. Then I’d handle the foreign key constraints from the categories and seasons tables into the menu items table so that each menu item has a name, description, price, availability (boolean flag so we don’t have to delete items), category foreign key, and season foreign key. I’d handle the interface for editing these database tables later.

2. Site Development: Now that you’ve got your designs, content, database (if needed), and CMS (if needed), you’ve got all the tools to complete your site development. Here’s how I’d recommend going about the development process:

Step 1. Get your header and footer templates or master file set first. To do this, build out a full single page in static HTML with your CSS in a separate document. Now that you’ve gotten a full single page, you can identify where the content is going to change from page to page, thus allowing you to pull out the parts of HTML that will remain the same on every page. With this knowledge, you can separate out your header and footer files (or master file, depending on what environment you are coding in), leaving you with a single working page that uses template file/s plus and external style sheet.

Step 2. Begin building out your other individual pages. Add more CSS as needed. Add in your content as you encounter each page. Hook in your database if appropriate. Focus primarily on all of the static content (whether it is hard-coded or brought in from the database doesn’t matter), and leave the interaction for later.

Step 3. Finish off your development with javascript. Once you are done developing a bulk of (or all of) your pages, you can add in javascript to improve usability and add fun and interesting effects. Javascript is a basic component to a majority of websites now, and many even rely on it. Javascript, being a client-side language, has the potential of really improving user interaction and bringing your site to the next level.

3. Cross Browser Testing: After you’ve finished development of your site, it is time to test! Depending on the complexity of your site, you could include some other quality assurance in this testing, but for simpler sites, for the most part, cross-browser testing is probably sufficient. Currently, it is important to test in IE, Safari, Firefox, and Chrome. It is also ideal to test those browsers on both a Mac and a PC (except for IE on Mac). Depending on what you expect your user base to be like, you may also want to test on an iPad, iPhone, and Android. Between those three mobile devices, you’ll cover a huge majority of your smaller screen sizes.

For our restaurant site, I’d open up the same page on each browser, and fixing any issues that arise in all browswers before moving on to another page. I’d also go through the navigation in an intentional and systematic way. I find this is the best way to ensure you don’t miss any issues.

4. Installing Analytics: Analytics will help you track how many people see your website, and how effective your website is at accomplishing various goals. I’d recommend Google Analytics, a free analytics tool powered by Google. It is very powerful, incredibly easy to setup, and offers all the tools you need to analyze the effectiveness of your site. Google Analytics, as most other analytics tools, require a small amount of javascript code on every page. Add the code to your template files before you publish so that you’ll be good to go when people start accessing your site.

5. Publishing Your Website: Now that you are sure your website is ready for public view, it is time to upload it! If you are using a CMS (such as WordPress), then publishing is easy. If you aren’t using a CMS, then you need some way of putting your new website files onto your server. I use Filezilla for Mac, an excellent FTP client, but there are a ton of good FTP programs out there. With your setup hosting, you should have received FTP credentials. Add them into your FTP software to access your server, and then drag and drop your files in. That’s it!

6. A/B Testing, Data Analysis, and Site Optimization: After setting up analytics and publishing your site, the job isn’t quite done! Now you’ve got to analyze any data that is coming in, and spend a little time optimizing language to increase various conversions and actions on your site. You might want to verify that certain language is getting across your message or bringing people to a different page. I’ve used various A/B testing services, but currently, I’m hooked on Optimizely. This service is not free, but there are free ones out there.

For our restaurant site, there may not be a ton of A/B testing to do, but I would definitely want to see if users were visiting the site, how much time they were spending on it, what content they mostly wanted to read, etc. You can learn what keywords are bringing users in, which can lead to good marketing tools down the line.

That brings us to the end of this three part tutorial on making an entire website, from start to finish. We talked about the beginning stages of branding, planning, and designing, to the middle stages of development preparation, to the final stages of development, publishing, and analysis. I hope it helps you understand how a website comes together, and all the things that you should consider when working on a project the whole way through. If you have questions or comments, obviously, feel free to share or contact me directly. Best of luck on your website projects!

Making A Website From Start To Finish – Introduction

I’m a self-taught web designer. I have learned almost exclusively from online tutorials, like the ones that I’ve written in the past. When there is a question I have, I Google it. There is a lot I was forced to learn from various projects I was working on, and a lot I chose to learn through my own inquisitive nature. But the one thing that I was never able to read about, was how it all came together. I never really had a good place to go to that helped me figure out if I had covered all my bases for an individual website project. I figured it might be helpful to write up a blog post (or multiple, because this is just way too long for one post) that explained the process of making a website from start to finish. At the end of this series, I’ve made a downloadable checklist to help ensure that for each website project you are working on, you’ve handled each item that needs to get done.

In Part 1, I’ll go over the initial phase of a website. I toyed with calling it ideation stage, the design stage, or the setup stage, but in reality, it covered a lot of different issues, and it just wasn’t fair to do that. Here’s what we’ll cover in Part 1:

  • Competitive Analysis
  • Hosting and Domain Name Setup
  • Color Palette Creation
  • Branding (Logos and Icons)
  • Developing a Site Architecture
  • Initial Designs

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your non WordPress.com hosted website. Here’s the list:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

In Part 3, I’ll go over the actual development of the website and optimization of the website. Yes, that is a two parter! You can’t just make the website, you’ve got to follow up and make sure that what you made is working effectively.

  • Database Design and Creation
  • Site Development
  • Cross Browser Testing
  • Publishing Your Website
  • Installing Analytics
  • A/B Testing, Data Analysis, and Site Optimization

Some of those items have quite a bit of sub items, while others are very simple in nature. Head on over to Part 1 of making a website from start to finish to learn about the initial stages.

Google Analytics

Google Analytics is an amazing tool for web designers and web developers. There are really four different types of things you can do with Google Analytics, and I’m here to write about each one, and some of the benefits of them, as well as a few downsides.

1. Enhance your user experience: Google analytics has tools to track the types of users you are getting. You can look at their location (in the world), their computer specs (computer type, screen size, operating system, browser/version), their viewing trends (page views, bounce rates, time on the site), and much more.

So why is this helpful? It allows you to design your site around your users. You know what browsers and versions they are using, so you can decide how much time to spend cross browser testing. You know what screen sizes your users are using, so you can figure out how wide you want your designs to be. You can see when you launch major changes to your site what happens to your user trends (did it cause an increase or decrease in the positive experience of your users). But these are all very broad things, let’s get more specific.

2. Test and improve specific content: Google analytics takes the first benefit a step further by allowing you to look at most of the above data and more with specific pages and sections of your site. This will allow you to test out smaller changes to your site by looking at user trending and navigation on specific pages or new sections that you just launched or changed.

So why is this helpful? Imagine you just put up a new section of your site that is a little more alternative to the standard navigation you have throughout the rest of your site, or the design is a bit more energetic and you aren’t sure how it will be received. Now, say a week after your launch, you can go back and see how your users interacted with the new section. You can see where they came from in the site to get there, what they did there, when they left, and where they left to go to. You can compare the visitor trends with the overall site averages and get a feel for whether the new design and/or navigation is an improvement to your site, or a detriment. It can then guide future changes to that section, or even the rest of your site!

3. Pimp out your SEO efforts: With the “sources” section of Google Analytics, you can track where your users are coming from, and how they are finding you. You can see how many users are coming in directly (typing in your web address or using a bookmark), through referring sites (external links), or through search engines. Then you can look at keywords that people used to land on specific pages within your site, or the site in general.

So why is this helpful? If you have been trying to up your SEO, then you can see how often people are linking to you (based on the rate of referring sites) and how effective you are at certain keyword searches that you are trying to optimize for. Knowing what people already land on your for and teach you what your site is doing well, and help you decide what other keywords you might want to focus more on.

4. Make some moolah: Lastly, Google Analytics allows you to track sales and other goals within your site. If you have specific items you are trying to sell, you can put in a specific goal that tracks it. Then you can see the paths those users took to get to that sale and optimize for it even more. To be honest, I haven’t focused on these tools much myself. For my own website, I don’t have much of a need for it with all the other customization options. For my work at my fulltime employer, though we do have sales, I tend to focus more on the user experience considering that is where my background is, and my boss looks at everything, including the sales “goals” and “ecommerce” options.

All of these sections have some additional benefits that Google Analytics is still testing out, in particular the “advanced segments” tool. This tool allows you to set up segments of your visitors or your site so that you can get even more detailed with your website’s statistics. Say you have too main sections of your site, and though they sometimes cross over with users, they are often relatively separate. You might want to see just what one half of the users are doing, as compared to the other half, because they really represent two completely different user bases. Again, it allows for even more customization to your user. There are some downsides to this tool though. In particular, you can create segments, but you can’t share them with co-workers that might be on the same analytics account, they are only available to you. I already emailed Google months ago and complained about this, but they are slow to respond to that kind of stuff. I think sometimes they pretend to be all focused on usability, but in reality, they lose that focus too often…

One more downside to Google Analytics is the slight inaccuracy of information. Data is never 100% accurate or reliable. This is a problem with really small sites where small differences can really cause issues with the data (because of low statistical power). Still, take everything you see with a grain of salt, but also put some trust in it. If anything, it will lead you in specific directions for real user testing! Overall though, fantastic tool!

SEO Simplified

SEO or Search Engine Optimization is a very complex process. People make a living doing SEO work for other individuals. Entire companies exist that tout the best SEO practices. Well, for the simple minded, for the not so wealthy, and just for the interested, let’s break down what SEO really is and what simple steps you can take to help out your own site.

Okay, first a definition. Simply put, Search Engine Optimization is an attempt to get your website higher up on search results run by Google, Yahoo, et cetera. Why is this important? Don’t you want visitors!?! Search engines are the best marketing tool out there. You’ll never come close to getting more direct or referral traffic than search traffic to your website (unless you are as big as say facebook.com for example). Even the biggest of businesses such as Amazon.com still rely very heavily on search traffic. So how can you push yourself higher on those results?

Well, there are countless articles out there trying to tell you how to perform SEO. I’m not saying you should listen to me, in fact, I consider myself a novice when it comes to SEO, but I do have a few easy suggestions that just about anyone can do.

1. Make sure to set up a redirect between the www and non-www version of your website. Search engines see http://www.example.com as a different site than http://example.com. If you set up a permanent redirect, then search engines will bump you up higher, links to your site will be consistent. Here is a great tutorial on it.

2. Register with sites like dmoz and yahoo and zoominfo. These sites are essentially listings of websites and companies and people. Being listed on these helps show search engines that your website is essentially more reputable than websites not listed there. Yahoo costs money, but dmoz is free. Hurry up though, it can take months for them to get you on the list!

3. Write a BLOG!!! I know, ironic right? The reason that I started this blog in the first place was to drive more traffic to my site. Sites with blogs have tons more content, and because the content is constantly changing and updating, it is much more likely to pop up in search results. Even more than that, people might start bookmarking your blog posts on sites like del.icio.us and digg.com. Bookmarks on these sites can drive hundreds of visits in under an hour once they are posted. Also, when there are bookmarks to your site from these websites, search engines use that as another form of validation that your content is useful, just like being listed in those conglomerate sites mentioned above.

4. Get lots and lots of links to your site. The more links that exist on the web to your site, the better. Search engines see those links as even more validation for your content. Try establishing relationships with other businesses you work with on a regular basis and get them to link to your site in return for a link to theirs. Make a facebook page for the website with a link. Anything that will add more links to your site out there in the web is good!

5. Lots of content, that you update, with good header tags. Google is known to use the content of a website to determine what is on it. Go figure right? In the past, all search engines used the Meta Keyword and Description tags, but then people started stuffing their tags with thousands of unrelated words in hopes of landing on tons of search results. As a result Google, and many other search engines have followed suit, do not use them anymore. Stick to under a dozen keywords, and then just pay attention to your content. Having useful header tags (h1, h2, h3, etc), lots of good content, preferably that you update, and purposeful images will do wonders.

6. Check out Marketing Grader. This site will help you keep track of your progress. As with any of these tools, take it with a grain of salt, but so far, this is the best one I’ve found on the web. The same company previously ran Website Grader which was solely focused on SEO, and then they expanded that tool to including other marketing techniques like social media. They can offer some good ideas toward better SEO and marketing though, so check it out.

Screen Resolution: Size Matters

800×600 or 1024×768 or 1280×800 or 1280×1024? I could keep going, but that won’t do any of us much good. One of the first questions you should be asking yourself when you set out to design a website is what screen resolution are you shooting for? The easy answer as of December 6th, 2008 is 1024×768 (that is width by height for those who are confused).

However, it does get a bit more complicated than that. There are two things you should consider, your target audience, and your future website. Based on the age and demographics of your target audience, the distribution of screen resolutions will change. Young and hip audience? Targeting upper class users? Assume that a larger percentage of your audience will be using larger screens. As for your website, you may have a dire need to shoot for a larger screen size because you need the space. Or perhaps you think you can sacrifice screen size because you really don’t have much content and you’d rather accommodate everyone. These are all things you should think about.

However, the bottom line is, around 30-40% of your users (again, as of December 6, 2008) are using 1024×768. Another 30-40% will be using 1280×800 or 1280×1024. Those are your two to pick from, but again, unless you want to inconvenience 30% of your users, 1024×768 is your sweet spot. You’ll have about 5% of your users still with a 800×600, but honestly, they need to upgrade. By the time a group drops to around 5%, it is worse to inconvenience 95% of your users to help the other 5%. Lastly, whatever is remaining in your percentage will be even larger resolutions.

Keep in mind that these things change over time. Within a few years, 1024×768 will be outdated, and we’ll be shooting for 1280×1024 or something else. Always track your users. I highly advise using Google Analytics. This tool allows you to gather information on everything to enhance your user experience. There will be another post on this topic in the next few weeks.

Now, another quick lesson. With 1024 as your target width, you actually need to be designing for about 990px. At least, that’s what I’ve always shot for. This is to take into account a scroll bar when your content goes below the fold. Also realize that 768px is a huge overestimate. After you factor in a windows bar, browser title bar, menu bar, URL bar, bookmark bar, and tab bar you’ve lost anywhere between 100 and 200 pixels. I’ll be writing another post on wrapper divs and sticky footers to help center your content regardless of screen resolution, as well as a post on sticky footers, which will keep your footer at the bottom of the screen unless content pushes it down further.

Thanks for reading, stay tuned!