Articles about Development

Our best Web Development recruiting advice

Posted on June 23, 2019May 4, 2021 by Majid

Many businesses need expert support to be available to them and many talents are entering the market and wondering where the jobs are?

So really where are the jobs and where are the talents?

To answer this, I studied our cases from the team and our collective experience of the Web Development jobs matchmaking world.

Clients are looking for reliable Talents.

Yes, the answer is that easy and that complicated. Everyone thinks they are reliable and many people are willing to go a few steps beyond to prove that. But how one stands out from the competition depends on their professional and ethical grade as seen in the industry and their attention to details for delivering on this promise.

A Reliable Web Developer Means:

They know what they know and what they don’t. Being good at something in this time and especially with technology knowledge requires focus and specializing. Learning all the names of technologies is a good start, but a long way to learning the depth of each and becoming an expert on that matter. They are different learning curves during the learning stages, which by real-life project practice, can be shortened as we apply our learnings along the way.
They can estimate reasonably for the work they are planning to deliver. Estimation comes from experience and also organizational skills. People who track their time and efforts proactively are more likely to gain the skill and be able to estimate more accurately. Each project workflow and events can be studied and used to establish a better project plan next time a similar project is approached.
Personal Organizational Skills. They are key for high achievers in this field. There are a number of ways for approaching each project and repeatedly we’ve seen most efficient projects are developed when a detailed plan is staged and executed up front. Today’s agile development allows us to build in stacks, modules, and layers of code are written once and used many times. An organized developer knows many recipes of recursive projects and has a good idea on how to approach new challenges.
Delivering results: Although estimation isn’t easy and there can always be changes in the scope of projects during the course of development. A good developer should be reasonably accountable for standing by the product they develop considering for best coding practices, the security of the data operations, and code documentation for future developments, along the lines toward finishing the project and delivering the result on time and with the agreed features.
Not Forfeiting projects without a replacing solution: This is a lesson to really listen to. There may be times when a person is not able to continue on a project and with proper planning, a replacement can be configured. Especially in the freelancing world, at times the cost of finishing a challenging project may become more than taking on a new job! It’s really important that one takes their jobs seriously and commit to the responsibility they accepted and critical for developing their long term professional image and also to learn how to deal with difficult situations. Good developers always document their work to make sure the next developers can undertake their work, in case they dropped dead the next day, the project will not die or need to start from the beginning!
Sense of Humor: It’s true, without it, it might be hard to work with one in a highly mentally engaging work. It’s great when people know how to turn a tough problem-solving the situation to a fun challenge and help others through making a great team vibe.
Plays ping-pong or a Music Instrument, or both We know most of our developer friends that are musicians or love their table tennis to zone out. It’s not scientific, but we think it does help! If you’ve tried developing and yet not paying the pong or a musical instrument, please take this one advice! Picking up a musical instrument requires dedication, but giving it a year or two and you will be grateful to your decision for the rest of your life. Ping pong is fun too and helps with problem-solving, especially when two developers take it out to the table and solve it there together (most recommended).
Love learning every day. This one is too general. We all love learning as human and our brain is a sucker for new information. It’s important to recognize our talents and find where our curiosity is most driven toward by nature. If that is to get geeky and learn how things work, coding may be a good place for one with infinite problems to solve and have many new things to learn each day.

Where to find good web development jobs?

As a person who has done many years of freelancing, as well as responsible for hiring freelancers and employees, here are my top recommended places to approach web development jobs.

Google Job Search: Very quickly, the Google job search is becoming one of the only places we need to search for jobs. With Google using structured data formats, its crawlers go through all web portals and collect the latest jobs. That makes Google amazing for the massive data points it collects and the filters it provides to narrow down your search.

Google Job Search - Web Developer Jobs in Vancouver — Google Job Search – Web Developer Jobs in Vancouver

LinkedIn: LinkedIn is the ultimate job searching guide for finding many corporate and agency opening positions. Following people and companies can make the job search much easier.
Craigslist and Kijii: It’s true, these listing websites are still very popular for many small gigs and sometimes for companies exploring these portals for the same purpose. Although checking Craigslist and Kijiji on daily basis can be a daunting task. Many gurus in this field set up programs to be notified anytime a new job is posted in their area. The automation can be smart and find one many job with reduced efforts of searching and getting more matches.
Freelancing Websites: There are a dozen of websites that are common amongst employers and freelancing staff around the world. With the crowd-sourcing becoming a major method of reduced employment cost, this can be a way of getting jobs but requires specializing and building a strong portfolio and reputation in each job market. Also with different wage ranges in different cities, this competition can become quite hard for people living in expensive cities and expecting higher earnings.

Last but not least, I’ll share my perspective on how to search and find the right talent for your project and team.

