Mobile First

In a recent meeting with a client, he was describing the several year process he had to go through to convince the rest of his executive that a shift from traditional advertising to digital advertising was essential for the growth of the company.  As we reviewed the website analytics of their sites, we identified a couple of significant trends.  The first, and most obvious, was that digital traffic is still in a growth phase.  Across the board, across 6 websites, traffic growth was up.  Increases in organic traffic, referral traffic, PPC traffic and social traffic.

Our analysis of their web traffic started at the desire to answer three questions.

  1. Where did they come from? (source)
  2. What are the doing on our site? (content)
  3. What are they on? (device)

Digging into the third question was the most insightful.  The stats related to the first two questions were mostly similar to previous.  But the device usage among their customers is showing very strong trends towards mobile usage increases, in fact, on several sites, mobile has become the device of choice.

Testing Mobile User Growth in the Real World

But one customer does not reflect a whole market, so we did a similar analysis on nearly all of our customer websites, looking to confirm the trend to mobile is reaching the tipping point of mobile being the dominant website access device.  We wanted to confirm this using actual users, a real-world set of data based on customers here.  Based on what we observed happening with our own customer base, we re-phrased the “Digital Shift” to the “Mobile Shift“.

Tablets are not Mobile

We do not believe in classifying Tablets such as iPads as mobile.  While many studies will include just about anything non-PC as mobile (that is, not a desktop or a laptop), we disagree.  We only count mobile phones as truly mobile devices as we believe the majority of tablets are used only in what we call “local mobile mode”, that is, moving around the house or office.  This differentiates Mobile as truly transportable and focuses the attention on mobile user stats where we believe they belong.

Mobile Shift Leads to Digital First Thinking

With mobile now, or nearly, the primary device used to access websites, this leads to a much different mindset from traditional website design and information architecture. While mobile bandwidth with nearly ubiquitous 4G / LTE cellular access now eliminates the mobile choke point, the primary consideration now shifts to display usability.  A laptop, desktop, or tablet has a comparatively large viewing surface.  As big as the new smartphones are, they still do not.  Which means to truly cater to the customer, on the device they are choosing to use, means viewing your website through a Mobile First approach.

Mobile First is not the Same as Responsive Design

Responsive design is the current design methodology used on most modern websites.  Build a website with upscale design, high impact graphics, amazing image / slider transitions, cool menu builds, and then let responsive design adapt it to mobile devices.  This is OK, really, it’s OK, but it’s backward.  It still results in a useful user experience, one which permits the user to navigate on their phone with relative ease, without constantly zooming and sideways scrolling to access navigation and key features or content.

It also helps you pass an increasingly important test, the Google Mobile Friendly test, which will help you maintain good positioning in mobile search results.

Mobile First is About the User Experience

So, now shift your design criteria, and your approach to information architecture to the user, the mobile user.  A mobile user sees less content in one screen and needs to scroll more to see some of the content a laptop/desktop user will see “above the fold”.  It is important that you do not make your mobile website visitors work harder than necessary to get the job done.  Make sure that your Call to Action buttons and links are all readily available.  One first consideration is to put your phone number, address and email (or at least an easy link to them) at the top of your page header, every page.  Consider the user driving down the road (let’s call them passengers), phone in hand, who needs to find your location or phone number.  Position this at the top of the page for easy access and you will notice an increase in phone inquiries.  Make sure your phone number is a tel: formatted link.

Continuing to think about making the life of a mobile user more convenient, put the other action buttons where they will be found at key times during the user experience.  Put your Buy Now buttons, Contact buttons, Get Help buttons near the most important content on the screen, such as near product images or prices.  Think through the visitors sequence.  Locate the product wanted, select options, view the price, decide to buy, click the button.  If your user has to scroll their screen sideways/up/down, you will guarantee you lose sales.  Do not assume your visitors know which way to look, based on where on the desktop display the action buttons can be found.

Measuring Mobile First Success

Mobile first is about getting the user to their desired place on your website, efficiently and easily.  Most user engagement reviews will suggest that measurements such as time on site and page views are important in measuring engagement success.  However, think differently about how you approach mobile user success.  Consider the objective is to get the user the page (content, function, etc.) they want, and allowing them to perform the action desired with the appropriate effort.  Shift your success criteria not to quantity but quality.  How often do mobile users access your high value pages?  If you have a product oriented website, how often do your deepest pages get viewed?  If you have an e-commerce site, are your customers making purchases from mobile?  A customer who visits your site on a mobile device, drills down to a product page, and makes a purchase, is a more valuable visitor than one who views 10 pages and spends 7 minutes on your site.

