was successfully added to your cart.
Category

Websites

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

2016 Web Design & UX Trends

2016 Web Design & UX Trends for More Sales

By | Websites

Working in web design means you must have the user in mind at all times and whilst you’ll be focusing on creating engaging and unique work, there are some Web Design & UX Trends that have been forecasted that could help you along the way to increase your bottom line.

 

The infographic charts a range of things, with 2016 looking like it will be the year of more full-width images, split-screen layouts and monochromatic colors, amongst others. So, whilst some trends look like they’re staying, others are being introduced into Web Design & UX Trends.

 

2016 Web Design & UX Trends

In closing, if you aren’t already utilizing these trends on your website—you really should be. Trends attract the trendy, which is the modern consumer and your customer; If you aren’t already utilizing these ideas you should contact and partner with The Creative Ninja to update or refresh your online image to attract customers — to do business with you and not your competition.

The Creative Ninja - Responsive Web Design Ad

 

Top Ten 2015 Website Trends

Top Ten 2015 Website Trends That Will Carry Forward Into 2016

By | Websites

What makes a website look modern and what makes it look dated? Every year, survival of the fittest chooses which trends work and which ones don’t. With 2015 coming to a close, we can now pinpoint the most successful trends of 2015, the ones that define the year’s style and show enough strength to carry forward into the New Year. Here are the top ten 2015 website trends that are here for another 365; and how to best utilize them on your website—if you aren’t already (because you really should be).

1. Long scrolling

Top Ten 2015 Design Trends