An open, happy and collaborative environment, the pong-game, the social days and the freedom of working away from the office has become part of the culture.

How and Where to find reliable Web Developers?

Local or Global: That’s a key question to ask before posting a job and perhaps when writing the job description. Whether if the job can be done remotely or is done through in-house team collaborations. Online jobs have a
Networks: Spreading out the words through networks help enriching the networking bonds. Especially when we are part of a network that we believe in their mission, there’s a high chance to meet people with similar motives and aspirations. That’s only a place to start and get results, but certainly not to disregard the high chances that are many people outside our network capable and well deserving of the jobs.
LinkedIn, as mentioned above, most candidates ready for serious jobs have made their LinkedIn profiles and displayed their projects and portfolio. As an industry standard, LinkedIn is a great place to navigate the search and review the Candidates experience that’s public and relied on by many professionals.
Post a Job in your industry job portal. A well-written job post can help to get the attention of the right candidate, that is waiting to hear from its long term employer. The job post is the first act toward building this relationship with a reliable cornerstone. The job post is also often used to remind the team about the job responsibilities that they have accepted to apply and undertake.
Schools and Universities Portals. Recent graduates are among the best places to search for recent graduates ready to take on the biggest challenges and help you change the world! The newer generations perspectives for an ideal job is different and need to be considered for attracting highly motivated Candidates. For a work that’s highly depending on brain productivity, an open, happy and collaborative environment, the pong-game, the social days and the freedom of working away from the office has become part of the culture of making happier and productive teams in the digital market.

In the next Web Development Career post, we will review to the development skillsets required for acing today’s development jobs in the market and how to meet these requirements and stand above the competition.

Nonprofit Web Development Projects

Posted on February 2, 2019May 4, 2021 by Majid

We have been working with nonprofits since the early days at Noble Pixels and we have come a long way. We are pleased to have the support of some of the most amazing nonprofits and our ability to continually serve them with our best skills and experiences.

Many nonprofits follow their amazing journies without a digital marketing team onboard that is understandable for nature and resources a nonprofit has to sustain its commitment. However, the lack of experienced digital marketing and development staff will often result in affecting a gap in technology and underutilizing this needed area of marketing.

We are offering consulting services and within the first hour of the call, we are examining the technology surface of a nonprofit organization and followup with our study, research and the gaps we discovered.

Our team is available to support various types of design, development and internet marketing projects. Within the nonprofit projects, we have worked on

Donation Forms Design and Development
Donation Backend System Design and Development
Email Marketing Campaign Development and Execution
Lead Nurture Flow and Drip-Program setup
Impact Measurement and reports

PHP 5.6 End of Life December 2018

Posted on November 30, 2018May 4, 2021 by Majid

You’ve heard the news about PHP 5.6 Depreciation and you’re wondering if you need to update your website or app PHP version to latest version PHP 7.2. The biggest question is do we need to go forward with this update and how much time we have before anything collapses?

The short answers are Yes for the need to update and it’s hard to know for how long. The timeline on PHP website shows End of 2018 as support for PHP 5.6. PHP and states as

End of Life: A release that is no longer supported. Users of this release should upgrade as soon as possible, as they may be exposed to unpatched security vulnerabilities. (From php.net).

The process is easier around CMS websites as the common ones such as WordPress or Joomla and the plugin developers for each would have adopted their codes and you may expect to update the PHP version on your hosting without any impact on the website. Still we recommend enough testing to be done before switching your production sites.

For custom php apps, there needs to be more consideration and testing throughout the project ensuring all functions are compliant with the updated php version.

Where to Start?

Start with contacting your hosting company. If they provide you with a staging environment, you may test this on your staging first and after a good round of testing and not seeing any issues, you could ask the hosting support to update your PHP version. If you have access to cPanel, you may be able find the php version and update it yourself for each account or environment.

Is there any risk on updating PHP Version?

Not really, except your site might go down momentarily with any possible issues, until you could revert back to previous php version. But you could switch back and forth fairly quick.

What is the worst case scenario?

Worst cases are when a function in php is not compliant and breaks your pages on frontend, or worst when it doesn’t appear on frontend, but breaks your data processing and CRUD functionalities.

How to deal with the issues?

If the hosting support cannot quickly identify the issue and update, it’d be best to revert the site back to previous php version and call your developers to work on these updates.

To ensure you don’t deal with any server security issues in your codebase, start testing early and adopt to the updates that will be less costly than dealing with consequences later.

Our website is hosted by the amazing WPEngine team. With their solid backend with multiple staging and development environments and quick backup and reverting options, there’s always little to worry in case anything goes wrong. For the PHP upgrades, they provided lots of heads up notices and an awesome little feature on the dashboard to preview each site with PHP 7.2 for easy testing.

Modular CSS: Best practices to improve your coding workflow

