Your Marketing Resource

The 4 Screens Your Website Needs To Appear Correctly On

  • By Brad Poirier
  • 03 Feb, 2016

We live in a multi-screen world. Does your website also?

It's entirely possible, and very likely, that a visitor to your website could be viewing it from: a large monitor connected to a desktop, a small to medium sized laptop, a 10" tablet or a 7-8" tablet, or a range of smartphone screen sizes anywhere from 3" to 6". For some, they may even get to your webpage from a smart TV now, that's maybe 50-70" of screen space! How do you optimize your website for all of those screens? Do you even have to? Why can't you just have one website? Well, the good news is, you can actually have both. You can have one website that works for all the possible screens your website will be viewed on. Let me explain.


Why do you need a multi-screen website?

Let's start with the most important question here, and that's why you even need a multi-screen website. Let's take myself for an example. I'm a mid-thirty working professional. While I'm not addicted to my devices, I do use them throughout the day. At work I use a 13" Macbook Pro, connected to a 23" Cinema Display.  At home I use a Mac desktop connected to a 23" monitor. On the go I use an iPhone 6s Plus and also my iPad Air 2. (Yes, I'm a major Apple fanboy if you didn't realize). The point is, in order for your website to grab my attention and impress me, your website needs to be optimized for any of those four screens. From the "smallest" of the 5.5" iPhone 6s Plus to the largest 23" monitor and the 10" Tablet and 13" Laptop in between. That's a tall order. If your website is only setup to work on a traditional desktop monitor, I'll be super frustrated viewing it on my smartphone. Even though I'm very familiar with browsing through non-mobile websites, it's still frustrating to pinch and zoom my way through and then tapping on the wrong link because it's too tiny for my giant fingers that also probably has BBQ sauce all over them. Oh by the way, it's not just me. This infographic on mobile usage shows that 64% percent of the people who use their smartphone as the  ´╗┐primary ´╗┐ device to access the web, and a whopping 51% of smartphone owners between the ages of 50-64 use their smartphone as primary internet source. It's not just for the "facebook kids" anymore. EVERYONE is using their smartphone. Optimize your website to work on their screen, please.

One website for all devices.

The best part about all of this is, you can actually have one website that works for all device types. How is this even possible? Well, I would love to say it's some sort of harry potter trick, but it's really not. It's actually been available for several years now,  but it's only been since April 21st with Google's Mobile-geddon that people have started to listen and pay attention.

In a nutshell, you need a responsive website. A responsive website literally  Responds to the screen size it's being viewed on and adapts the content appropriately. It doesn't look so much and go: "well is this a smartphone, an android or an iPhone, is it a tablet or a laptop". It adjusts to the screen size. Want a quick and easy way to see if a website is responsive? Just open a website from your desktop browser and change the window size so it's really small, it should automagically respond and change it's appearance as if it's a smartphone. If it doesn't, it could be for only one of two reasons.  1) It's just not responsive at all and you need to update it.  or 2) It's actually a RESS website, or Responsive with Server Side Support, also called Dynamic Responsive Websites. Ok, mind explosion here. Let me break it down real quick here, but if you're feeling brave, check out this blog post on the full details.

Responsive with Server Side Support basically looks at your device type and can CHANGE the content per device. That's how Breeze Digital Media builds all of our websites with, as it is the best way to do so. For instance, while it may be engaging to have a large background video auto-playing on a desktop with a fast broadband connection, it may take a while to load if someone's on a smartphone with spotty coverage. So let's have the smartphone offer the video as a "play" button instead and increase the user experience. Or how about smartphones. Did you know that the single most common action taken on a smartphone is to get the phone number of the business to call it? So let's display a Click-To-Call button on the smartphone, but not show it on a desktop or tablet because well, you won't be calling from your desktop or tablet. Unless of course you are me, and you have Apple's hand-off enabled on your desktop to transfer calls to your smartphone. Enough of that fanboy stuff. The point is, we can tailor the experience for your customer based on the device they are viewing it on so it's not only responsive to the screen size, but it's also adapted for the device type.

Want even more performance than that? Of course you do, who wouldn't. Let's take that a step further and also dynamically change the content, based on visitor behavior. Even more mind-blowing, we can change the content based on triggers such as time of day viewing, amount of visits to your website, geographic location, or even a campaign URL. So let's say your a restaurant and it's 12pm, why don't we show your customer your lunch menu right away, since that's likely what they're looking for at that time of day. It will only show during lunch time, and it will show the dinner menu starting at let's say 5:00pm, all done automagically.

Next Steps?

