Category

Communications Design

Website Launch Checklist

A Website Launch Checklist: Are You Ready?

By | Blog, Communications Design, Websites

I know you’re excited to launch. But before you go live, make sure you’ve covered all your bases with this website launch checklist.

Website Launch Checklist

You’ve done it! You’ve finally finished that website you’ve been working on for days/weeks/months and you’re ready to share it with the world. But don’t hit that publish button before going through this website launch checklist first.

Even though nothing would make you happier than to get your site out there, you owe it to yourself (and your site) to check (and maybe double check) this 4-part website launch checklist.

Design checklist

It’s all too easy to miss (or break) something during the many back-and-forths, client feedback sessions, and other design iterations you go through. So going back to check for any design mistakes is vital.

This first checklist is completely visual—focused on whether the site looks good. We’ll go into functionality testing in the next step.

Cross-browser functionality

Different browsers may render your website in different ways, so it’s important to test your site in different browsers. Take a look at W3’s browser stats to see where you should focus your testing. (Though if you’re working on a redesign, browser-usage stats will be more useful.)

During this process (and the next, in multi-device testing) you’ll want to make sure your layouts, typography, navigation, and other design elements are displaying properly.

I always check:

  • Fonts
  • Colors/gradients
  • Images
  • Logo

Cross-device functionality

Make sure your site looks and performs beautifully on any device.

There have never been more web-capable devices around, and with that comes a staggering array of screen sizes. Done right, your site should perform well on any screen size, but be sure to double check. (You are a perfectionist after all, right?)

This is also where mobile navigation is crucial. Be sure to test out the user’s ability to navigate around the website on a touchscreen device, and make sure nothing gets lost in device transition.

In Webflow, we make it easy for you to test the most popular devices and preview your website on almost any size, streamlining the process of cross-device testing all in one place.

Image optimization

Images and graphics are an important element of many websites, so you’ll want to make sure they display properly, especially on all those ultra-high-definition devices (like Apple’s Retina screens) out there.

The rule of thumb is to upload your image at twice the size it’ll display on your site. In some cases, you can upload two images: an actual-size version for lower-res devices, and another that’s twice the size for high-res devices.

Why? Because the heavier the image, the slower your page will load, and the worse your user experience will be (which also negatively affects SEO, which we’ll cover later on).

 

Functionality testing

Design and functionality go hand in hand, but I like to isolate the two to make sure the website both looks the way it was designed to and that it performs as intended during my website launch checklist analysis.

Integration testing

This one is super important, and can range from a quick task to a giant one, depending on how many integrations you have. Typically, I’ll create a list of integrations as I add them so I don’t forget later on.

Some common integrations to test might be:

  • Web forms (check that the forms work and that submitted information goes to the right place)
  • Autoresponders
  • Marketing emails (MailChimp, Constant Contact, HubSpot, drip campaigns, etc.)
  • RSS feeds
  • eCommerce
  • CRM
  • CMS

Link testing

This one can be a doozy, simply because most sites have dozens (if not hundreds) of links. More often than not, there’s a link or two that goes nowhere, and it’s important to find them before your end-users do.

Some of the most important links to check are:

  • Top navigation links
  • Footer links
  • Social media links (Facebook, Twitter, etc.)
  • Logo (typically links to the home page)

Rather than doing all this manually, I’d suggest trying a link crawler like the W3C Link Checker, the Chrome plugin Check My Links, or Screaming Frog (which is excellent for SEO audits, too).

 

Content editing

Give the king its due.

Content is king, and the testing process should be fit for one. Typically this involves making sure that all content has been updated and approved. I can’t tell you how many websites I’ve found that still have a ‘Lorem Ipsum’ paragraph somewhere.

Now, if you practice content-first design, you should have final content already in place, so you can focus on more fine-toothed-comb review, like proofing for spelling and grammatical errors.

It’s also important to note here that it’s okay for content to be changed later on. Clients, team members, or you can always adjust text through a CMS. The main goal here is to ensure that your website content isn’t complete gibberish.

 

Search engine optimization (SEO)

Analyzing and optimizing your website after publishing is a never-ending process. And you need to consider semantic site structure from the get-go. But that doesn’t mean you won’t benefit from an SEO review before you hit publish.

There are multiple things that can be done to optimize your website for search engines.

1. Use proper semantic structure

