This list was originally gathered by Anthony Roffidal, our information architect and SEO specialist for instructing our internal team for launching new websites.

Step 1: General

  • Robots.txt
  • Adding Analytics tracking code
  • Implementing all tracking events on CTA and in nav (optional)
  • Url rewriting to strip off www
  • sitemap.xml
  • Crawl website to make sure no link is broken
  • minify css and js (optional)
  • Favicon
  • Htaccess speed tips
  • 404 (UX tips: search/ fix URL/ sitemap/ Homepage)
  • Accessibility check
  • SSL / https

Step 2: On page SEO

  • Meta title
  • Meta description and keywords
  • Canonical
  • Make sure there are no coding errors
  • Add microformat/ microdata
  • add alt text to images and links
  • respect the hierarchy of <h1> → <h6> and <strong>
  • Make sure no link is broken

Step 3: After launch

  • Ownership of both websites (www and non-www) on webmaster tools
  • select preferred domain on WT
  • Adding sitemap.xml to google, then select fetch as Google, submit to indexation.
  • Linking Analytics to WT
  • Enable Google search console
  • Enable All Analytics features
  • MOZ Campaign (optional)

This is a topic to start writing in series and we will do a brief introduction to name the most important steps toward designing a website.

Doing the process over and over for many years, my best products come to life when the stages of design where followed and there was time in between each iteration to sync in and reflect; with fine designed timelines and adding review stages in the design process, we have been able to cater the better outcome. In earlier years of my experience, I would jump across an idea to development – which may still happen for prototyping an idea; today I find it most practical to go through each step.

  1. Project Definition – Gathering the goal and what the project is going to deliver is key for any project. For website design, the requirements will touch various areas and different ways of shaping the solution which makes it critical to make a list of required deliverables. Defining a Minimum Viable Product (MVP) is a good practice to finalize this step. MVP means what does my project need to deliver to function at the minimum, what are the additions we can add to it?
  2. Project Timeline – With a deadline and start date as part of the project definition, it’s often best to design our timeline to allow iterations, reviews, and design with stakeholders. Rushing the design process is never a good idea and planning ahead can make your design project much more lasting!
  3. Creating a Design Board – Digital or on a real wall, it’s great to put up all the ideas and the design pieces as we gather them and create the first prototypes all the way through the final design. It makes sure we follow and keep improving, not going back or sideways! Starting prototypes may suggest various directions, but once the design direction is defined, it becomes harder and very costly to go back.
  4. Prototyping early – Again, it’s easier to prototype stuff and go through many ideas with rough lines and sketches. Once remaining pieces are assembled it becomes much harder to make abrupt moves or the changes become less viable on the count of our design decision-making process.
  5. Organizing Content – From copy, fonts, images, and graphics, it’s best to keep them all organized. Documents can be shared via sharing apps to keep the editing team and the designers and developers on the same page. Images and media files also are best to be kept with the source files within shared folders across the team. Keeping the files organized will save time and will also help to deliver the same organization through the project. For example, when all source images are available, a developer can run an automation script with photoshop to export all images at the resolution needed and rename them quickly. The marketing team can review the file names and make sure they have the right meta and so on.
  6. Low-Fidelity and High-Fed Design – Getting the final designs done with content, images and all key pages of a website in UI and UX design stage will help the development to go smooth and with little challenge. With responsive layouts also provided to developers, there are fewer assumptions and more predicted scenarios for each User Experience that needs to be achieved in our final web design.
  7. Website Structure – CMS or Just HTML is the question we often ask. If the content is going to be changed more than once every 3-6 months, then developing a CMS website can be advantageous. With the idea of keeping a fresh site and blogging, often CMS wins this, but there are still plenty of landing pages and one-off campaigns that don’t need a CMS.
  8. Website Coding – To deliver a website with custom design, handling html, css and javascript are needed to achieve the full results. Using page builders and template websites is also a way to get small projects up and running and there will be more automation and less need for coding all the pieces of front-end websites as we move forward with the evolution of web development technologies.
  9. Website Testing –  After completion of Frontend coding and backend integrations, the website is required to pass some web standard tests and compliance. There are stricter standards such as Web Accessibility becoming mandatory for the modern web that promotes equality of access to information.
  10. Website Launch – Website launch can go as expected with planning and organizing the process. See our website launch checklist for what we recommend to be done before each launch.

