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.

Recovered Website for Bear Creek Outfitters

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

New custom website for HeadHunterOutfitters.com

We have just launched the new HeadHunterOutfitters.com, a custom built website for a Saskatchewan Whitetail Deer and Black Bear outfitter.   This client was in need of a new home for their website, plus website management and came to us because of our ability to get other outfitter websites ranked well on search engines.  The client’s site had been out of commission for several months.  We were able to work with the previous webmaster and to restore and enhance their site with new image galleries and updated hunting information.

You can see more in our portfolio.

New WordPress Responsive Site

Check out the new website for Chatterson Wealth Management.  This project combined custom website development along with using a WordPress responsive theme and Search Engine Optimization.  More information is available in our client portfolio.