Posted on November 27, 2016May 4, 2021 by Majid

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 Checklist For website launch.

Posted on September 22, 2016May 4, 2021 by Anthony Roffidal

Google Analytics has 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 as 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 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

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:

If you need more information on setting up the tracking code click here.
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.
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.
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.
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.
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:
Link Adwords and Analytics if you have an Adwords campaign running or plan to run any. Here is how to do it.
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.
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.The 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:
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.
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:
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.
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 subscribes 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.
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.
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 every time users 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 campaign’s URL.
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.
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.
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.

Website redesign: Improve your website without losing any traffic

Posted on August 31, 2016January 4, 2021 by Anthony Roffidal

Interestingly enough, many web development companies don’t differentiate website redesign from building a new website from scratch.

Well, it is different, and for many business owners and managers, it’s one of the biggest decision they’ll make in years.

Should I revamp my website completely since I know it is a bit dated?
What if I lose my rankings? Or my clients don’t like the new design?
Maybe I can improve some sections first and finish later?
How long does it take? What’s the process?
How much does it cost?
Which web development company should I ask?

The Right Time to Get a Website Redesign?

website redesign process Depending on how long you’ve had your website for, it might be the right time to do a redesign.

Generally, these occur every 1 to 3 years. One year being the minimum for users and search engine not to get too confused with changing User Interface and Information Architecture. Three years being the limit for technology to still offer a valuable User Experience.

To know if it’s the right time you need to ask yourself this: “Can my website do everything I need?”

Can my website offer a good experience on mobile?
Can it be understood immediately by users?
Can it get better rankings in its current state?
Can it be maintained easily?

Be honest with your answers and you’ll know if you need a better solution.

Small changes or Full Website Redesign?

If you ask a professional about whether you should keep your old system and put bandaids or get a new one, chances are you’ll get told: “It will cost you just a little bit more to get a whole new system, and it will last you much longer”.

Sometimes you could get away with a temporary solution but eventually, you’ll need a full redesign.

In fact getting a new system allows you to:

Clean up everything and start fresh.
Improve what wasn’t working and keep what works.
Enjoy the latest technologies.
Get a system that will last years.
Sleep better at night knowing that your website is as good as it could get.

The best way to know is to ask a competent web development studio for advice.

Website Redesign Project Plan

Website redesign project plan Every system has its own rules, but here is the approach we commonly use.

First, list all the limitations of your current website.

You probably have already an idea of what’s wrong with your website but it’s always good to get external opinions as well.

The best way is to ask your clients for feedback since they are the users you care about. Try to offer them sales or perks to get more feedback.

You can also use anonymous opinions from online services like five seconds tests where users have five seconds to look at a design before they answer your questions.

Finally, ask your web development company to tell you what could be improved.

And remember to take every opinion with a grain of salt because ultimately, it’s your website.

Second, keep what works well!

The greatest fear of most website owners is to lose something during a website redesign. And it’s a fair concern. Does the web designer know about that little thing that your users love? Does the project manager know your conversion rate? do they understand your story? So many things to save from the redesign.

While you ask for feedback, make sure you also collect information about what makes your site successful, and what your visitors like particularly.

Visitors feedback + Years of Analytics = good planning

Don’t forget about your Analytics. You probably have them on your current website and there is probably someone within your web team dying to use them (I’m that guy).

If the Analytics expert is professional enough, they’ll extract valuable data from your Google Analytics account. For example what pages are visited the most compared against the time of the year, the traffic source, the device used, the demographic, etc…

They can also tell how your CTAs are doing, how your conversion funnels can be improved, and whether or not a landing page is doing well. If you have more analytics, like let’s say, rankings and social media, it’s even better.

Website Redesign Process

website redesign process First step, get a kick-ass UX and an awesome Information Architecture!

Once you’re done with the list of what you want to keep and what to get rid off, your web team will start working on two fronts:

Information Architecture: The idea is to design a map of your new website. Ideally, it should not be too different from the old one, just improved. If a popular page use to take three clicks to reach, make it accessible from the nav directly, and maybe even the homepage.

Keep what works, remove what’s useless, and simplify the access to popular items and users will thank you.

UX design: Now is time for your web team to show their web design skills. We personally love UX, and we know how important it is. Years ago, webmasters use to think “do I need to put a button here? No, it’s Ok, the visitor can scroll down to the other one”. This time is over.

Study your competition to see what they do and grab some ideas from them. Then talk to your web designer to see if these are good ideas, and if they are, how to implement them.

Be original, but keep some ground rules. UX is mostly about making sure visitors can navigate and do what they have to do on your website without thinking about it. Once that goal is achieved, a nice design, something stylish or a really great tool will add some personal taste and an overall better experience.

Second step, ask your web developer to design the right technical solution.