We’re excited to see the new promised updates from WordPress 5.0 and continue developing with this amazing Content Management System and Plugin. Thank you WordPress team for keeping up with your amazing work and allowing the community to grow faster with the ability of rapid development for amazing websites.

What’s new

The Gutenberg was the big promise that was released earlier and was published as the new default editor in 5.o with the message of Freedom to build and write. That pretty much describes it. WordPress had aimed to be a pioneer in blogging and publishing content and had supported writers and journalists with their free platform for years. The Open Source nature enabled the community of developers to shape many amazing extensions and front-end themes to take WordPress beyond a publishing tool. It’s now finally that WordPress is claiming the freedom of building as well as publishing with the new modular editor and ability to build blocks and layouts.

Note upon upgrading to WordPress 5.0, you’ll be faced with the New Editor and it may looks scary. If for any reason, you wanted the classic editor back, search for Classic Editor in the plugin library and bring it back.

 

 

 

I recently spent some time on our website readability. The goal was to find out what makes our content more readable and ultimately the overall delivery of our message through out text and visuals embedded in our website. I started searching and immediately found few impressively quick and simple techniques, I will share here.

CSS Checks and improvements:


-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;

Imagine what you could do with $10,000 USD of in-kind advertising every month from AdWords, an online advertising solution from Google

That’s what Google says on their Google Grant for non-profits page. They suggest that you could hire more volunteers, attract more donations and share your cause with the world.

 

Web development and Search Engine Marketing team-up for non-profits.

There are no doubts about how having a website can help non-profits organizations with their communications. Spreading the word, reaching potential partners and telling the story of those who are in need of help, whether it’s at home or abroad.

Over the course of the years, we’ve worked with several non-profits, all of which had a website and several communication channels like Social media — generally, twitter and Facebook, often Instagram. Very often these websites are informative, and even when they are well made, they could be improved in terms of SEO, online marketing, dashboards and automatization of processes. But this is where the cost explodes. Hiring an SEO team, developers to build complex applications to run events or manage volunteers, integrate with CRM, report data, advertise, adds up to amounts that are hard to allocate.

One of the ways to deal with these essential tools is to plan different development phases. The problem? Search Engine Marketing such as Adwords is generally at the last step.

Not with Google Grant for Nonprofits.

 

What is Google Grant for Non-profits?

In 2014 TechSoup and Google brought the program to Canada. Thanks to them, now Canadian registered charities, Canadian federal nonprofits, and Canadian provincial nonprofits can apply to get a $10,000 Adwords grant to spend every month, plus free tools and premium features for Youtube.

How google grant can help non profit in canada

Above all the excitement, this program has many advantages:

  1. It drives traffic to your organization’s website. A lot.
  2. More traffic means more donations. You can now build your organization faster than ever.
  3. By spreading the word, you have much more chances to get the interest of volunteers and sponsors.
  4. With the appropriate tools (like Google Analytics) you can track what are the best keywords for your organization and build a better Information architecture.
  5. It helps you cut in IT expenses.

Remember that the Grant doesn’t allow you to do exactly what you want in your Adwords account, there are some limitations. (source Google)

  • Your ads will be entirely text-based (no videos or images).
  • They’ll appear only on Google search results pages, in positions below the ads of paying advertisers.
  • All campaigns must be keyword-targeted.
  • Your maximum cost-per-click (CPC) will be $2.00 USD.
  • You’ll receive $10,000 USD (up to $40,000 USD for Grantspro participants) of in kind AdWords advertising each month.

 

