Is Your Website Mobile Friendly? Time May Be Running Out.

Gary Illyes at Pubcon announced today that Google is switching to a mobile first index.  This means that Google will be indexing the mobile versions of pages and not the desktop as its primary index.

This is a huge change.  Google has always used the desktop version of a page for ranking, even when serving results to users on a mobile device.

The mobile first index is not live yet, but it will be soon. So what can you or your business do to be prepared?

For starters, you’ll need to make absolutely sure your website is mobile-friendly and responsive. Here are some tips to get you started, so your web site’s mobile experience is optimized and ready to go by the time the transition occurs.

  • Use Google’s mobile-friendly test, which was created to analyze websites and offer suggestions for mobile optimization. As part of this test, you can check your site’s page loading speed – which is absolutely critical in a mobile-first environment. While the mobile-friendly test gives users a ballpark idea of what to aim for, don’t simply rely on its results. Instead…
  • Review your site on your own smartphone, and a friend’s smartphone, and your neighbor’s smartphone… Your site could potentially display differently from device to device and browser to browser (e.g., Chrome vs. IE, vs. Safari vs. Firefox). Start making a checklist: How do your main pages appear? Is your company or organization’s contact information readily available with clickable calls-to-action? Your website should be responsive, with buttons that are easily pressed, menus that are easily accessible, and text that is legible without resorting to a pinch and zoom approach.
  • Start planning now for optimized content. Writing for mobile-first shouldn’t change your style, wholesale. Keep in mind, though, that when writing for a smaller screen, brevity is a virtue. Consider shorter headlines that trim the fat and focus on the core subject. Content headings, font size, and color may need to be toned down, somewhat. In terms of main content, getting to the point swiftly and succinctly will be essential, as it allows scanners to decide if they want to scroll any further. (Better yet, hook them and reel them in so they have no choice but to do so.)

From website updates to redesigns, taking a mobile-first approach is more important than it has ever been. If you haven’t yet taken the leap, now is the time to get started.
If your website does not initially ace Google’s mobile-friendly test, contact us today. We can help you identify what needs to be done so you can pass with flying colors.

Essential Elements of An Awesome Website

At Connect4 Consulting we like to think that we specialize in creating Awesome Websites for our clients. But what’s awesome one day is not so awesome a few years later. This blog post lists the essential elements of an awesome website and unpacks each of the essential elements.

Your website is often the first interaction between you and your audience (customers, donors, readers, grantees, general public, etc.).  It is essential that your website impresses your target audience. Building an impressive website requires either a significant investment of time and effort or a significant investment of money.  Sometimes it requires all that and more.

You really shouldn’t settle for anything less than a totally impressive website.  In fact, your website should be awesome right from the get-go.  In this article, we’ll tell you the best things you can do to help you stand out from the competition.  Here, then, are the essential elements of an awesome website:

It has to look good.

If you want to capture and maintain attention, your website must look good and it must look good to your target audience. Knowing your audience is critical because there are a wide variety of awesome websites, but not all are appropriate for the same audiences. So you need to think about the following elements of visual design:

  • layout
  • color palette
  • fonts/typography
  • images
  • symmetry and balance
  • white space
  • supporting media/videos

It needs a clearly defined purpose.

Visitors should be able to determine what your site is about at a single glance.  If your site is about cars, that should be obvious.  If your site is about drones, I should be able to see that.  If your site is about Chuck Norris, you shouldn’t need to explain.  It should be perfectly clear what your site is about, without requiring any real thinking.

Yet you’ll see dozens of therapy and yoga websites with serene pictures of waterfalls or zen-like arrangements of pebbles. These may be beautiful and put people in a good mood, but it’s only a good approach if the purpose of the website is obvious. It is hard enough to get people to your website. Make sure that once they get there, they know what it is you want them to do.

It has to be easy to use.

An awesome website should be totally intuitive. That means someone visiting the website doesn’t have to think to figure out how to move around the site. The very best sites make people forget what they came to see – as long as they find what they were looking for in the first place.

User-friendly websites include:

  • clear and coherent navigation
  • links that give a good indication of what they lead to
  • something that makes users want to explore further
  • good accessibility features
  • seamless responsiveness

A well designed website is like a well-designed chair. People should want to sit in it. The feeling should be that it’s almost impossible to resist being drawn in. 

Put the most important things at the top of the page.

Always lead with whatever is most important. Don’t tuck those things away in the footer and make people have to hunt for them. When the visitor finds what they are looking for, make sure it works.

Make sure all users have an awesome experience.

The site should work on all devices. To do this your site needs to be responsive. It needs to have images that are optimized so they don’t use too much bandwidth to load.

Top 5 Items Missing From Most Websites