Web crawlers (like Google’s bots) read through your website to get an understanding of your content, so that search engines know to display your website when people search for it. To help them crawl your site, you need to use language they’ll understand.

Historically, this has meant using the following semantic tags:

  • h1–h6 (heading tags)
  • p (paragraph tags)
  • ul/ol (unordered and ordered Lists)

You can also go above and beyond with some new HTML5 semantic tags:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

These tags are important because they let you identify the content that’s most relevant to users. In short: making it easy for search engines makes it easier for users to find you.

2. Meta SEO tags

Aside from on-page structure, you can also help web crawlers understand your site by titling and describing your pages as a whole.

Meta title

Your page’s meta title translates to the linked text people will see on search engine result pages (SERPs). It also displays on the browser tab when people click through to your page. Some best practices include:

  • Define the page’s central topic
  • Keep it under 70 characters in length (including spaces)
  • Use relevant keywords
  • Put important keywords in the front of the title

Meta description

The meta description is a short sentence (or two) that describes what your website has to offer. It will (sometimes) show up below your meta title in search results.

Some best practices include:

  • Include keywords that describe the page
  • Don’t go over 160 characters
  • Write your description for people, not robots. (Google doesn’t use descriptions in web rankings).

3. Open Graph settings

Social media has become a key element of SEO, so it’s crucial that you amplify this process by providing effective Open Graph information. Open Graph settings include three pieces of content: title, description, and an image.

The title and description follow the same rules as their SEO counterparts, but instead of showing up in search results, they appear as the default title and description on social media platforms when shared.

This is hugely beneficial because it lets you determine what the messaging (and image) will be when others share your website, helping you keep control of your brand.

 

Analytics

Website analytics are another crucial piece to set up before you launch. It’s free to set up a Google Analytics account, and incredibly easy to integrate Google Analytics with Webflow.

Once set up, you’ll be able to track visitors and user engagement on your website almost instantly!

Bookmark this checklist and refer to it during your next website upgrade/re-design. Should you have any questions or want to reach out to The Ninja to partner with him for your next website project; contact him directly.

 

The Creative Ninja - Responsive Web Design Ad

Responsive Web Design

Why You Need Responsive Web Design

By | Communications Design, Websites

Responsive Web Design

Responsive design is the hot topic for any device with access to the internet and a mobile browser.

We’ve moved beyond mobile and finally reached the point where companies are accepting the fact that the best ROI comes from fully integrated marketing programs. It’s hard to fully integrate when your website is a convoluted mess of versions for different devices or worse, a single version that renders poorly on different devices.

The case for responsive design has been made clear, and responsive web design is the hottest topic for not only business websites, but especially ecommerce websites. However, companies are still slow to invest the time and money into the development required to turn their antiquated websites into responsive websites that render perfectly no matter what device a person is using.

Now is the time to prioritize responsive design in your budget. With a responsive website, businesses can be in front of consumers at every step of their online journey. People who search for a business’ site, begin reading content and viewing videos from their desktop computers at work, and then look for the same business on their smartphones during lunch are able to continue their research into products and services uninterrupted.

In contrast, if the business has a traditional website and a mobile site, someone investigating products and services online can become frustrated by the lack of complete content on the mobile site or the inability to navigate through the full site on her smartphone. They might, and often do, give up the search altogether which results in lost conversions and revenue for a business.

Responsive websites provide continuity between different viewing contexts, remaining completely agnostic to the type of device used and the size of the screen it has. What this means is that the same website will present an optimized layout regardless of which device it finds itself being loaded in.

A Mobile Version of Your Website Isn’t Good Enough.

It’s important to understand that having a mobile version of your website isn’t enough anymore. Responsive websites simplify internet marketing and SEO. Instead of having to develop and manage content for multiple websites, businesses with responsive sites can take a unified approach to content management because they have only the one responsive site to manage. The same applies to analytics and strategy development and deployment. A responsive website means there is only one set of analytics to examine and a single strategy to develop and deploy.

In addition, responsive websites are easier for consumers to find than traditional or mobile sites because they come up higher in search engines’ rankings. In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.

Responsive Design in the Future

There are a lot of exciting things coming up with responsive design. We’re already using responsive design in web applications, and developers are exploring emerging areas of responsive design by testing a multitude of integrations that are now available.

One thing is certain, you don’t want to fall behind and watch your competitors launch responsive websites while yours is still stuck in 2010 (or earlier). The time to get responsive with your web design is now. If you need help with your responsive web design partner with The Creative Ninja. Simply contact him today to get your free quote.