Web Developers generally try to balance two aspects of web development. Use a technology they and their clients are comfortable with, and think long term. The first aspect is easy to figure, the second require way more thinking. Here are some challenges to address:

Make sure the overall solution can last as long as planned in the requirements (technology deprecation)
Keep it safe and secure for that period
Ensure the whole solutions can be passed without trouble to another web team
Plan a scalable solution to grow with the business
Make sure the site will be easy to maintain and update along the way

Once all of these challenges are addressed, it’s time to code.

Step Three, the development.

When we develop we like to involve our clients so they get the exact picture of how things are going. On the other hand, since our project are well planned and our clients trust us, there’s no need to over share updates. We focus on the goals and communicate every time we get close to a milestone.

When a client has questions, we answer them in a way they can understand, and encourage them to continue the conversation.

All this seems obvious, but so many web development company don’t offer a service like that. So make sure you get a team that cares about your project.

Website redesign: the Launch!

website redesign checklist

Before you get to celebrate, there is an important task to achieve. Launching the new website.

Tested and approved. You have access to the future website on a development server. Everything looks good. Has it been tested on all devices and browsers? Is the code clean and error-free? Is the new website optimized for Search Engines? Is Google Analytics properly tracking your CTAs and goals?

We’ve developed a complete checklist to help during launching. It covers the Search Engine aspect, the UX and the Google Analytics parts.

Take a look at our website launching checklist and make sure your website is ready to go live.

When your website is good to go, your web team will replace the old one with the new one in a quick and hopefully seamless process. Sometimes it takes a whole day or more to propagate and be ready, but in general, a few hours are enough.

Website Redesign Cost

website redesign cost Even if the difference between a full new website and a website redesign is quite significant, both should take pretty much the same amount of time.

For a website redesign, the risk of failing is even greater since there are many challenges to address, and only one chance to get it right. Your users will probably not forgive you if you replace your website with a less good one. Search Engines can penalize your new website if it doesn’t follow rules.

We recommend that every website redesign is done by a web team you trust.

Now in terms of cost, it’s similar to any investment, ask for a quote and make sure your ROI is worth it. Keep in mind that most web design companies charge between $80 and $150/hour.

In any case, make sure the website is made in-house, not outsourced to a careless company miles away. Even though outsourcing can save you some bucks, it’s not worth the risk.

Don’t lose any of your precious SEO Juice

During a website redesign, many pages are modified, added, or removed, it’s important to tell Search Engines what you’ve done with your content. That way, they can update the search results based on your new architecture.

redirection guide for website redesign

Make sure your SEO team doesn’t make too many redirections since redirections only redirect 70 to 80% of the SEO juice in average. In short, if you can keep the old URLs, keep them.

You can read more about Website redesign SEO, website redesign from an entrepreneur point of view or Contact us to get a quote.

Good luck with your website redesign!

The Limitations of Hosted E-commerce Platforms

Posted on August 31, 2016January 5, 2021 by Anthony Roffidal

Recently I was answering a question about the limitations of hosted e-commerce platforms and though I would share it here as well.

the limitations of hosted ecommerce platforms Hosted platforms are generally great for two scenarios:

1. Start a new online business

2. Sell niche products (for example on Etsy)

For these two cases, Hosted platforms offer a (pretty much) ready to use online shop with no need of a web developer, designer, and online marketing specialist. This will save you a lot of money.

For option #2, you might never need to leave hosted e-commerce, since their rate on transactions are not too bad and you don’t have to worry about anything except selling.

For option #1, you can use them to try your business plan, meet your audience, perfect your seller skills and get your logistic going. It’s a risk-free investment since most of the time you pay close to nothing on set-up and then pay a rate on each sale.

What are the limitations of hosted E-commerce platforms?

The limitations you’ll meet are mostly in terms of customization. These platforms have a limited space for growth. You won’t be able to:

Integrate most APIs, for example, connect with a POS system, or inventory systems
Design your own. Most of the time these hosted e-commerce platforms have tools and themes but if you need something really custom you’ll need help from a web designer and a web developer. And they’re going to tell you that they can’t work on this platform.
Do custom Sales and promotions. If you want to do buy one get two free in California, you might require custom development. And again, the platform won’t let you add custom code to their system.
Customize account pages/ payment pages/ Emails triggers, etc… Again, these platforms only offer a limited amount of customization, and these generally focus on the most common demands from shop owners. Being original is not really possible within these limitations.
Growth. At some point, you’ll be stuck and want to move to your own solution. Make sure you can export your catalog, orders, and client base when you do.

The top 10 SEO mistakes web developers make

Posted on August 23, 2016February 7, 2017 by Anthony Roffidal

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.

How fixing keyword cannibalism will improve your website’s ranking

