Video Transcript

00:00:00:03 – 00:00:32:00

Welcome to the GetNetSet Website Building Video series for tax and accounting professionals, where we cover all the essentials of creating a site that helps you grow your business. Today we’re going to talk about ensuring that your website looks great and performs well on all screen sizes, including smartphones. This video will explain multiple ways that a website can be adapted for mobile devices and why this issue matters so much.

00:00:32:09 – 00:00:57:14

Let’s start with the basic facts about how people interact with websites today. Statistics show that 60% or more of Internet users access the web on their phones or tablets. While the exact numbers are hard to pin down, as a conservative estimate, it is safe to say that at least half of the visitors to your site will be viewing it on a small screen.

00:00:58:11 – 00:01:33:04

A site that is hard to use on a smartphone could alienate these visitors and cost you opportunities to land new clients. Furthermore, search engines like Google typically favor sites that display nicely and function smoothly on both large and small screens. We have an entire series of videos on search engine optimization or SEO, so please check those out to learn more about how search engines work and how they affect your ability to attract new clients.

00:01:33:10 – 00:02:00:13

For now, just know that ensuring that your site works well on small screens can increase the number of potential clients who find it. Now let’s look at why some websites do not perform well on hand-held screens. I have a screenshot here of a demo home page and will imagine for the moment that it was designed without regard to how it would look or work on small screens.

00:02:01:05 – 00:02:41:06

The most obvious problem with such a design is that if I shrink the window to simulate a smaller screen everything shrinks proportionally, including the fonts. Without some adjustments, the web page would become a cruel eye test when viewed on a phone screen. But that problem is only the beginning. The next major issue is that a smartphone screen is not just far smaller than a desktop or laptop screen, but as this superimposed rectangle shows, it is naturally oriented the opposite way. In printing language,

00:02:41:12 – 00:03:19:14

computer screens are in landscape orientation, while phone screens are set up in portrait orientation. So not only would a small screen mean tiny printing, but it could also result in pages getting cut off and images being badly distorted. Imagine the effect that might have on your profile picture. Sites designed only for large screens may also cause problems with site navigation on mobile devices, as well as great difficulty using interactive site elements like a contact form.

00:03:20:09 – 00:03:57:13

In short, the site won’t just look bad– to some extent, it might not even work. So now let’s talk about some of the ways that website developers solve these problems. At the low end of acceptable small screen performance, a website creator might make some basic adjustments to font and image sizes. Used carefully, these techniques may help ensure that most phone and tablet users can comfortably read the site’s content and at least some of the site’s features and forms work on small screens.

00:03:58:13 – 00:04:31:10

One of the most basic methods is simply making fonts large enough that they will still be readable when a website shrinks down to smartphone size. Headers, footers, images and sidebars can also be formatted so that they don’t eat up too much screen space. However, these steps alone do not guarantee that images will look right or that visitors will be able to use interactive site features without difficulty. Moving one step higher up the ladder,

00:04:32:00 – 00:05:08:00

a website may be partially optimized, meaning that it is optimized for specific common phone screen dimensions. A site designed in this way will generally display nicely and work smoothly on quite a few different mobile devices. Often partially optimized sites actually exist in two completely different versions– one for large screens, and one for mobile devices. In many cases, the mobile version of the site has a completely different layout than the desktop version.

00:05:08:07 – 00:05:48:00

For example, images might be sized differently and arranged differently on the page. The mobile and desktop versions may also use different font sizing, so that text is neither ridiculously tiny on a smartphone nor huge on a desktop computer. In addition, the mobile version of this site usually has a different setup for menus. For example, this menu on our demo homepage might be reformatted so that only the word menu is initially displayed. When a user clicks on the word menu,

00:05:48:08 – 00:06:18:11

then the other headings like Resources and Client Portal come into view. This setup prevents menus from crowding out other content on the screen. OK, so this all sounds great, but how well does the site work on a phone with unusual screen dimensions? Often users of these devices will have a hard time using some of the website’s features. And how is the experience for tablet users?

00:06:19:06 – 00:06:46:13

Do they get the mobile version of the site, which may seem oversimplified for their screen size? Or do they get the desktop version which may seem overcrowded and awkward to use? These are just a couple of the problems that can arise with websites that are only optimized for specific small screens. So let’s take one more step up to the top of the small screen performance ladder.

00:06:47:09 – 00:07:30:09

The gold standard for website performance on small screens is full mobile optimization, which is sometimes also called mobile responsiveness or responsive design. A website designed in this way adapts nicely to any screen size. Fonts, images and all other site elements automatically adapt to fit a wide variety of devices. If your website is designed using this approach, then visitors using desktop computers, laptops, tablets of various sizes and phones will all feel like the site was created with them in mind.

00:07:31:02 – 00:08:03:00

So let’s see this design principle in action. Here we have the actual GetNetSet demo homepage which, like all of our sites, was built from the ground up with a responsive design that fully optimizes the site for all devices. Notice first that as I resize the window, the text reformats instead of just shrinking. As I continue resizing, the entire page layout begins to change,

00:08:03:04 – 00:08:40:10

rearranging for optimal performance at each size. And now watch the menu bar as I shrink the window down towards smartphone dimensions. Just like we talked about with partially optimized site designs, it condenses to this single button labeled “menu”. When I click on it, the full menu appears as an easy to use sidebar. In short, this responsive design incorporates all the basic ideas of mobile optimization and adds many more advanced optimization techniques.

00:08:41:11 – 00:09:17:00

The design makes it possible for every visitor to have a positive experience interacting with your site, regardless of which device they’re using. Again, to learn more about how a fully optimized responsive design can also boost your website’s overall visibility, please see our videos on Search Engine Optimization or SEO, and if you’d like to learn more about how GetNetSet’s website designs perform on screens of all sizes, our team would be happy to speak with you.

00:09:17:11 – 00:09:29:07

Otherwise, we hope you found this introduction to optimized and responsive design concepts helpful. Thank you for watching and we will see you in the next video.