What else is included in the grant?

youtube premium feature with google grant for non profit

On top of the Adwords grant, here is what you can get:

  • Free access to the Google suite (Gmail, Drive, Documents, Spreadsheets, Presentations, Surveys, Calendar and Sites)
  • Premium access to Youtube
  • Free license for Google Earth Pro

 

The conditions to be eligible to google Grants

Google specifies that all the grantees must meet certain criteria to qualify and keep that qualification active. See if you’re eligible by visiting Google eligibility page.

Once you know, you’ll need a TechSoup account. TechSoup is a program from the Centre for Social Innovation, a non-profit coworking space dedicated to helping people who change the world.

Here is how to register to TechSoup. Note that it generally takes around 7 to 10 days to be registered.

When you’re done, it’s time to apply to Google Grant.

 

Apply to Google Grant:

First, you’ll need to create or login to your Google account.

Then you need to certify that:

google grant member application certitifcation

Once that’s done, enter your TechSoup token:

techsoup token for google grant

Once you’re done, select your organization and complete your profile to finish your application.

 

You got the Grant, what now?

You’ve been approved, congrats! You now have to choose the right Ad Program. If you want to control all the aspect of the SEM campaign, choose AdWords. If not, pick AdWords Express.

Set up your account, start working on your campaigns and submit your account for review.

In case you need to learn how to use Google AdWords, here is what you need to know about online marketing:

 

 

A few things to keep in mind when setting up your Adwords campaign with Google Grant

Due to the nature of the Adwords account, you might have to set up things slightly differently.

  • Don’t submit your billing information
  • Don’t include the display network. Ads are text only.
  • The email you use has to be tied to your organization. Don’t use a personal email.
  • Follow Google’s recommendation. Apply. Wait. Get approved. Set up Adwords. Submit. Wait. Get approved.
  • Don’t give up! If nothing happens in weeks, email Google or re-submit your application.

Good luck!

If you have been coding the web for a while (like myself) you’ve probably come across the “lovely task” of how to maintain CSS without losing your sanity. Let’s be honest, even with the release of CSS3, the language evolved a lot and now we are capable of doing things that were only possible with javascript. CSS, at its core, still is a cascade stylesheet and this makes things a bit complicated when your project scales up and is maintained by a team of developers.

Animated meme gif of Family Guy. Comparing the complexity of CSS with closing a cheap blind
A meme is worth a thousand words

I am all about performance. If I can make something work faster, lighter, with fewer requests, I will. When it comes to CSS, I try to keep it tidy, organized and as small as possible. In this article, I will share my approach to achieving this task.

Methodology

First thing before you start writing any line of code. Pick a methodology. There are already a couple of approaches out there, all of them developed by very smart folks that faced this problem before us. If you don’t know what a methodology is about: they define a set of rules that give purpose to your CSS classes. In this way, you can categorize and divide (modules) code and reuse it as much as possible.

I will explain a bit one of the different approaches you can take. In this case, it will be SMACCS because it’s the one I use. However, you can also see BEM, Atomic, OOCSS. All of them are good.

SMACCS

Stands for scalable and modular architecture for CSS. In a nutshell, SMACSS defines 5 rules:

Base

This you can think of a CSS reset. All rules necessary to standardize your CSS project. No classes or IDs in this section.

body, form {
  margin: 0;
  padding: 0;
}
a {
  color: #039;
}

 

Layout

Set of rules to define your structure. These elements are meant to contain modules inside of it. They set boundaries to produce the layout. E.g: a page with a 2 column layout. Main content / sidebar

.container {
    width: 960px;
    margin: auto;
}
.article {
    width: 80%;
    float: left;
}
.sidebar {
  width: 20%;
  float: right;
}

 

Module

Elements that build your pages. Things, like carousels, hero images, buttons, etc. They sit inside layout and should be designed to be a standalone component.