While this may sound a bit technical at first, it's really not. I promise you. We speak human. We speak local business. We speak YOU. Let's work together and come up with a solution that works for you. Let's get your website working on every screen out there and give your customers a fantastic experience and convert them from a visitor into a customer.

Contact Us

Connect With Us

What's Your Marketing Score?

Contact Us

Breeze Digital Media News & Resources

By Brad Poirier 07 Mar, 2017
Did you know that the average consumer checks your website at least two times from two different devices before they journey into your location? Over 60% of searches start  from a smartphone device , but there is still a great amount of desktop and tablet traffic coming in. Why is that? Some of that desktop traffic is the original, organic traffic yes. However, a lot of it is a returning customer. Perhaps you're a kitchen remodeler , someone searches for "kitchen remodeling" and they find your website from their smartphone. They're not ready to buy yet though. So they bookmark or they email their significant other the web address. When they get home, they venture to their desktop or start using their tablet to continue the research.

Most (amateur) web designers only pay attention to the desktop view. Sad face: many web designers still build websites that are desktop only, they're not building responsive websites that are mobile-optimized. The worst part is they're often designing this on a 20" or larger monitor. Of course it's easy to design a great site when you have 20" of a digital canvas to work with. The real Picasso comes out when you can take that same great experience and display that on a 4" screen, AND to optimize it for as slow as a 3G connection. There's a big difference between your site being mobile-friendly and mobile-optimized. Mobile-friendly usually just means making sure the content is formatted to scroll up and down and no content stretches beyond the width of the smartphone screen. Mobile-optimized is taking the same content from your desktop and optimizing it for a mobile experience. This is important now more than ever, as Google has started to ONLY SEO Index your mobile site and not your desktop site.

So that's the why I design websites using four screens. You might interested in knowing what are the screens I design with, and how I use each one of them to turn your website from blah to Yahhh! I only build websites that are responsive. I check how the content looks and how the content interacts along the way. Below are the screens that I use to check this with and more importantly, the order in which I do this.

Screen #1 - Smartphone
You might be shocked to think that the first screen I check my work on is a mobile device. If you were a bakery and 60% of your revenue came from donuts, would you start your morning by prepping the cookies and pastries? You start with your money maker! Well, since over 60% of all Google searches start from a mobile device, why would you start with the device that people aren't using as much? I'll tell you why, it's because you're working with an amateur designer. Or perhaps you're working with a legacy designer who won't budge. When I design in a mobile-first environment, I can truly focus on that experience and maximizing it's potential. We focus on getting the most important information right away. For most businesses this means placing a "TAP-TO-CALL" style button at the top of the page. Nothing is more frustrating than having to remember the number in your head and quickly double-tap-your-home-button to get to the phone dialer and attempt to get every number in there correctly. If location visits are important we also make sure there are easy-to-find buttons for loading your bulit-in GPS navigation.

What do you think the next screen is going to be?

Screen #2 - Tablet
Did you guess that correctly? It's only natural to work my way up the screen size. Now that I've mastered the experience for mobile, I can open up canvas a little here and work on the tablet view. Tablets today range from about 7"-10" and yes there are those two outliers that are around 13" , but they're still a tablet, at least according to the internet browser being used. A growing trend for the tablet view is using what we call the "hamburger" menu. That's the 3-line menu button you might see in the upper right or left hand corner of the screen. We layout the navigation in both the hamburger format and the traditional horizontal navigation. It all depends on the business and the goal of your website. That's why we custom design all of our sites starting with a 1-on-1 consultation . Since a tablet is still inherently a mobile device where the user interacts using only a touchscreen, we still are focusing on easy, tappable buttons. Consumers are used to tapping on items with their tablets, we make it super easy for that to happen. Gone are the days of only making links available from within the text. Consumers need clear call-to-action buttons to guide them along their buying journey.

Screens #3 & #4 - Laptop & Large Monitor
Technically I'm designing and coding everything on my large monitor, but the testing is being done on multiple screens. However, when I start to design for the desktop, I'm using my laptop which dual outputs to a 21" cinema display. This allows me to have the freedom of design but to see how it will interact on a 13" monitor (which is about the average monitor size for a small laptop). The most important content is "above the fold". So if it's not designed right, some of the content that looks good on 21" would normally get cut off on a smaller screen. We make sure that doesn't happen. The desktop design is where it does get a lot more fun, and more roomy. It's like trying to pack a bunch of moving boxes into a cargo van when you've been using your 1988 Corolla earlier that day. Ahh, you can breathe a little. However, use this space carefully. Remember, with great space comes great responsibility. I've seen many web designers who came from a graphic design background. It is honestly a natural progression, but it's an entirely different approach. Use a white space or negative space is critical here. So if you're used to working with that graphic designer who loves using tons of colors and turning text into metal like beveled art and everything else that came with cheap Photoshop work from 10 years ago, they're in the wrong arena. You have about 5 seconds to capture someone's attention before they'll decide to leave the website. Now, a lot of that comes from excellent copywriting and headline writing , but bad design choices will confuse the consumer and cause them to leave and go to the next result in line.