The following are the most common items missing from websites in 2016. If you have a website and are missing some of these, the good news is that it’s relatively easy to fix, and it’s something that we at Connect4 Consulting can help you with immediately.

1) SEO optimization

Despite all the talk about the importance of SEO, many business websites still are buried in search results never to be found. Some of the important factors that attribute to getting found on Google are 1. On page optimization (local NAP (name, address, phone number), keywords in titles and domain authority) 2. External signals (NAP consistency in other places, quality backlinks) and 3. Blogging. If your website doesn’t have keywords littered throughout the site, quality backlinks or a blog, you’re not likely to be found.

2) Clear Call To Action

Now that someone is at your website, what do you want them to do? I’m always surprised that many websites forget or leave this important action off the table. You have about 5 seconds to gain the attention of a website viewer and get them to do something on your website. This could be a quick contact form with a button that says “Contact Us Today” or a phone button with “Call Now”. Take some time and think through what you want the user to do? Why are they there in the first place? Don’t miss that potential conversion for your website. On mobile sites your CTA must be clickable or “tappable” keep this in mind.

3) Testimonials

What other people have said about your product or service is a great way to build your brand and promote your business. They should be easy to find and prominently displayed. Try creative approaches to testimonials. If you can afford it, get some quality, professional video production that gives the visitor a real face and name of the company you use. Take reviews from Yelp, Google or industry directory to use for your website.

4) Blog

You’ve probably heard the phrase “CONTENT IS KING” by now. It still rings true to doing business on the internet and a blog is the way to publish relevant, valuable articles that your visitors may find interesting. The average consumer is more savvy today and are more likely to educate themselves before they buy. Provide them the answers to the questions they seek in your blog. You could also use your blog as a FAQ section of your website or a customer service tool. Save yourself the time in answering commonly asked questions in this valuable section of your website.

5) Works on mobile devices

Google has recently updated their search results to penalize websites that are not mobile friendly. As more and more people are using their smart phones to search, you must have a mobile version of your website otherwise you will not even be found. Make sure your website design is “responsive”. This means that the website is coded to figure out what type of device it is being displayed on and will resize the page appropriately. A mobile version also has large enough navigation and clear business location and phone number details.

The Next Rembrandt – A Computer Has Made a Rembrandt Painting

A computer has made a Rembrandt painting and it looks perfect. Rembrandt may have died in 1669 but a team of art historians, software developers, scientists, engineers, and data analysts have teamed up to help a computer paint Rembrandt’s next painting.

The team worked on the project for 18 months and analyzed all known works of Rembrandt, more than 300 paintings, using high resolution 3D scans to capture every little detail and create an algorithm that would eventually be able to accurately recreate his style. That data was then fed to a 3D printer, which recreated the painting using 13 layers of paint-based Ultra Violet ink.

The painting, above, consists of over 148 million pixels, based on more than 160,000 fragments from Rembrandt’s works.

The project is backed by Amsterdam-based advertising agency J Walter Thompson and was created for its client, ING Bank.

Go to https://www.nextrembrandt.com/ to read more about the fascinating project and the technology behind it.

Free Stock Photography

Stock photography can either help your or hurt you. It always helps to make your own unique changes to stock photography so that it works for you. My personal favorite is Unsplash but here’s the full list:

Help with Color Palettes

 

Use this list of tools to help pick the right color palette for your next project.

2015 Website Design Trends – What’s Hot and What’s Not

Website design is constantly evolving. New trends emerge and old trends disappear and then after a few years old trends sometimes reappear. The two dominant themes for 2015 are going to be mobile and user experience and user interface (UX/UI). The best designers focus on user experience because that’s what matters in the end. Design and style are highly subjective and debatable, but it is the user experience that measures the actual success of a website. Therefore, most of these trends relate to UI/UX.

What’s Hot? Simple, flat design elements.
What’s Not? 3-d graphics, drop shadows

Flat Design

The concepts of flat design are pretty simple; strip the object off any design element which is not 100 per cent purposeful in its function. This includes removing any special shadow effects, 3-D graphics and using only flat shapes, buttons and indicators.

What’s Hot? One website that works on all devices.
What’s Not? Separate mobile sites

Responsive Design

Responsive design is here to stay – it just doesn’t make sense to run dedicated mobile websites anymore.

What’s Hot? Websites with long scrolling pages.
What’s Not? Sites with too much navigation

Endless Scrolling

Example of endless scrolling website

Example of endless scrolling website

It took a while, but long scrolling pages have become the norm because it’s far easier to scroll through a site than clicking on buttons and links. This has been aided by the growth of responsive web design, full-width sites, and the use of white space. This doesn’t mean that endless scrolling is everywhere, but it is typically found on home pages and e-commerce product pages. The most notable example is Apple’s page for its iPhone 6.

What’s Hot? Rich custom background.
What’s Not? Stock image or white background