.btn {
  background-color: purple;
  color: white;
  padding: 10px;
}

 

State

Pretty self-explicatory. This is rules that overwrite the default CSS applied to an element to apply a different state. This could be a navigation that is collapsed, a button that was clicked, a field with incorrect information, etc.

/* Following previous button example */
.is-active {
  background-color: gray;
}

 
The last rule would be Theme. However, this is something not too many projects share. I will recommend you to check SMACCS documentation (or book) if you are interested to know more the methodology.

I hope you can see the value of having a foundation and why is so important to start with it. Your project will get a structure that everyone in your team knows and can follow. This approach gives you scalability and organization.

Naming convention

After looking at something like SMACSS you are probably thinking: “well if I and my team are going to stick with a methodology we should probably call things the same way”. YES, you are absolutely correct. Naming conventions have been around since the beginning of computing science, they help teams to align things and reduces time on simple tasks like finding a class or file.

CSS is not the exception. You should be able to read anyone’s code and understand if it is a module or a layout (if you are using SMACSS) as well as if you need to create a new class, there are rules to make sure you follow the style guide. This is all really attached to code standards (that’s a topic of its own). But you get the idea… and please, let’s not fight about tabs vs spaces (I am a tabs guys … ? don’t tell anyone).

The previously mentioned methodologies define naming conventions as well and you can use them if you want. I will give you an example of what I normally do.

CSS

// Module
.nav { // Modules are always on word no hyphens 
  // ... code
}
.nav--large { // Submodules are at the same label. always use --
  // ... code
}
.nav__item { // Subcomponents of a module are always follow by __
  // ... code
}
.nav-is-fixed { // State indicates something that's toggled
  // ... code
}

 

HTML

<ul class="nav nav--large">
  <li class="nav__item"></li>
  <li class="nav__item"></li>
  <li class="nav__item"></li>
</ul>
<!-- then javascript kicks in and modifies nav -->
<ul class="nav nav--large nav-is-fixed">
<!-- ... code -->
</ul>

 
When a project gets setup using this kind of approach. The time invested in debugging is reduced considerably because you know where to find the code you are looking for, what does it do and how it’s called. This is a MUST for any mid-large scale project.

Preprocessors

I am sure you are familiar with these ones. However, it’s necessary to mention them. I don’t really know who writes “CSS” anymore. We all are lazy, let’s be honest. No one wants to write more lines of code… well, that’s exactly what our friends the preprocessors are here for.

They will help you to write less code, format it in a different way, implement some basic programming logic and then finally dump a CSS file that can be used by the browser. The most popular preprocessors are SASS, LESS, and Stylus. However, lately, SASS has taken most the market. So if you are not already using one and you are planing to do so… I would say, go for SASS.

I won’t explain how to use pre-processors because there’s ton of information about it. A good start point is the _documentation_ section for each one of them (good and straightforward) or you can read “An Introduction to CSS Pre-Processors: SASS, LESS and Stylus”. However, I will explain the parts I consider important for mid-large projects.

Variables

Being able to define variables in your CSS is the key. Large projects are probably going to have a design style guide defining primary colours, secondary colours, fonts, breakpoints, etc. This is the kind of things you want to store in variables and reuse it across your codebase.

//If we rebrand the project and in 2 years the primary color is red. We only need to change it in one place.
$color-primary = blue;

 

Imports

CSS codebase can get big. Break it down into different files that can be imported into a master file. That’s the one who will get compiled and dump the CSS for us. Base your files in your methodology. E.g: if you are using SMACSS, a file for base, layout, one per module, etc.

// Breakdown your codes into smaller files
@import "base";
@import "layout";
@import "module-01";
@import "module-02";

 

Functions (mixins)

the same way we use functions in any programming language to make units of code that can be reuse. Mixins provide a similar approach for CSS. You can do things like rounded borders, breakpoints, circular images, etc. There are tools with pre-defined commonly used mixins:

