A dynamic website built on Office 365

I mentioned it on twitter a couple weeks ago, Bradshaw & Weil has launched its new public website based on Office 365: http://www.bradshawweil.com

In an article last year, I expressed my frustration with the current Office 365 public sites, for which building dynamic pages requires more effort than it should. Well, it doesn’t mean that it cannot be done, and Bradshaw & Weil is one of these sites that take advantage of both the traditional list management capabilities of SharePoint and the features specific to Office 365.

The site content is managed by the site admins in SharePoint lists. For example, when you open Topics.aspx?Menu=For%20Individuals SharePoint will filter the Topics list to only display the topics tagged “For Individuals”. Topics.aspx?Menu=For%20Individuals&Topic=Motorcycle%20Insurance will only display the information related to motorcycle insurance, and will pull from the Insurance Carriers library only the logos of the carriers that offer this specific service. Thanks to the dynamic behavior and the use of querystrings in the URL (“Menu” and “Topic”), a single page handles all the topics, where with a static site 20 pages would be needed. And if a new topic gets added to the Topics library, this will automatically create a new entry in the menu.

Besides content management, the site gets all the benefits from working with Office 365. The business users have a convenient interface, the Site Design tool, to customize the header, footer and layout of the pages, without having to call a SharePoint consultant for every minor change. And the gadgets allow them to include convenient features like contact forms that would be hard to implement on a regular SharePoint site.

The site also gets help from jQuery. Note in particular:

All these plugins pull content from SharePoint lists and libraries (menu items, images, logos, phone numbers, website links). Here again, no need to call the designer every time a logo gets added or a phone number changes!

For this project, I worked directly with Jared Morgan, vice president. This was a great experience, as the company has been using SharePoint for several years, and Jared knew exactly what to aim for.

As you explore the site, feel free to post your comments or questions below, and Jared and I will be happy to post additional details.

And if your company is interested in a test drive of Office 365, drop me a line and I’ll be happy to send you an invitation for a free trial.

Tutorial: build a simple slideshow with the Easy Tabs

Environments: SharePoint 2007 (wss, MOSS), SharePoint 2010 (Foundation, MSS), Office 365

Audience: Power user.

Permission level: design or full control.

Estimated time: 10 minutes.

Last year, I added to the Easy Tabs an Autoplay feature. It seems that not many people use it, so today let me show you how it can help you build a simple slideshow.

1- Add your images to your SharePoint page

2- Add the Easy Tabs

3- Looking for fancier slides?

4- A warning about performance

1- Add images to your SharePoint page

Adding images to your SharePoint page is easy with Image Web Parts. Each Web Part will become a slide in our slideshow. The Web Part title will become a tab, so if you want to create an index simply use  a number – 1, 2, 3, etc. – as your Web Part title. Make sure you place all your Image Web Parts in the same Web Part zone.

Your images can reside anywhere, not necessarily in the same library, or on the same server, not even on SharePoint. Just make sure that your users have read permissions to the images location.

2- Add the Easy Tabs

The Easy Tabs are added at the bottom of the Web Part zone, following the usual procedure. For detailed instructions, check out the SharePoint User Toolkit. For our slideshow, we’ll check the “Autoplay” option and enter the interval in seconds between two slides.

3- Looking for fancier slides?

Maybe you’d like something more sophisticated than a simple image per slide? In this case, instead of an Image Web Part you can use a Content Editor Web Part or a Form Web Part, and enter your own html code.

For example, to show images with a caption overlay, follow this tutorial. If you need more detailed instructions let me know!

4- A warning about performance

Images can significantly impact the load time of your page.

If your images are stored in a SharePoint picture library, remember to take advantage of the Web friendly formats that SharePoint automatically generates for you.

If you have more than 5-10 images in your slideshow, you should consider using an Image Rotator instead. The image rotator will offer better performance, as the images are loaded on demand, one at a time.