Viewing and Reviewing Mobile First Design

Until Mobile First is ingrained as your approach, force yourself to toss aside the mindset of the desktop view.  When designing, avoid using a full screen desktop display to confirm your design changes have taken effect.  Instead, shrink your browser width to 320 pixels wide, or 480 pixels for landscape view.  I like to have two browser windows open, one at the portrait width and one at the landscape width, and refresh each with every change to cover both mobile views as I go.  At the same time, have your smart phone handy and frequently refresh your view.

BlueHazeHuntClub.com – Website Recovery

Read about our newest outfitter website recovery project for Blue Haze Hunt Club in our Portfolio section.

This is our 6th website recovery project for outfitters over the past 3 months.

Responsive Website for txdeerhunt.net

An existing customer called us up and wanted to be more aggressive marketing their Texas Whitetail Deer Hunting.

The project included developing a Google AdWords campaign and a fully responsive website based on our “Mobile First” approach.  The site design, content strategy, layouts, and image galleries were all optimized for mobile.

See more in our Portfolio.

What is a Mobile Viewport?

I have had a few inquiries from other web developers ask me what is a mobile viewport and what does it do?

Most important of all, this is a meta tag that Google looks for and uses when determining if your site is Mobile Friendly.  If Google does not find this meta tag, then you will not pass the Google Mobile Friendly test which can negatively impact your positioning in mobile search results.

What the Mobile Viewport Does

From a functional stand point, the mobile viewport sets the initial zoom level of a webpage, when viewed with a mobile device.  Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.  That means your website, when viewed on a mobile phone, will simply be a tiny, illegible version of your website layout.  The mobile viewport should be on each page of your website in the head section.

One key aspect to understand is that the mobile viewport meta tag is ignored by desktop browsers.  Including this meta tag will not alter the desktop view of your site.

The Mobile Viewport is most useful when used within a responsive website design scheme.

Mobile Viewport Code

The basic or standard use code for a mobile viewport meta tag is as follows:

<meta name=viewport content=”width=device-width, initial-scale=1″>

The setting content=”width=device-width” instructs the page to match the screen’s width in device independent pixels. As mentioned before, this is most useful in responsive designs as this allows the page to reflow content to match different screen sizes, and adjust to the orientation of a phone, landscape or portrait.

The setting “initial-scale=1″ tells the browser to use an initial zoom scale of 1:1 between the device independent pixels and the css pixel settings.  This also allows the user to control the zoom level after initial page load.

Advanced Settings – Max Zoom

It is possible to set the minimum and maximum zoom level of a web page as well as completely eliminating the users ability to zoom a page.  These may be useful features in some case where you need to control the display size, but are not typically used and not normally recommended.  It is also possible to set the viewport to a fixed width, which could be useful if a web app is built for a specific device such as in a commercial setting.  Another instance may be when a website is not built with a responsive design, but instead has a separate mobile only set of pages.

 

Top 5 Tips to Optimize Images for SEO Value

When it comes to SEO, you want to take advantage of every tool, of every SEO asset that you have.  Your images are an asset you can leverage for better SEO results.  The fact is, most websites do not have images optimized.  There are two main reasons for that.  The first is simply not knowing that it is important, and relevant, to SEO.  The second is that it is just plain easier to not bother.  Working with images can be time consuming, especially if you already have a bunch of images loaded to your site.

Search Engines such as Google do not interpret the graphical content of your images files.  They do not know that your picture of a red convertible is anything but a an assortment of pixels.  So, in keeping with the theme of making your site content blinding obvious to Google, we need to offer some assistance.

So, below we have listed our guidelines for image SEO optimization.

1. Image file name.  Probably the most important, and the easiest to work with, before you load up your images.  The proper time to properly name your image files is while the file is sitting on your hard drive.  If your phone is your camera, you will often end up with images named, image.jpg.  If you use a standard digital camera, you may have images named something like IMG_2301.JPG.  Google has no idea that this file is your red convertible, and that IMG_2302.JPG is your daughter playing on swings.  So BEFORE you upload the file, change the name to something descriptive and something unique (in respect to all the other images on your website).  “red-contvertible.jpg” would be a far better name.  Try to incorporate the primary keyword of the page into the file name, without going overboard.  If the page is about red cars, and you have other pictures of red cars on the page, a suitable name would be “red-cars-convertible.jpg”.

2. Use the files attributes to provide information about the image files.

  • Always add height and width to the image
  • Always add an Alt-attribute to the IMG-tag
  • Always add a Title-attribute to the IMG-tag

Using height and width tells the browsers how much space to allocate for the image in the page rendering and prevents pages which bounce around on loading as images push the content around.  This is a better user experience.

