Sport Trivia Challenge, a new Mobile Website

Sports Trivia has a new Mobile Website home, www.sporttriviachallenge.com.

We just launched this new mobile optimized game for all sports fans.  Test your skill in a game of Sports Trivia or take on your friends in a Challenge.

 

What Year Does Your Footer Say?

Following up on our Website Resolutions post from a few days ago, we have another resolution, update your footer copyright message to the current year. I was looking at a friend’s website yesterday, he’s in the financial services business, and the footer copyright still had 2013.  Would you take advice from 3 years ago?

So go and update your footer.  There are the quick and easy ways, manual, guaranteeing you will forget sometime in the future.  Then there are programming solutions that will take care of it once and forever.  Choose the right one for your website.

Manual Update

The quickest way, for right now, is just to go in and make a manual edit.  If you are using WordPress, your theme likely has an option for this, either a footer widget, or a copyright field under Appearance.  Just change 2015 to 2016 and save the change.  Then set reminders in your calendar to go and do it again at the stroke of midnight every New Year’s Eve.  Got something better to do on New Year’s Eve?  Then we suggest you see the suggestions below to add a little website programming to auto update the year.

PHP  Method

Many websites are built using the PHP website programming language.  If you purchased the code for the site layout, then likely you have a footer function or a template that contain the header, navigation, and footer for your site.  Simply add this code to the footer section in template or function to replace the hard coded copyright date:

Copyright &copy; <?php echo date(‘Y’);  ?> Your Company Name

If you only want to replace the year, just put this:  <?php echo date(“Y”); ?> where 2015 currently is.

If you are using WordPress, you can usually find the copyright notice in the footer.php file.

PHP is a server side scripting language so the date is going to be based on the location of the server.  It is possible to adjust the date formatting to allow for your timezone, but that is more complicated than we care to cover in this post.

JavaScript Method

Similar to using the PHP code above, copy and paste this code to where you want the copyright notice, along with the date automatically updating.

Copyright &copy;<script type=”text/javascript”>document.write(new Date().getFullYear());</script> Your Company Name

JavaScript is a client side scripting language so the date is going to be based on the location of the user, and the date setting on their device..

Website Resolutions 2016

Are you all set to go with your digital marketing plans for 2016?  Surprisingly, many marketers begin their annual marketing planning in January!  By the time you plan, develop, and implement, it’s almost February, leaving you 11 months to get 12 months of results.

Start Digital Marketing on Day 1

Here are 3 website resolutions to get you started for 2016.

  • post 2 blog articles a month
  • commit to responsive website design
  • add easy SEO content once a month

2 Blog Articles a Month

A good blog article should take you between 1 and 2 hours to write.  Up front, spend a little time on researching any facts you want to include in your blog post.   For example, here’s a researched fact: a blog post which takes 7-minute to read will have around 1,600 words.  A little simple math then and if you think you can hold a reader for only 3-1/2 minutes, shoot for about 800 words.

Need some blog post topics?  Go talk to your customer service or sales team and ask them to tell you the most interesting story they have heard from a customer in the past week.  It may be a problem waiting for an answer, or a problem your company solved in an interesting way.  Use it!  Make it your inspiration to pass on some meaningful real-world helpful advice.

Need another blog post topic?  Walk into the accounting department and ask someone what was the last supplier invoice they just paid.  Then go and write an article about why that supplier is important to your business, and how their product makes your product better.

Commit to Responsive Webdesign

Okay, this is not a 2 hour project like writing a good blog post.  This may be the most important challenge you take in 2016.  In a recent study we performed on our own customers, the device used to access our customer’s websites the most often was a desktop computer, followed closely by a mobile phone.  Depending on the nature of the customer’s business, the two devices are now approaching equal use for searching and browsing the web, including your website.

A responsive website design adapts the display and navigation to the device, making for a better user experience.  Also, Google now tests your website for it’s “Mobile Friendly Test” and factors this in the search rankings on mobile searches.  If your website is not yet responsive, add this to a project you need to start in the first quarter of 2016.

Add Easy SEO Content Once a Month

Search Engine Optimization is about convincing Google that your website pages offer value to users, on topics they consider important.  Nothing influences Google more than providing great content to your users.  We have already talked about writing a couple blog posts month, above.  Now let’s talk about more permanent content.  Page content tends to come in a few forms, promotional, transactional, reference, and educational.  Promotional content includes your pages on your product descriptions, generally explaining what your widgets do and why your widgets do them best.  Transactional content helps to instruct users through a process or series of actions, such as ordering a product.  Reference content may be certifications or standards that your business conforms to and posts for credibility.  Educational content is different from all these in that the purpose is simply to inform, to help your customer better understand the how and why of your products, or other products like them.  Consider adding content to your website which explains common terminology in your industry, which may not be common language for your customers.  Something like a glossary of terms or definitions.  If you offer products, include pictures of the items or components.  An educated customer is further along the buying cycle and if you provide the education, your brand is associated with being an expert.  This itself is a great benefit.  Now add to this the fact that Google loves this kind of content, and you have a double win.

Need another page topic?  Grab any instruction manual your company provides and read it twice.  Now write the second page of instructions from memory.  Did you get them right?  If you can’t remember the instructions, then they are to complicated.  Write a supplement to the manual in easier language to make it easier to use.  Again, easy SEO content that is useful for your customers.

It’s 2016, Get back to Work

Now you have a few ideas.  Get to work on your content, and get your website set up for any device.  Don’t wait for February!

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.

 

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.