// Don't ever write media queries anymore. They are long an annoying.
@include breakpoint( $screen-mid ) { 
  // ... code
}

 

Preprocessors are wonderful and definitely make our life easier. However, they can be our worse enemy as well. While things might look really neat and simple in your .scss file. The final .css file might be a complete mess.

This tends to happen when we use nesting more than what we should. The code gets compressed and compiled and ends up being a massive line of repeated CSS selectors for only one rule.

Screenshot of developers tools showing excessive number of CSS selectors applying the same style. Consequence of using preprocessors in a bad way
To avoid deep nesting. Use a rule of thumb: no more than 3 levels deep.

In the second part of this series we will be discovering the other key elements for managing CSS in mid-large scale projects:

  • Javascript Task Managers
  • PostCSS
  • Testing
  • Libraries

Thanks for reading and happy coding.

Google Analytics have a special place in my heart because it has helped me recognize and fix my mistakes for many years. That’s why I make sure every website we launch is fully ready to collect data.

Unfortunately, not that many developers, web agencies or website owners place Analytics set-up on their priority when launching a website. And it’s completely fair, after all, they have so many things to worry about. The only problem is, after a few months when someone on their team (SEO, CRO, Marketing, dev, business and so on) want to check the data, they realize that they all that time the website didn’t track goals, events, search… sometimes they don’t even have any Google Analytics at all.

Months of data lost.

So I thought that if we could make a simple step by step checklist detailed enough we could help web workers make sure that each and every website collects the data they need.

The Timeless Google Analytics Checklist

  1. First of all, make sure the tracking Code is set properly.
    If you want, you can simply set up a new Google Analytics account, and paste the tracking code in your header or footer. The script looks like this:Google Analytics tracking code

    If you need more information on setting up the tracking code click here.

  2. Include the tracking code in every page: stand-alone pages, different templates, forms, anything that doesn’t use the header or footer where the main tracking code is.
  3. Subdomain and cross-domain. If you use sub-domains or multiple domains you can easily track them with Google Analytics in the same property. Find out how to configure Google Analytics for subdomains and cross-domains.
  4. Create a second view or profile. Google Analytics collects data for each profile/view differently. So if you make a mistake in your settings, you might lose data. Always keep a default view with everything, just in case. It’s like working in a lab and keeping a control sample. To create a new view simply go to Admin > View > Add new view. We will assume from here that all the changes you’re making are in the newly created view.add a view in google Analytics
  5. Exclude your IP from the tracking. You don’t want your data to interfere with the real visitors data. Here is how to do it.
  6. Sync Google Seach Console with Google Analytics. Somewhat easy. The idea is to make sure that you can get all the data from Google Search Console transferred to your Analytics account. You will then get access to some very useful features:google analytics search consoleYou can learn more about linking Search Console to your GA if you’re not sure how it works.
  7. Link Adwords and Analytics if you have any Adwords campaign running or plan to run any. Here is how to do it.
  8. Enable Demographics if you’re interested in Audience data. If your website has enough traffic, it could be quite useful. Just remember that the data is not very accurate since it’s based on the user’s browser history and social media profiles (like Google Plus). Also, visitors under 18 are not represented, they are mixed with the rest. But it can still be a great way to A/B test, segmentation, and remarketing. Read more here.
  9. Enable Site Search. If you have a Search field anywhere on your website, enable site search. Go to Admin > View Settings > Enable Site Search and specify what are the parameters.Google Analytics enable search settingsThe parameter, or query, depends completely on your search system. If you pass the query in the URL like this “mysite.com/search.php?q=keyword” then you can simply specify the q as the parameter. If you use a plugin, for example, you can use a custom javascript code to make sure the parameter is passed to Google like this:

    Custom javascript code for site parameter Google Analytics

  10. Enable Benchmark. This is another underestimated feature in Google Analytics. Basically, you agree to anonymously share your data with your Industry, and in return, you can compare your results with them. Pretty cool eh? here is how to do it.
  11. Speed sample. If you don’t change that value, GA will test the speed of your site once every blue moon. If your traffic is high it’s OK, but if your traffic is under 100 visits/day, you might want to collect more samples. For this you must change your tracking code to this:site sample rate Google Analytics
  12. E-Commerce Tracking (if relevant). There is so much to say about tracking E-com with Analytics that I recommend you read this great article by SEMRush about it.
  13. If you’re like me, you’ll want to set up Goals to try and put a number on your actual goals. It could be every time a visitor subscribe to your service, clicks on your phone number, or buy a product. Goals are powerful and are based on two different tracking systems.
    • Destination page: Ideal with conversion funnels for E-commerce (e.g. cart > checkout > thank you).
    • Event-based: A user clicked on the Call Us Button. More common but requires setting up Events.
  14. Event Tracking. Time-consuming and sometimes tedious but oh! so powerful. You can track any interaction a user has with your website. Probably requires some javascript knowledge. here is a complete guide to Event tracking in GA.
  15. Marketing Campaigns. Even if your campaign provider tracks data, you want to make sure you have your own website tracking system. Basically, you create a link that contains data for a specific campaign and everytime user use that link to go to your website they will fall under the campaign name in Google Analytics. You will need Google URL Builder to build your campaigns URL.
  16. Filter Spammers to keep your data as clean as possible (hint:it will never be 100% accurate). We follow this very useful article to filter spam.
  17. Weather Conditions. What? Well, this one is for fun. But it could actually be helpful. With GA you can tell what’s your website’s conversion rate based on day and time, source and location. That’s great, but maybe you should add the weather to it. What if a rainy day happens to have twice as many conversions? Here is how to do it.
  18. Update your Privacy Policy depending on your country’s regulations to make sure your users know how much data you’re collecting and for what purposes.