Posted on August 23, 2016August 31, 2016 by Anthony Roffidal

After a few years of working in various areas of web development, SEO and web design, there is one thing I’ve heard a lot:
cannibalism.

Even though I’m sure people love to talk about ethnology; in most cases, I was listening to classic SEO language, whether it is to make one’s look brighter, or to actually do something about it.

What is keyword cannibalism?

Keyword cannibalism happens when your website has more than 1 page targeting the same keyword. While actually not leading to any penalty, it doesn’t help your rankings. In fact, fixing it could have a great impact on your rankings since you would help Search Engines understand your site better.

Example 1: Stuffing

Your website is trying to rank for the keyword “fur coats“.

So you’ve added it to every page, in the content, and also in the meta and the name of the pages.

The consequence: Search Engines don’t know which page does what since they are all sharing the same “focused keyword”.

Example 2: Conversion and SEO conflict

You’ve been careful not to stuff your meta Titles and tried to have different content on every page.

Your website has a service page named “eco friendly fur coats“.

It also has a blog post that explain how eco-friendly the coats are. Even though the content is different, the URLs and page names are very similar “fur coats are eco-friendly“.

Consequence: Even though you were careful, search engines are still confused and don’t know which page to rank for the keyword “eco-friendly fur coats” or the keyword “fur coats eco-friendly”. After all they are both very similar and any of the two pages could be relevant.

Don’t make Google choose, tell her* how to rank your website!

website cannibalism — Pretty much how Google sees your website.

Here are all the advantages of fixing cannibalism:

Content quality: If you keep writing about the same topic over and over again, chances are you’re gonna repeat yourself. Even if you avoid having duplicate content, your content quality will not be at its best.

SEO Juice: When you have 10 sites linking to 5 pages, that’s 2 external links each. If you have only one page, it gets 10 links. Basic maths.

SEO Weight: If you manage to merge your competing pages into one long, interesting page, not only the UX will be better, but the SEO weight of your new page will be much greater.

Conversions: Choose the page with the best Conversion rate and improve that one. No need to send visitors to low conversion rate pages.

How to fix cannibalism in a few, quick steps.

Know your web site exact Information Architecture. Use Google Search to find out what Google knows about your website. Go to Google and search for “site:yoursite.com keyword”. You should see something like this:

how to fix cannibalism

Now if you think that result #2 and result #3 are actually very similar, here is what you can do:

Option 1: Merge them into one strong page. Keep the strongest (the one that ranks the best for that keyword), and add the content from the weakest page. Once you’re done don’t forget to do a redirection 301 (permanent) to tell Google that your content has moved. Here is what it looks like in a .htaccess file, in case you’re wondering:

RedirectMatch 301 development http://www.noblepixels.com/web-development-services/

Option 2: Re-align the content of one of the pages. I recommend you pick the weakest (the lowest in term of page rank or traffic depending on your goals) and change the content so it’s clear what it does. In our case, I would focus more on the values and ethic of web development so there is no ambiguity. When you’re done, put a link on the modified page to the main page with the proper anchor. Like this:

Find out more about development.

Extra bonus points for making it to the bottom of this article on keyword cannibalism

Well done, you probably care a lot about fixing your website’s cannibalism situation. So I’m gonna give you a few more advice.

Map down your Information Architecture. You think you know your website like the back of your hand? Well, maybe you do. But are you 100% certain that your WordPress hasn’t generated tag pages or category pages? Worst, did you forget to remove the “hello World” article? Take a look at your sitemap to be sure.

100% Optimized. Have you heard about “long tail” or “niche”? They are perfect for fixing cannibalism. Instead of having 5 pages on your website competing for one keyword, make sure each page competes for a different keyword. You’ll have your main page “fur coats” and then 4 differents “smaller” keywords targeted like “duck fur coats”, “organic fur coats”, “synthetic fur coats”, “sustainable fur clothe line”. Make sure you use 100% of your content. You can use Moz Keyword Explorer to better find what keywords to target.

Get indexed in minutes! despite how scammy that title sounds like, you can actually get indexed in minutes. Connect to Google Search Console and click on your website (assuming you already added it). Then, in the left column, go to Crawl and click on “Fetch as Google“.

Google search console

Then you simply add your modified pages or new pages one by one and request submit to index. If you’re submiting a page with a lot of links you can ask for this page and its direct links to be indexed as well.

Google will then index your content in minutes, which should motivate you to fix keyword cannibalism right now.

*Yes, Google is a lady.

How to make sure your Online Shop will succeed

Posted on August 4, 2016January 5, 2021 by Anthony Roffidal

Welcome, and thank you for reading this guide on how to start an e-commerce website. How many of us have thought about starting our own online shop? How awesome would it be to work from home every day? How helpful would this e-commerce website be to our local shop? Imagine the money coming in 24/7, all year long, from anywhere on the planet… Well, it’s not that simple.

