Dear CSM : I Built a new Page, but on my Laptop it looks *WAY* different! What do I do?

Question: I spent a ton of time making a new department page, but when I view it on my laptop, or on any wider screen, it looks really different! What can I do to make sure my pages look better, regardless of screen size or screen resolution?

Answer: Page responsiveness is awesome, but there are some things you need to keep in mind when building for a variety of monitors.

The image on your computer screen is built up from thousands or even millions of tiny square elements called pixels. The screen creates the image you see by changing the colors of these tiny square elements. (Fun Fact : "Pixel" is a portmanteau of the words "picture" and "element.")

The screen resolution tells you how many pixels your screen can display horizontally and vertically. It's written in the form 1024 x 768. The weird thing is that the SIZE of your monitor often doesn't matter. Check out this awesome example from Tech Donut :

Your laptop on the left could have a 13" screen with a resolution of 1280 x 800. The 17" monitor on the right has the same 1280 x 800 resolution.

In this example, although the monitor on the right is larger, you won't actually be able to fit anything extra onto it. The total number of pixels is the same - just everything looks a bit bigger.

Now look at this graphic :

This really does a good job of showing how some screens are more SQUARE or WIDE than others. So now, we can fit more information and graphics on the page - but what will happen to them when viewed on a different resolution?

We suggest three things :

• If you can, find out the most COMMON resolution used in your organization, and if you're building content, go into your Display Settings and change your view to that resolution while you build.
• When in doubt build for narrower, and let it stretch a little for the wider screen users. 
• 1920 x 1080 is the MOST common DESKTOP monitor resolution. 1366 x 768 is the most common LAPTOP screen resolution. At your organization, most people are probably on a monitor most of the time.  When in doubt, use one of those. (Fun Fact: they are both 16:9 ratios, meaning they are the same shape, just one has more pixels!)

We have a few resources we've already built here that can help you. 

• Matt's awesome page building video (about 15 minutes)
• A cool website that lets you view any page in a variety of resolutions quickly
• Sarah's long (and a little "math-y") article on percentages

And as always - reach out to your CSM!  We are happy to help!