That screenshot at the left shows what you see when you currently (as of this writing) use your smartphone to access the City of Spruce Grove’s website (sprucegrove.org). Doesn’t look very helpful, does it? What you’re actually seeing is the top left corner of the site’s homepage. Were you at a desktop or laptop computer, clicking the button at the bottom of this page would show you what the fully-shown same page would look like. With your smartphone, it’s kind of like having a periscope available to you that only lets you see a small percentage of the page. In order to see other parts of the page you have to use the scroll bars at the side and bottom. Very cumbersome and, of course, navigating and clicking hyperlinks on such a page is almost impossible, essentially shutting out a large portion of your audience.
As smartphone – and mobile tablet – use grows, so does the possibility that your website is going to be viewed by someone with a screen that’s has a considerably smaller resolution than that of your desktop computer! Websites that aren’t mobile-friendly are automatically penalized by search engines such as Google; if they’re not guiding their user to a website they can use, what’s the point?!
The term that’s commonly used by website designers that indicates a website has been designed to be used with a variety of screen resolutions is “responsive.” As the screen width decreases when the site is displayed on a tablet or smartphone, the content of each page adjusts itself to fit properly and remain readable and navigable. You can mimic this situation to some degree if you’re at a desktop or laptop computer: Put the browser screen into a resizable window and drag from the left or right edge to make the window narrower. Do graphics and text on the page all readjust properly so that they’re readable? If so, then the website has been built to act responsively.
Note: Sometime in mid-2018, the City of Spruce Grove did a total renovation of its website and it became 100% mobile-friendly.