So there you have it. The method to my madness. Some people look at website design and say why not , I look at website design and say why ? Rule of thumb: Just because you can do something, doesn't mean you should. I'm on the web all day long. I can easily spot a badly performing website, in terms of conversion. Today, you're website is all about conversion . Your business can't afford to run a wiki-pedia website. It needs to be a lean, mean, lead-generating machine. This applies to all business websites.

What are some examples of good and bad website design that you have seen?
By Brad Poirier 20 Feb, 2017
BONUS: See how your website stacks up with your competition. Get a free website audit .
By Brad Poirier 13 Feb, 2017
The great Don Draper once said "If you don't like what is being said, then change the conversation." So while it may be super frustrating to see one of those pesky millennials leaving you a bad review because their Valentine's dinner didn't go as planned, this presents a great opportunity to turn lemons into lemonade. Negative reviews are just as important as positive reviews. How could that be?

Google loves reviews. The more Google loves you, the better chance you have of another Taco.. or three.. four. A bad review isn't always a bad reflection on your business, it's just consumers way of giving you feedback or reaching out for a listening ear to make a wrong, right. In all the years I've been on Yelp and Facebook, what I've seen that most people want when leaving a review, is just to have a voice. When I go out to a restaurant or to any retail business these days, if there's a problem and I muster up the courage to speak to a manager, I have no idea how that manager is going to take that feedback. They might be too busy to pay attention or just lack the customer service skills required to actually care.

That's where online reviews come in. Some may think that it's a case of anonymous bravery behind a computer screen, but when someone is leaving a negative review, they might just want to get in touch - on their own terms. You have to be prepared to communicate with them on those terms.

Below are some general do's and dont's on how to respond to negative reviews. By the way, this could apply to positive reviews in many ways. You should respond to every online review, both positive and negative. Yes, it require a little bit of time, but you would never ignore a customer that's right in front of you. It can be a daunting task, however, to scour the internet for every review out there. That's why there is Online Reputation Management available. Reputation Management involves software that automatically finds any mention of your business on the internet and provides an alert and a tool to respond to them, regardless of which social media directory they left the review on. Learn more about Online Reputation Management here .
By Brad Poirier 28 Dec, 2016
Quick Question: What's the first thing you did this morning when you woke up. I'm willing to bet it involved picking up your smartphone and performing some sort of mobile action, wether it's checking email or scrolling through Facebook or Instagram. We are in a mobile-first world. If you're still trying to figure out how to get ahead in this "digital world", this article is well beyond that. The world is (rapidly) shifting to a mobile world. You need to provide an incredible experience on a 4" display as you would on a large display. That's the trick and the problem SMB's have faced. You're not paying attention to your mobile experience.

You might be immediately saying: "Well my website is already mobile." Great, you're (slightly) ahead of the game. It is very likely though, that your website only uses a "mobile site" and not a responsive website design. Mobile-sites are simply optimized for viewing on a phone, they're not optimized for the user experience. Starting pretty soon, you're website's traffic will get killed for it. Listen up.
By Brad Poirier 20 Dec, 2016
Let’s face it. Personal New Year’s resolutions are made for one thing: to be broken. Only 8% of people are successful at achieving their resolution. The #1 resolution each year is to lose weight . The struggle is real when you are faced with eating a 3,500 calorie pizza for lunch and a wedge salad. Pizza. Always. Wins. Your business resolution, however, has a much better chance at success. In fact, this article will show you how to have a guaranteed 100% success rate in your business resolution for 2017.
By Brad Poirier 12 Dec, 2016
Hearthside is an award-winning historic house museum presenting historically themed exhibits and original programs. Costumed docents guide visitors on tours, furnished throughout in period style. Hearthside is listed on the National Register of Historic Places and operates under the stewardship of the all-volunteer nonprofit Friends of Hearthside, Inc.

The website for hearthsidehouse.org utilized old web standards and was not mobile optimized. The website could not be edited by the museum stewards and thus was a tedious process to get new content.

Breeze Digital Media created a responsive website for Hearthside House and implemented an easy to use Content Management System so the stewards can make regular calendar and event updates on their own.
More Posts
Share by: