Preview a Page with SharePoint Designer 2010

Tags: Design, SharePoint Designer 2010

Let me start by saying that if you want to preview a page in your site, just hit F12.  That’ll do it.  The rest of this post discusses another option that might come in handy.

imageI just stumbled across an often overlooked little feature of SharePoint Designer 2010. Well, overlooked by me, at least.  Near the top of the SharePoint Designer window, unless you’ve customized the Quick Access Toolbar, you will see a tiny little icon that looks like a page with the Earth on it that has a magnifying glass hovering over it. This is the “Preview in Browser” menu. If you open this menu up, it provides you with a list of the web browsers available on your computer and, for each one, the most common window resolution sizes used across the web. To preview a page with a specific browser at a specific resolution, open this menu and select the appropriate option.

As always, just writing about it doesn’t necessarily give us the full experience. So here’s a lovely image for your perusal.

On my PC, I originally did not see “Google Chrome” in this list, but I was able to add it.  If you look down at the bottom of this screenshot (thank you, SnagIt) you’ll see a link to “Edit Browser List…” and this allows you to do just that.

image

Then just give the browser you’re adding a name (which will be displayed in the list above), browse to the browser’s .exe file on your system, and click OK.

Once you have all of your browsers added, you can use the “Preview in Multiple Browsers” option to preview a page in all of the browsers listed in this menu.  This is a quick and easy way to determine if your design is going to need to be adjusted.

If you are going to be dealing with designing SharePoint pages for compatibility with multiple browsers, it might be a good idea to review Microsoft’s documentation for planning browser support for SharePoint 2010.