What? Thanks for ruining it Anthony!

Don’t worry, this guide will help you achieve your goals so if you’re ready, let’s start!

Bad news #1, you’re not the first one to think about an online shop.

ecommerce is not easy

Amazon launched their e-commerce website in 1995. Compared to actual bookstores, they had no limitations and could literally sell any book in the world. Because of their initial success, they started to grow and sell pretty much anything. I can’t recall how many times clients asked me to build a kinda Amazon website. Not easy…

In 1998 Google and Paypal definitely made it easier to sell online. One would generate traffic, the other allow you to process transactions.

In 2004, the PCI security standards started regulating this wild ecosystem, reassuring buyers all around the world.

That’s when e-commerce websites exploded. I started making them in 2009, and at that time there was still some room even though some industries were starting to be crowded.

The e-commerce bucket

No it’s not a new viral challenge ( I wonder what that would look like), it’s a way to visualize the e-commerce online shopping market. Imagine a bucket that was empty at first and was filled over the years.

ecommerce before 2004

Between 1995 and 2004, the market was mostly filled with big companies and a few start-ups. The reason why is fairly simple: e-commerce websites were very expensive to make, not really mainstream, and definitely not in most entrepreneurs preoccupations.

Between 2004 and 2010 the public started to learn more about e-commerce and some entrepreneurs saw an opportunity to start a business. Most of the big companies that haven’t adopted it before finally joined the herd.

ecommerce between 2004 and 2010

The bucket starts to be filled, but it starts to change a lot. Some big companies failed to succeed online and some small businesses became huge.

After 2010, everyone joined the party. Making an e-commerce website became much easier, with an array of solutions for every need.

ecommerce market today

Not only this, but artists can now sell on specialized platforms like Etsy, anyone can sell on Ebay, Market Places like Amazon are huge, people sell on Social Media, on Blogs, everywhere…

The good news is that the bucket gets bigger every day. In 2000 the value of e-commerce was about $27 billion, $143 billion in 2009 and $630 billion in 2014. Between 2000 and 2014 the bucket got 23 times bigger , and no one knows when it’s going to stop.

Before you start an e-commorce business, evaluate the market

Like any business, you must evaluate what’s the market like in your industry, find a niche, and study your competition. The good news is that it’s not too hard to do online.

Google, Google, Google. There is no secret, you must know by heart who’s leading the industry in Search Engines. I recommend you spend time searching for what you’re about to sell and see who shows up. Don’t get scared or start copying anyone, just look and take notes.
Social Media: That’s also pretty easy. Search for hashtags related to your industry, with a social media twist to it. Here users don’t buy; they like, they comment, they ask, they share, etc… so think fun and interesting.
Adds: Google Adwords, Instagram adds, facebook adds, blog adds, anywhere that your products could be sold, there must be adds. Learn who pays for them.
Market Places: Amazon, Ebay, Specialized platforms, etc… again, study your competition.
Blogs: Always a great place for e-commerce since buyers and sellers can both talk about the products and get some traffic.

By now you should have a pretty good idea of who’s leading the industry, and who’s investing in what. I’m sure you will see the same companies over and over again. And you’ll realize that there might be a spot for you.

I recommend you get some help for these long nights of research:

For SEO: You must know the keywords since you’ve googled them. If you don’t have all of them, it’s ok, you can use MOZ Keyword Explorer, a great tool that will give you Search Results and more importantly suggested keywords with useful data associated to it.

ecommerce SEO analysis

For knowing how many visits a competitor gets and who’s linking to them, what keywords they rank for, etc… I use SEM RUSH. Even though it’s not perfect, it’s one of the best tools to get competition’s data.

For anything Social I use Social mention, You enter a keyword and the system tells you who’s talking about it across all social media and blogs.

For Adds, I recommend you use every platform add-generator to get to know how much is an add. You can do so on Google Keyword Planner and any Social Media that has an add system. That will give you a lot of insightful data and help you plan your future Advertisement budget and strategy.

The rules of e-commerce Business

ecommerce rules Are you still there? Really? Wow, you must be really motivated. Good.

E-commerce has a bunch of rules, and you kinda have to follow them. Creativity is great, but don’t change everything. Why, you ask? Because user (buyers) know how to online shop and anything new, while potentially great, is also scary and confusing. Keep what works, and have fun with the rest.

In general, make sure that users can find the products easily, the navigation must be so awesome that anyone, even your 70 years old grandpa, can find the product they are looking for.

The search should also be awesome. Don’t make your visitors use a basic search that only looks for the exact keyword. I don’t know if you’ve heard, but users assume that every search bar works like Google now.

Search result for “mintoun bind”: Do you mean MOUNTAIN BIKE? Yes, we have some, they are right there.

Anything that helps the user is great. You should spend time on building your catalog, make it logical and self-explanatory. The Information architecture and the UX must be well-thoughts, for any type of users.

Don’t assume every customer is like you.

Don’t forget that customers shop on any type of device.

Write UNIQUE product description. You want to know the difference between you and your competition? The product description. Most of the Online store owners will simply copy the brand description, yes, the one you’ve seen everywhere and you thought you could use too. Sorry but that’s a bad idea. First of all, your creating duplicate content, that means your page will rank badly. Then, what do you feel when, as a customer, you finally find a product page that has a lot of professional information, useful tips, and great pictures or videos? You’re much more enticed to buy.

Your price is not the most important criteria for customers. If you offer great service, good quality products, great choice, good advice, free shipping, reward programs, money-back policy, customers will not care about a few dollars difference.

Treat your customer right!

You know what e-commerce website you want, let’s build it.

build e-commerce website Now that you know what website you want, let’s start the technical conversation.

I suggest you talk to a Web Team (like us) to define what technical solution will fit your needs. Most of the times quotations are free and very helpful.

If you want even better advice, offer to pay for the proposal, you’ll get the Web team more involved and everyone will benefit from it.

Here, at Noble Pixels we’ve prepared a small questionnaire that helps gather information in order to design the proper solution. You can get the full e-commerce client’s questionnaire here, but here are some questions to start the conversation with:

What are your main goals?
What does success look like? What about your current situation do you not like?
Which institution do you identify as your main competitors online?
Could you describe your audience groups?
What additional services apart from traditional e-commerce are you interested in offering your clients?
Are you interested in having other languages on the website? Other currencies?
Are you interested in working on Search Engine Optimization?
If interested in paid advertising, which channels do you prefer?
Are you interested in Social Media developments?
Are you interested in Email Marketing?

The best e-commerce platform

There are dozens of e-commerce platform out there, and most of them are great.

You can choose yourself the best platform for your project, or ask advice from a Web Team. If you want to know more about what is available you can Google “best e-commerce platform” and you will find a lot of answers. For example, this comparative test between the most popular e-commerce platforms in North America (weirdly missing Magento?!).

Some e-commerce platforms are free, some aren’t, some are hosted, some require their own hosting, some platforms are ideal for small catalogs, some for big catalogs, etc…

Below are four of the most popular e-commerce platforms. I will only talk about these since I’ve worked with them.

magento ecommerce platform

Magento. Huge and powerful. Magento offers three different options as I know off, and a bunch of different versions for each.

There is Magento Go, a simple, hosted system, ver limited but ideal for small projects and no development skills.

Magento Community, the main Magento, incredibly powerful but hard to handle since any customization must be done by a Magento web developer, and these guys are expensive.

Magento Entreprise, supposed to be the finest of all, is incredibly expensive and requires specific hosting and specialized developers (both being very expensive and quite mysterious…). If one day I suggest you use Magento Entreprise, well it will be because your Wallmart and I don’t know what else to do.

Woocommerce. Well, this one is much simpler. It is often used on existing WordPress website that suddenly start selling a few products. You know like a blog that start sellings shirts. It’s customizable if you have a PHP developer, our friend Changyong created a complete plugin for a client that needed different levels of admins, different POS management and a lot of custom things.

Apart from that, Woocommerce is cheap and plugins are quite cheap. But it’s limited.

Shopify. We’ve used that one for a big organization that was transiting from POS to Online shopping. For us developers, it was not super easy to do what we wanted to since Shopify is not really meant to be customized by devs. But it has a lot of features, is easy to administrate and pretty cheap. You also don’t have to worry about hosting and development since it’s hosted on their platform.

It’s great to start an online business but if you want to move to bigger, more customizable you’ll have to start fresh on another platform.

prestashop ecommerce platform Prestahop. Do you even know about that guy? Probably not. But I guarantee you it’s huge in Europe. It’s an open source system, easy to customize and full of plugins. These are generally cheaper than Magento which is good. Prestashop allows you to expand and grow your site as your business grows. It’s also pretty good with SEO.The main reason why store owners don’t pick it over Magento is because Magento looks stronger and beneficiate from a bigger community.

The main reason why store owners don’t pick it over Magento is because Magento looks stronger and beneficiate from a bigger community.

Alternate method: the Proprietary Solution. You can get a tailored e-commerce website made by a talented Web Team from scratch. It’s doable and even though less and less common, it stills offer great advantages:

It’s 100% Customizable and tailored to your exact need. That will give you an edge since no one else will offer the same features.
Less risk of being hacked since hackers generally attack existing platforms.

But it has some downsides:

It could be expensive.
You might be stuck with your developer.
Make sure your developers know E-commerce CMS and take security seriously.

A good thing to keep in mind is that your system will need new features that weren’t planned initially. Make sure that the platform you choose allows that new feature, offers it, and how much it will cost.

Once you have your perfect E-commerce website it’s time to sell

how to sell with ecommerce Now that you have a great e-commerce platform, you’re ready to hear that chin-chin sound of money coming in. After all, you just spent $50,000 for your website and $100,000 for your products.

And that’s when it hurts. Sometimes money doesn’t come in. Your online store is perfect, but empty. It needs customers! Normally if you’ve worked with a good web development company you know exactly what your SEO strategy is doing, and you should get some customers. Not a lot at first, because SEO takes time: a few months at least. Sometimes the competition is so hard that SEO is simply too time-consuming, or simply unadapted.

Example: you sell handmade products that no one knows. Therefore no one is looking for your products.

Advertising. Remember the time you spent on Adwords and advertising at the beginning of your project? Well, now it’s paying off. At least you have an idea of what to do and how much it will cost you. You can read online a lot about how to conduct an Adwords campaign, or hire someone to do your SEM for you. You can also invest in Social Media paid campaigns or blogs affiliation.

What matters at the end is that your campaign doesn’t cost you more than a certain percentage of your sales. That percentage must be known since the beginning of your project. It’s generally around 15%. That’s the percentage you can invest without losing money or working for nothing. This percentage depends on your Conversion Rate. You must know it, for each source, every hour of the day, each audience type, etc… It will help you to optimize the money you invest and the ROI you get from each channel.

For that purpose, you need Google Analytics. And you need to set up e-commerce goals as well as tracking events, conversion funnels, and other awesome Analytics.

The ultimate goal is to optimize your conversion rate.

It’s the web, try stuff!

ecommerce tips and advice Online shopping is not like brick and mortar commerce. You might realize that you sell a product that you never sell in your shop. It’s a weird color, a giant size, a specific model… well, guess what? If customers can’t find it in their local shop, they will search online.

Each industry has its own rules, but none of your competition will be the king or the queen forever. If you bring something fresh, something great to the equation, customers might turn to you. Sometimes it’s a great UI, sometimes it’s aggressive prices, sometimes it’s a great catalog.

Be imaginative for your promotions, sales and reward programs. I remember working with a store owner that kept asking me custom sales features. It was hard to develop and I was always amazed at what new promotion he would think off.

The recipe for success in e-commerce business

After all the advice I just gave you must have a pretty good idea of how to start an e-commerce website. Although I think it’s great to start with, keep reading about e-commerce all the time, keep researching, and challenge everything you hear. There is a lot of misinformation out there.

My last advice would be to listen to people that have succeeded.

Why you should always spend enough time on Information Architecture

Posted on August 2, 2016June 16, 2019 by Anthony Roffidal

Google in 2005 Since 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 Architecture Information 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

What does it mean to be the best Web Development Company?

Posted on August 2, 2016March 8, 2020 by Anthony Roffidal

If you ask most of the web development companies out there if they are the best in what they do, they will probably say yes. After all, how could you trust a company that doesn’t believe they are the best?

What does it mean to us to be the best web development company?

We try our best every day to deliver the best website or web service possible.

Here at Noble Pixels, the developers have seen hundreds of projects over the years. With time it is easy to see which project succeeded and which one didn’t. That doesn’t mean that what worked in the past will work in the future, but it helps us advise our clients choosing the best solution.

The Best Web Design Companies

Often when you Google Web Development Company you’ll find agencies that pretend they offer great Web Design and Web Development. Often it’s true. But if you also need the best SEO, the best Social Media Strategy, the best IA, the best Copy, the best pictures, then it gets really hard to find one company capable of delivering all this.

The reason? Because it’s incredibly difficult to concentrate such skilled talent in one place. It costs money and it’s not always the best solution. Here at Noble Pixels we don’t pretend we’re the best at everything, we are web developers. We’ve picked awesome talents, freelancers and companies to do what they’re good at. That’s our way to offer the best in everything.

For all of our big Design Projects, we trust our partner LOOP. We believe they are some of the finest web designers in Toronto and perhaps in North America.

The best Web Development Frameworks and Practices

To make a good dish you need good ingredients. We try to work with the best web development frameworks, tools, and practices, always. Not only it helps us being more productive, but it guarantees your product longevity.

First of all, because a lot of developers will be comfortable with it.

Then because you won’t need to revamp your system next time you want to make a big change. You’ll just customize your existing system.

The best Website Developers?

At the end, that’s our goal: keep delivering the best product for your budget and your time. Adding all the elements you need to make it a success, working with your team, your partners and your rules. Never over promising, always keep the conversion open, and most importantly believe in your project as if it were our own.

That’s what we mean by “best“.