I hope you enjoyed that Google Analytics Checklist and that it will help you collect useful data to make your website even better!

If I missed anything don’t hesitate to contact me at anthony(at)noblepixels.ca to let me know.

As a web developer and an SEO specialist at the same time I find myself conflicted many times between both hats. As a web developer I care about clean code and easy ways to create new content, and as an SEO guy, I’m obsessed with the way Google indexes my website, internal linking, breadcrumbs and alt texts.

When I’m wearing the SEO hat, I’m the annoying guy asking my fellow developers if they followed all the SEO rules I gave them.

And since I too am a developer, I know they’re going to lie when they answer “yes of course”.

 

The 10 SEO mistakes web devs make

10. Alt tags and Titles

When one codes, it’s very easy to not fill in Alt texts for images and Title texts for links. Because sometimes we simply don’t know what they are. Ideally, they should be filled by an SEO specialist or a Digital Marketing guru. But they don’t have access to the code, or limited access to these fields in a CMS. That’s why web devs should always spend a second to wonder what the image or the link is about and write it in the appropriate location.

9. Rich Snippets and Structured Data

Rich snippets and structured data, AKA schema.org and microdata were launched in 2009 by Google and then 2011 by most Search Engines to improve the quality of the web. The idea is to tell Search Engines what’s in the content. For example, if we’re talking about a blog post, we should add a bunch of blog related microdata tags to our code. Here is a pretty good introduction to snippets and structured data and here is a review microdata generator .

8. Link Anchors

Click here and read more are not the best in terms or User Experience, and they’re definitely not the best for SEO! The anchor text of links tells Google (and your visitors) what the destination page is about. So when your anchor says “click here” no one really knows what’s going to happen. Link Anchors have a real importance in SEO and you should fill them with what the page is about (like I did in the present article).

7. Missing Meta (social media, languages,etc..)

