Web Design

New Responsive Website – PRTox

See our Portfolio article for a new website project to deliver a fully responsive website design for PRTox Consulting.

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.

 

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.

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.

Recovered Website for Bear Creek Outfitters

See our latest customer portfolio item regarding a website recovery project for Bear Creek Outfitters.