Unilever

20 Well Designed Logos

By | Communications Design, Identity & Branding, Logos

Well designed logos can be tricky.

On one hand, you want something which is instantly recognisable and engaging with the audience. But on the other hand, having a boring, straightforward logo can get tiresome. Well designed logos will communicate more about a business than just being a mark to represent you.

People can quickly figure out the gist of a basic logo, and they get bored of it. You need something which is going to encourage people to take another look at the logo – something deeper than just the surface meaning. This could be taking advantage of negative space, or simply playing with text to create images.

A hidden message in a logo is the best way to do that. Here are 20 great examples.

 

Unilever

Unilever Logo

Unilever is an enormous company, with several subdivisions focusing on various elements of their business. Their logo redesign tried to take this into consideration, incorporating symbolic doodles of everything they do into their large “U” branding. It’s smart, and has won plaudits.

 

Presbyterian Church

Presbyterian Church Logo

Okay, so you see the cross here. But do you see the rest? There’s a bible on a pulpit; a clerical robe; fish on either side; a dove; and flames. This works on lots of levels.

 

Yoga Australia

Yoga Australia Logo

So far, so boring. But the negative space in the yoga woman’s leg is the map of Australia.

 

Northwest AirlinesNorthwest Airlines

This logo should never have been scrapped. You can see all the different components.

 

Carrefour

Carre Four Logo

Those who don’t know their French ought to be told that “carrefour” means crossroads. You get the arrows, plus the “C” in the negative space.

 

Piano Forest

Piano Forest

Trees, right? Well the monochromatic logo also shows a hint of a piano keyboard.

 

The Guild of Food Writers

The Guild of Food Writers Logo

You think you’ve got this one licked, right? A pen – that’s the writing bit. But look inside the nib of the pen. There’s a spoon.

 

Museum of London

Museum of London Logo

London’s an ever-growing city, as demonstrated by the ever increasing blotches in the background of this. It works on many levels.

 

Schizophrenic

Schizophrenic Logo

Schizophrenia is a bipolar personality disorder. This logo represents both the happy and sad times.

 

Big 10 Conference

Big Ten Conference Logo

The Big 10 conference has 11 members. Problem? No. Check out the negative space.

 

Toblerone

Toblerone Logo

Delicious European candy. What’s the deal with the logo, though? There’s the mountain, which represents where the chocolate was originally made. Then spot the bear inside it – which were plentiful in the area!

 

Milwaukee Brewers

Milwaukee Brewers Logo

It’s a simple logo, right? The baseball mit – that’s it. Well, that’s wrong. You can spy the “M” and “B” in the mit, if you look a little closer.

 

Elle Hive Tractors

Elle Hive Tractors Logo

Again, playing with letters, this logo shows the “E” and the “H”, but also demonstrates a lo-fi tractor.

 

Sun Microsystems

Sun Microsystems Logo

This is one of the most famous examples of the genre. You can read “Sun” whichever way you look at it.

 

FedEx

FedEx Logo

But if you thought Sun’s was famous, FedEx is the example everyone cites when talking about hidden message logos. The arrow represents the speed and directness of their deliveries.

 

Amazon

Amazon Logo

Amazon stock everything, from A to Z, and do it with a smile. Thus the hidden messages in their logo.

 

AG Low Construction

AG Low Construction Logo

Construction companies rely on floor plans. But look a little closer. That spindly outline spells out the name of the company.

 

Baskin Robbins

Baskin Robbins Log

Baskin Robbins pride themselves on their 31 flavors of ice cream, which is what you can see in the pink text.

 

Formula 1

Formula 1 Logo

Formula 1 is speedy motor racing, which hasn’t caught on in the US that much. But their logo is universally recognised, and for good reason. The red flares demonstrate the speed – but take a look in the negative space. There’s the “1″ to go alongside the “F”.

 

Egg & Spoon

Egg & Spoon Logo

I’ll admit this took me a lot of work to understand. You see, I thought this was a boring, basic logo at first. It’s just a lower case E, isn’t it? But then you look closer – and the white space (again) looks like an egg in a spoon.

 

If you’re looking to create or refresh a logo for your business to better represent your brand, get in touch with The Creative Ninja by filling out the contact form. There are logo packages available for any budget; just request a free quote.