Metas are not just for jquery and CSS. they contain a lot of information for bots to understand the website. Yes, the site works without them, but it’s also true that not optimizing them is a good way to miss opportunities in terms of Social Media and Search Engine presence. What you can do if you don’t know where is to start is wonder about what bots you care about, and what do they need. Facebook? Google? they all have different recommendations.

In any case, make sure your description is focused on your keyword AND the content of the page. You might also need robots and canonical to avoid duplicate content, title for SEO, language for SEO and accessibility, etc…

6. Pagination and Pages Variations

Pagination and Variation pages are bad for SEO since they basically have the same URL and the same meta for different content. They all cannibalize the same keyword. There are mainly two ways of dealing with this problem.

First Option: Embrace the difference. Make sure every page has different names and meta, basically, make them unique.

Option Two: Tell Google it’s page two or variation three or whatever the difference is. Use <canonical> to indicate what’s the main page (the first one) and pagination markup like <rel=”prev”> and <rel=”next”>. You can also add a “nofollow” to the link pointing to the next page and a “noindex” to the actual page.

Here is a great article about Pagination and SEO.

5. Duplicate Content

It’s not always on purpose but sometimes we just copy past content from a page to another, or we create a PHP script that generates a bunch of pages using the sane variable. Well, that’s duplicate content, and it is to be avoided at all cost.

You can read our article about how to fix keyword cannibalism to help you fix all these common content issues.

4. Don’t care about URLs

There are many articles about how to construct URLs for SEO. Basically, they should be as simple as possible, and contain only words and dashes that tell users and bots what the page is about. I know URLs are convenient for passing an incredibly long list of variables and characters but if you can, please avoid it.

3. Use the wrong HTML tag

If you want something bold for design purposes, use a class, not the <strong>. Strong means it’s important. Sometimes we use HTML tags instead of classes because it’s faster. But bots and search engines use these tags to understand what matters and what doesn’t. <Strong> and <em> are actually important for SEO, the same way paragraph, section, aside, and other tags are important. Try to make sense, it will pay off.

2. Use Headings for style

Have you ever done that? Use H1 for every sub-title on a page? After all, they are titles and they have the same CSS style.

Bad idea.

Search Engines and bots use headings to understand the hierarchy of your content. If everything that you want big is a H1, then what do you have for h2 or h3? Even rankings don’t really use these anymore, it makes a lot of sense.

1. Robots and Sitemaps

Sometimes we forget. And Google indexes everything. And then when your SEO guy comes in and does “site:yoursite.com” in Google they find out that your development folder at the root of your website is nicely indexed with all of its content. Don’t laugh, it happens. And the problem is that it will take weeks, or months to fix it.

First, make sure you have a robots.txt file that excludes everything not public. Dev folders, sources, anything not public.

Then create a sitemap (if you’re on WordPress you can install Yoast SEO and it will do it for you). Once the sitemap is created, look at it! Make sure every page in there is useful and relevant.

Hint: the “hello world” post is not.

When you’re done, send it to Google and pray.

Google in 2005Since I started making websites back in 2005 I’ve always cared in Information Architecture. Only at that time I didn’t know it was called Information Architecture.

To me it was a way to deliver content in a better way. I knew that my websites were small and not perfect, I didn’t know much about SEO but I knew I would offer the best User Experience possible!

At that time, websites were not responsive, well coded or well designed. They were not optimized for Search Engines, or social media. Nothing was made easy and networks were still very slow. One click away was sometimes a click too far.

In 2009 I started building E-commerce websites. The way I was working back then surprises me a lot today since I didn’t really use data to back up my wireframes, I didn’t do user flow (at least on paper) and almost ignored Google Analytics. My main focus was SEO. Because at that time in France E-commerce was booming and it was only a matter of time before the market would be crowded and impenetrable.

For years a few of these websites were growing fast and we called it “success“.

When SEO hits a wall, time to do Information Architecture?