Shadow (http://shadow.is/) highlights the trend for long scrolling

With mobile browsing now exceeding desktop, 2015 saw web design catering more to smaller screens. Like many of the trends on this list, long scrolling became popular for its usefulness in responsive design: smaller screens means longer scrolls.

In the past, designers feared placing content below the fold, but new research proves that users don’t mind scrolling. Today, designers and users alike are recognizing the value of long scrolling: more creative freedom, improved storytelling, stronger interactions, and simplified navigation (if the site is small enough).

These benefits come at a cost, though; negative SEO effects and longer loading times, among the worst. Long scrolling works best for sites with heavy mobile traffic or frequently updating content, and is less effective for sites with heavy media like videos.

Best practices

  • Use a sticky navigation menu or a jump-to-section option to improve navigation. Long scrolling and single-page sites are susceptible to disorienting users, so put a safeguard in place.
  • Draw out the playful aspects of long scrolling with effects such as parallax and scrolling-triggered animations
  • Avoid the negative SEO effects by following the advice in this Moz article.

2. Card layouts

Top Ten 2015 Design Trends

Behance (www.behance.net) is a good example of a clean card layout

Another practical trend popularized by the mobile movement, card layouts display a wealth of content in a clean, organized manner. This makes them best suited for browsing diverse and dissimilar content, especially linking to external sites: users intuitively know clicking on the card brings them to the related post.

As explained in the guide Web Design Trends 2015 and 2016 by UXPin, cards work best as separating content into digestible doses, each one containing only the data a user needs to know:

  • Title
  • Enticing image
  • Description (or relevant tags)
  • Control panel with options like favoriting, commenting, etc.

Cards work exceptionally well with responsive design, because their rows and columns can be automatically rearranged to fit different screen sizes.

Best practices

Make the entire card should be clickable, as opposed to only the image or textual links. Fitts’s law states that this makes interacting easier.

Combine cards with animation, especially hover-triggered effects. Small extras — changes in colour or the entire face of the card, or even spinning or twirling effects — add life to the heavily structured format, but new and creative applications can set your site apart from the many others using cards.

The negative space between cards, called “gutters,” should be clearly defined. Don’t make users guess the boundaries.

3. Flat design reimagined

Top Ten 2015 Design Trends

The Toyota website (www.toyota-insidedreams.com/dreamcar-collection/) uses flat design in a different way

Years ago when skeuomorphism was (ironically) a modern trend, flat design emerged as an adversarial alternative.

However, the flat design today is a far stretch from its origins. The new, more nuanced iteration of flat design — Ryan Allen calls it ‘Flat Design 2.0’ — offers more opportunity for details and flourishes. The new flat design that dominated 2015 took on the characteristics of:

  • Lighting glares and highlights
  • Gradient and/or drop shadows
  • Greater values for detailing

All-in-all, though, flat design remains flat at heart.

The general simplicity and minimum embellishments haven’t gone anywhere. Its almost-cartoonish graphics, legibility-first typography, and playful colours remain unchanged, and keep the style as one geared for easy comprehension.

Best practices

  • Ghost buttons, with transparent backgrounds framed only by an outline, emerged as a trend within a trend. Fortunately, ghost buttons can be used outside of flat design: these functional controls don’t detract from a prominent background image, making them a popular addition to hero images.
  • The beauty of flat design’s simple graphics is that loading is a breeze. This works perfectly for responsive design.
  • Flat design pairs well with the minimalism trend (see 10). Both strive for increased comprehension through simplicity and both adhere to “less is more.”

4. Powerful animations

Top Ten 2015 Design Trends

Bugaboo (http://bit.ly/1HjLPyY) features some cool animations

Animations took on more duties and responsibilities in 2015, reaching beyond aesthetic value to serve more practical roles.

Because motion attracts attention, animation can influence the visual hierarchy of what gets seen first. Animated effects can advertise certain elements over others, with the potential to contend with more traditional aspects such as size or colour.

Animations also have the power to show relations. Think of an animated effect around minimizing a window, where it shrinks and then flies into the menu — this animation first confirms the action’s success, but also shows the user where on the menu they can view the window later.

At the very least, animation highlights otherwise dull actions. A hover animation shows a link is clickable more than a simple colour change.

Best practices

  • Web and app animations can still make use of Disney’s classic 12 rules of animation.
  • Long scrolling formats rely heavily on animation to create the appearance of smooth scrolling. When done well, animations triggered by scrolling create a more immersive and entertaining site.
  • Loading screen animations are a staple for good reason: they give users an estimation on time, and entertain them while waiting.
  • Subtle animations in a background image can energize a page and keep it from being dull… as long as they’re not excessive. Too much background movement distracts the user from the main content, not to mention increases loading times.

5. Mesmerizing photography

Top Ten 2015 Design Trends

Wedding photographer Mario Frigerio’s site (http://www.fotofrigerio.it/en) makes great use of stunning imagery

With the popularity of HD screens in 2015, designers started paying more attention to the artistic quality of photographs. More sites rely on breathtaking photography for their visual presentation instead of digital graphics.

Among the photography trends of the year, the hero image reigns supreme. By filling the entire background with a single image, sites create highly immersive experiences that can draw users in more quickly, making them perfect for landing and login pages.

There is a lot of flexibility in hero images, too. The tone and message can be changed for any site, as long as the photograph matches the goals.

Best practices

  • While custom photography is often more personal, stock photography is a viable option for designers trying to save time or money. For the best of both worlds, combine them in such a way that the custom photos make the stock photos also seem custom — for example, consistent themes through both custom and stock. For free stock photos, try Unsplash, Pixabay and Pexels.
  • Colour overlays allow designers to manipulate how an image is perceived based on the colour’s attributes. Giving an otherwise dismal photo a yellow or orange overlay will make it appear more upbeat and friendly.
  • Ecommerce sites have started replacing traditional product images with photographs of the product in their natural environment. Providing context around what it’s like to actually own the product has been proven to increase sales.

6. HD backgrounds

Top Ten 2015 Design Trends

R/m Design School’s site (http://school.readymag.com/) has a spectacular HD background

Working together with trends in photography, the use of HD backgrounds also rose in popularity this year. With more and more people owning HD devices, it was just a matter of time.

We see HD quality for video, as well as the hero images described above. Browsers and internet speeds can now handle more video, and cinematic backgrounds tend to be more effective at atmosphere and emotional connections than a stagnant photograph.

HD is another resolution greater than 200 ppi (dpi), while standard definition is 72 ppi. This makes images designed with SD in mind appear blocky or blurry on HD devices, but HD images appear fine on SD. That means users with SD displays won’t notice the difference — but those with HD wil.

Best practices

  • Scalar vector graphics (SVG) translate images using lines and points, not pixel-for-pixel like raster formats (.jpg, .png, .gif). Use them when you can for new graphics, and save raster formats for real-life images and video because they have a fixed number of pixels from the start — that’s why it’s important to capture the media in HD from the beginning.
  • Most devices’ backgrounds will not conform to the usual 1:1.5 aspect ratio of cameras, so take an active role in cropping. Otherwise, you won’t control what’s cut and what’s seen.
  • Don’t let the superior visuals of the background overshadow the more important elements of the page.

7. Bold typography

Top Ten 2015 Design Trends

Google Ideas (www.google.com/ideas/) uses bold typography to show it’s serious about changing the world

With font rendering no longer a concern and the availability of new, free fonts, typography has begun playing more of a role in web design.

Bold typography refers to text that draws attention to itself, but is not necessarily wild or elaborate. In fact, simple typography is sometimes the most bold. Along with flat and minimalist trends, current typography also favors simplicity. A sans serif typeface set in a thick styling makes a visual statement while improving readability.

Regardless of the font, one of the most common uses of typography this year is extreme size. This could be large or small — the trend is simply bringing typeface to its extremes.

Best practices

  • To keep it simple, start with just two fonts per site. For variety, experiment with more typefaces, but stick within the same typeface family.
  • Remember the primary goal of typography is legibility and readability. It doesn’t matter how impressive your typeface is if it’s not understood.
  • With enough emphasis on visuals, bold typography can take over the role of an image on the page. Text can also be eye candy, and it’s common to see pages with beautiful text as the central focus.

8. Involved interactivity

Top Ten 2015 Design Trends

Beatbox Academy (www.beatboxacademy.ca/) is wonderfully interactive

The advancements of HTML5, CSS, Javascript, and jQuery now allow deeper interactions, a powerful tool for all businesses. Users are now more involved, with more visual stimulation, stronger content, and more engaging controls. This year saw an increase in:

  • Clickable/swipe-able elements
  • Personalization (especially geolocating)
  • Control over revealing content
  • Video and animation
  • Scroll-based navigation
  • Transitions and loop functions
  • Push notifications

The increase in interactions also means an increase microinteractions.

Microinteractions are the minutiae of interactivity: a ding sound when you send an email, or an animation to draw attention to a new notification. Interaction design will only get more intricate, making this a trend that’s sure to stick around for a while.

Best practices

  • Well-known signifiers — such as a hamburger icon labeled “MENU” to communicate a pullout menu or a play button representing a clickable video — bypass explaining functionality and so make interacting easier.
  • Keep the user’s goal in mind. Every step of the design process should be tweaked to help the user accomplish their goals faster. Personas, user scenarios, and experience maps mentioned in UX Design Process Best Practices work best for understanding your users and their goals.
  • A product’s interactivity is its role in the conversation with the user. To better understand user flows, try role-playing between user and interface, where one person actually speaks for the future site.

9. Bright colours

Top Ten 2015 Design Trends

Spotify: Found them First (https://spotify-foundthemfirst.com/en-US) highlights the current trend for brighter colours

As we see with the popularity of flat design, the general trend with visuals is happy and more upbeat.

Bright, “happy” colours match that tone with a lighthearted, friendly appeal, and are today more accessible. In the past designers were limited to 216 web-safe colours, but now there are millions, an advancement timed nicely with the rise of HD screens.

Bright colours offer more than just a more upbeat aesthetic. Attention-grabbing colours reduce the likelihood of a site appearing dull — minimalism’s natural weakness. When used actively with typography, colours can draw attention to certain words or phrases. Moreover, colours serve a valuable function for suggesting usability: think of cards that change colour when hovered over, an obvious indicator of interactivity.

Best practices

  • Each colour elicits a different emotion, so choose the right ones to match your product’s personality.
  • More colours isn’t always better. Monochromatic schemes use different shades of the same colour to create a more unified interface, and make a strong visual statement when paired with bold typography.
  • The 3 main colour schemes can create the perfect contrast on your site.

10. Minimalism

Top Ten 2015 Design Trends

OMEGA Watches’ site (www.omegawatches.com/) is beautifully minimalist

I’ll end with another result of increasing mobile traffic: minimalism, a style defined by using only the bare essential, or minimum, elements.

In the example above, OMEGA includes only what’s necessary: language settings, expandable menu, and the logo for returning to the home page. This draws attention almost exclusively to the hero image of the product.

Visually, minimalism adds an air of sophistication to the site, no matter the genre. But on a more practical level, trimming the fat cuts down loading times, enhances readability, and creates interfaces so simple they can be understood at a glance. Fewer elements makes responsive design is easier, as well.

Best practices

  • Conserve space by hiding navigation menus in slideouts or pulldown menus.
  • Applying different degrees of symmetry makes the few remaining elements more potent. Consider asymmetry if you want a single element to stand out, like a large product image offset by a small block of text.
  • Given the emphasis on the content, minimalist sites work well with hero images and video backgrounds: there are simply less UI elements to compete with the graphics.

In closing, if you aren’t already utilizing these trends on your website—you really should be. Trends attract the trendy, which is the modern consumer and your customer; If you aren’t already utilizing these ideas you should contact and partner with The Creative Ninja to update or refresh your online image to attract customers — to do business with you and not your competition.

Original article referenced from CreativeBloq.

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.