High Quality Custom Background

Plain stock photography no longer works in website design. Websites want to look unique and need to grab a visitor’s attention. Professional photography that is customized to the website’s theme and purpose ensures that a site is unique. HTML video is also being used as a way to establish a distinct, custom look. Bing’s search engine frequently uses HTML 5 powered video backgrounds.

What’s Hot? Interactive storytelling.
What’s Not? Boring websites

Interactive Storytelling

While great content has always been a requirement for a successful website, in 2015 the best websites will be the ones that can tell and sell content through a story. The best example in this regard is the Tesla Motors Your Questions Answered page. The page uses large images and embedded infographics to answer consumer questions about the cars and their features. This website is a very successful example of all of the best 2015 website design trends.

Your Questions Answered Tesla Motors

What’s Hot? Parallax scrolling.
What’s Not? Non-interactive backgrounds

Parallax Scrolling

Parallax scrolling is a design technique where the background scrolls at a slightly different pace relative to the foreground. This adds some depth to the page and is very popular on magazine style websites.

Conclusion

I think we are going to see iterative developments of 2015 website design trends like flat and responsive design in the coming months with an overall focus on optimizing the user experience for mobile and devices of all sizes.

DIY Tools For Creating Infographics

Recently I’ve had a lot of requests for snazzy infographics. Information graphics or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system’s ability to see patterns and trends.

The only problem is that infographics that look like they are incredibly simple to create, are often anything but. Creating something beautiful and instantly understandable in Photoshop is usually beyond the limits that time or a budget allows. This is why it’s occasionally useful to use an infographics tool to speed up the process.

The following are our favorites. They all have a free version, but to really harness the power behind the tools, you have to pay. Typically this is a small monthly fee, like $10 or $20/month.

1. Vizualize

vizualize

Click on screenshot to look at my resume in vizualize.

This is an infographic ‪résumé‬ generator turned up. You start by connecting to your LinkedIn account. You can visualise your resume in one click and also take a look at previous examples. Enabling people to express their professional accomplishments in a simple yet compelling personal visualisation, we think this is the start of something big.

2. Google Developers

Google Charts — Google Developers

Display real live data with Google Developers Tools

If you need to display real live data, look no further than Google Developers chart tools. Google chart tools are powerful, simple to use, and free. You can choose from a variety of charts and configure an extensive set of options to perfectly match the look and feel of your website. By connecting your data in real time, Google Developers is the perfect infographic generator for your website.

3. Easel.ly

Easel.ly offers 12 free starter templates.

Easel.ly offers 12 free starter templates.

This free web-based infographic tool offers you a dozen free easily customizable templates to start you off.

You get access to a library of things like arrows, shapes and connector lines, and you can customize the text with range of fonts, colours, text styles and sizes. The tool also lets you upload your graphics and position them with one touch.

The infographics are not animated but they look very professional. You can easily look at what other people have created and then use those infographics as a starting point for your own infographic.

4. Piktochart

Piktochart is cool but you have to pay $29/month to access all the templates and remove the piktochart watermark.

Piktochart is cool but you have to pay $29/month to access all the templates and remove the piktochart watermark.

Piktochart is an infographic and presentation tool enabling you to turn boring data into engaging infographics with just a few clicks. Piktochart’s customizable editor lets you do things like modify colour schemes and fonts, insert pre-loaded graphics and upload basic shapes and images. Its grid lined templates also make it easy to align graphical elements and resize images proportionally. There’s a free version offering nine basic themes, while a pro account costs $29 per month or $290 for a year.

5. Infogr.am

It's easy to customize the data in a chart or spreadsheet using infogr.am

It’s easy to customize the data in a chart or spreadsheet using infogr.am

Infogr.am is a great free tool which offers access to a wide variety of graphs, charts and maps as well as the ability to upload pictures and videos to create cool infographics.

Customizing the data that makes up the infographic takes place in an Excel style spreadsheet and can easily be edited, watching the software automatically change the look of the infographic to perfectly represent your data. When you’re happy with your infographic you can publish it to the Infogram website for all to enjoy and even embed it in to your own website or share it via social media.

6. Visual.ly

Visual.ly is both an infographics tool and a community of users.

This infographic was created by SuccessStory.com.

Visual.ly is both an infographics tool and a community of users.

Visual.ly is a community platform for data visualization and infographics set up in 2011. It allows you both to create infographics and get them shared on social media. The website is also able to match those commissioning infographics – including brands, companies and agencies – with its community over more than 35,000 designers.

7. VennGage

Venngage is very easy to use.

Venngage is very easy to use.

Venngage is a great tool for creating and publishing infographics because it’s so simple and easy to use. You can choose from templates, themes, and hundreds of charts and icons as well as uploading your own images and backgrounds, or customize a theme to suit your brand. The premium version costs $19.99/month. You can animate them too!