Because SEO was so important we based the whole architecture on it. For a few years, it was one keyword per page, and location searches were not based on user history or geolocation. That means most websites had a page for each service, per location, one page per product, two if we had different variations, etc… that participated, in my opinion, in the origin of the mega menu era. You remember these giants navs with hundreds of items? Same with the footers?

We SEO specialists realized that the more pages, the more links, the best ranking.

And then SEO evolved to become more natural, mobile started limiting UI and changing UX, competition skyrocketed… it was time to start doing real Information Architecture.

What is Information Architecture?

website Information ArchitectureInformation Architecture is the art of arranging content in a website, ideally to make it easy to access to its visitors. Being an Information Architect is like being Rupert Giles in Buffy but less cool (cause he’s really cool). The reason I make this parallel is because the Information Architect’s role is similar to a librarian role. You have tons and tons of content and you need to figure a system so users can find what they’re looking for.

Following other’s rule used to be good enough. Nowadays, we know that the User Experience is one of the key elements in the success of a website. And even though I thought I was really good at it, I had to learn a bunch of tricks.

 

Use data!

Personally, I work on website’s Information Architecture when the client asks for a redesign of an existing website. That means data, lots of data! You might have access to years of users data thanks to Google Analytics. And even though Demographics was probably not enabled, you still have landing pages, pages visited, bounce rate, sources, etc…

Draw the map of the most visited pages and I try to detect patterns. Sometimes it depends on the season, sometimes on the source of traffic, but make sure to determine these patterns, they will influence the future IA.

For example, when I worked on MusicFest Information Architecture I quickly realized that there were three different seasons: Before the festival, during the festival, and after the festival. During these periods users would visit some pages repeatedly and in great numbers, and ignore other content. I created a website architecture that would adapt to each season by offering quick access to these important seasonal pages. On the example below the festival just ended:

Information architecture example

In the example above, you can see that information is separated in 5 sections:

  • Social Media quick access
  • Volunteer/sponsors/login/contact, anything that is NOT public information is there
  • The main nav which focuses on user needs: The current festival / General info about MusicFest / The main bands playing and how to audition for them
  • A quick view of the current festival place and date with either links or a message based on the time of the year
  • a quick access to festival auditions and results, which are in high demand after the festival is done.

It is also made to serve different types of users, with completely different needs but sharing the same screen.

If you take a look at the previous site, you can see that it was doing a similar approach but the same information could be in many different places making it hard to actually know where we are at any point during the visit.

Old information architecture

 

Homepage is not always the landing page

I remember in a previous job hearing a UX consultant showing the new wireframes of the new website. It was a giant arrow going from homepage to product page, from general to specific.

I asked him what happens when users land on another page. People looked at me as if this was a detail without importance that we can deal with later… but our website Analytics said that the homepage was a landing page only 40% of the time. Not even majority.

The morale of this story is that any content should be accessible from anywhere (not necessarily in one click). It should be clear on every page where the user is, what’s above and what’s below in the website’s hierarchy. That way a user can jump from one section to another without losing itself.

Breadcrumbs, for example, are a very simple way to achieve that.

 

Just like EA, Challenge everything

If you are a web developer or a web designer trying to know how to integrate Information Architecture in your day to day life designing or coding, my only advice would be to challenge everything.

Treat everything as an object: a link, a button, an image, a video, a paragraph, a page, a border-top, a title, etc…

Why would you do that you ask? Because if it’s an object you can see it differently and start challenging the necessity of its existence. What does it do? Does it bring anything to the user? Could we improve that object? Change its location? Its action?

At the end, you should have a custom Architecture that will lead to a custom UX built for your users. It’s the best solution you could offer your visitors, and they will thank you for it.

 

Resources

I recommend to every web designer, web developer and anyone interested in Information Architecture for websites to read the articles below.

http://conversionxl.com/website-information-architecture-optimal-user-experience/

The Ultimate Guide to Information Architecture