The alt attribute was originally used to be displayed as text when a browser is set to not load images.  More importantly in a broadband world, if the image is a link, then the alt text is used by browsers as the link anchor text.  Additionally it is used by search engines as a hint towards the on-page content.

The title attribute is not generally used by search engines, but often will be displayed when a user mouses over an image.

3. Size the image for it’s use on the page.  If you have an image that is 1000 pixels x 400 pixels, and you shrink it down to 500 pixels by 200 pixels using html, you are simply distorting the image and slowing down your page load speed.  Page load speed is increasingly becoming a ranking signal in search engines.  Slower loading pages can get ranked lower.  This is reported to be even more important in the new “Mobile Friendly” rankings on Google.  Images over a cell network can dramatically increase the page load time.  If you need an image 500 pixels wide, use your image editing software to create the proper sized image.

4. Make the Image a Link.  If you have larger versions of images, for viewing full screen, link to them from the smaller image of thumbnail.  Where it makes sense, use images for navigation assistance.  Remember, the alt text attribute will be used as the anchor text in the link so make proper use of it.  In this case, the alt text should be relevant to the image you are displaying, but even more relevant to the page you are linking to.

5. Use the proper image format.  The larger the image, and the more complex the color range, the more important it is to use the jpg format, as opposed to the png format.  png image file format results in larger file sizes (more bytes) as colors are added and dimensions increase.  png files are an excellent choice for logos and icons, which often are positioned to overlay other images or backgrounds.  These files tend to be smaller, and the color schemes usually are monochromatic or are limited to only a few colours.  Use jpg files everywhere else.

 

Custom HTML Web Site – mikeshuntingadventures.com

We have just helped another hunting outfitter to relaunch their website.  All the content of www.mikeshuntingadventures.com was under a different website name, owned by the same outfitter, but they wanted a name change.  The old website had gone dormant as the previous provider was no longer in the website business.  We were able to recover the site from a website archive of the files and restore it on a new domain.  From initial phone conversation to fully complete website was less than one week, including numerous updates to the website content.

Our tagline is “We Make Website Work Better”.  In this case, we took a website that no longer existed and made it work again.

————————-

In addition to having their website back up and running, as a hosted website customer on PrairieOutdoors.com (our outdoors marketing division), they also qualify for the free Premium Listing, free Featured Outfitter banner displays and the exclusive TripFinder service.

See more information on Outfitter Websites by PrairieOutdoors.com.

SEO Project – Dr Chris Thomson

We are usually not shy in telling our audience when we have completed another project and have achieved positive results for our clients.  Like our slogan, “We make websites work better”.  Well, we’ve done it again, with the SEO project component of the new website launch for Dr. Chris Thomson.

See the previous link for more detail posted in our portfolio.

New Responsive Website for Studio 8

Just launched and gaining traffic already is the new website for Studio 8 Designs.

You can see more in our Portfolio.

How to Choose a WordPress Theme – 5 Tips

WordPress is one of my favorite software packages.  Not just for the actual usefulness of WordPress itself, the core files, and the Content Management System framework, but also because of all the website themes and plug-ins that have been developed by third parties.

If you are going to acquire a theme for use on your site, here are our top 5 Tips for WordPress Themes

  1. Responsive is your #1 priority in theme selection - Don’t even consider a theme that is not fully responsive.  Google Webmaster recommends responsive websites.  In late 2014, the search traffic on Google from non-desktops passed the 50% mark and still on the upward trend.
  2. Be SEO friendly – Many themes indicate that they are designed to be “SEO optimized” or “SEO ready”.  This often means they have made it easy in their theme to edit the “SEO Assets” of a web page.  In addition, we also recommend that you add an SEO Plug-In called Yoast SEO and learn how to use it.
  3. Buy the Premium Version – Always buy the premium version of the theme.  Many themes are available in a free version, which is stripped down and does offer any support.  Premium versions will give you access to unlimited use of the best features as well as assistance from the theme programmers.
  4.  Easy customization – Almost every website has some custom elements, so choose a theme that easy customization options, such as a custom CSS box, a variety of color schemes, logo file uploader, background color and image options.
  5. Choose a theme with all the sub page layouts you will need - Some themes only come with a couple of page layouts, such as full width, left side bar and right side bar.  Others, premium themes, include these, plus gallery pages, contact pages, and more.  You may not need more, at least not now, but if you are choosing between two themes, pick the one with more pre-built page layouts.

New Website for Alstott Outfitters

Just posted in our portfolio, details about the new AlstottOutfitters.com website project.

Click to See More.