At the end of the day, many of these tools are similar and at a similar price point. If you need animation, then Venngage is probably the best bet. If you don’t need animation, it depends on your specific needs. For resumes, you are probably best off with Vizualize.me.

Terrible Web Design Trends and How to Stop Them

From LiveStrong yellow wristbands to Planking, the power of trends is undeniable. In our digital age dominated by social media and audiences with ever-shortening attention spans, these rapidly changing trends extend to web design as well. Continuously developing design and development technologies means that web design trends come and go quickly. While it might be cool to be an early-adopter, it certainly doesn’t pay to be a late-adopter or you will be left with a website with one of the following five terrible web design trends. Thankfully, most of these are not that common anymore.

Splash Pages

We’ve all seen a site that loads with sliding photography, blinking status bars, and a cacophony of visual excess. The thought behind a splash page is “Watch this long ‘short intro’ video to discover how awesome our website is!”

Hoping for a strong first impression, websites that adopt this practice of showing a splash page definitely make an impact. Unfortunately, it’s usually an overly negative one.

Splash pages waste time and delay people from accessing the real website content. Site users just flock to the “click to skip” link, or, in some cases, can’t even find it and decide to leave instead of waiting.

Conclusion:

A good homepage, information architecture (how the information is organized), and content strategy are all you need. Don’t waste precious time by showing users pointless filler content.

Web 2.0 Design

Rounded corners, reflections, drop shadows and gradients say one thing: 2005. As the Internet moves toward a flatter, harder-edged aesthetic, don’t let your site get stuck with an outdated look.

These days, dimensionality and drop-shadowing look soft and tentative. Skeuomorphism for skeuomorphism sake doesn’t really accomplish anything, other than potentially confusing your viewer with an over-complicated design. You can do better. Simplify your designs to make your interfaces more user-friendly and to improve UX.

Conclusion:

With major tech companies like Apple, Microsoft, Google and others going flat, the reality is that this is what users will come to expect.

Stock Photos

Good stock photos don’t actually look like a stock photo, but they can be prohibitively expensive. So, instead, we are often shown cold, lifeless fake photos of people.

Conclusion:

Use stock photography sparingly. If photos are needed on your website, try and take them yourself. If this is not an option, be very selective with your stock photography. Make sure that adding the photo is actually going to improve the look of your site instead of making it look like a joke.

MySpace-ification

Thankfully we don’t see this too often anymore, but in the mid-2000s, internet-savvy users were defined by the amount of personalization in their MySpace profiles. Unfortunately some web designers picked up on this trend, over-designing sites to the point of complete chaos.

Conclusion:

This one is simple. Just because you can, doesn’t mean you should.

Flash Sites

The strength of Flash is also its weakness. Though animations and movement definitely grab attention and can enhance the look of your site, they are also incompatible with many Web devices (all Apple products).

What good is a large amount of visually-stimulating content if many of your users can’t even see it?

With the maturation of CSS3 transitions and HTML5 standards, it is now possible to create impressive animated sites without the use of proprietary, closed-source software.

Conclusion:

It’s time to stop relying on Flash and get on board HTML5, CSS3 and JavaScript which accomplish many of the same things as Flash with less compatibility and performance issues.

Background Music

Some web designers want to engage their viewers’ senses, so they add some tunes to help build a connection. If you’re considering this, keep in mind two things: 1) some of your viewers have their sound muted and will thus miss out on your awesome jams, and 2) those that do have the sound on are likely listening to something else or looking to hear something specific.

Not to mention the potential issues with site loading speed, licensing, user experience, etc.

Conclusion:

Unless you’re a DJ company or a radio station, please skip the urge to add music to your site.

Popup Windows

I think we have all experienced the frustration of loading a webpage and immediately being bombarded with a trillion unclosable pop-up windows. It truly harms our experience on the site and makes us wary of coming back.

Unfortunately, today, popup windows are being reincarnated in the form of modal window overlays that open automatically and interrupt our reading experience. Check out Tab Closed; Didn’t Read to see a showcase of disruptive window overlays.

Conclusion:

Ads are a part of life, and they’re an important way for many sites to generate revenue. That being said, no one likes an ad that’s overly disruptive. If you’re going to use popups, use them sparingly, strategically, make sure they can be closed and don’t cover the entire screen.

Like any trend, what’s popular in web design comes and goes quite quickly. If you have a robust development and design team, incorporating current trends can make your site look fresh and relevant.

Just remember that trends have a shelf-life, and be prepared when it’s time to make a change. What’s hot right now could soon go the way of sparkly mouse pointers and site visitor counters.

For those who are more risk-averse (or strapped for time or by budget), it’s best to focus on more mainstream design ideas that will always look professional and be effective.