The last post of 2015 is the last post in our “Sitefinity Templates” series.
At the bottom of the Design menu in Sitefinity, you’ll find “Responsive & Mobile Design”. This section contains the Responsive Design templates.
By now you’ve heard of Responsive Design. (If not, here’s an Overview of Responsive Design at Sitefinity.com.) Without it, we either have to design separate mobile-only versions of our websites, or display the exact same website on every device out there.
Which usually results in a “squished” website on your phone, right?
So today we’re talking about what the Responsive Design Template does in Sitefinity. And how you make good use of it. Onward!
Definition of a Responsive Design Template
The Responsive Design Template is a little different from the other templates in our series. It’s defined as a group of rules for how to display a website when viewed on a certain device, or device category.
99% of the time, the template is used to alter (or “transform” in Sitefinity lingo) websites for smartphone screens or tablet screens. Almost all smartphones & tablets can resize a website to fit their screens (at least partially) by default. What a Responsive Design template does is help you determine exactly how you want those devices to display your site. You’re not relying on the device to do it for you.
Using Responsive Design Templates in Sitefinity
You don’t apply Responsive Design templates to individual pages. They apply to all pages which use the Page Templates you select. Responsive Design sits like a layer of frosting on top, giving an extra set of guidelines.
In this example, a Responsive Design template is applied to two of the website’s Page Templates.
Any pages which use “Home” and “SecondLevel” here, also use the Responsive Design template when loading.
What elements are affected by Responsive Design? Here’s a list.
- What type of device
- Whether to transform your website’s layout, or direct visitors to a mobile version of your site (no longer recommended)
- Do you use a device-specific CSS stylesheet, or one universal stylesheet?
- How to transform the website’s elements (columns, rows, images)
- How to transform the navigation menus
This screenshot from a recent website project shows some of the elements.
NOTE: To use Responsive Design Templates on Sitefinity, you must install the Responsive & Mobile Design module. Refer to the Sitefinity Docs page on Activate and Deactivate Modules for help in doing so.
Customizing Responsive Design Templates
Since Responsive Design templates are groups of rules, customizing them involves changing those rules.
For example – Say your website has 3 columns laid out side-by-side. (Many news sites use this layout.) How do you want them to display on a phone? Should the columns stay side-by-side? Should they stack vertically? Should they collapse into small boxes with scrollbars?
Up to you.
You can do this within Sitefinity itself, or through extra stylesheets added in. We’ve done both in the past year. Using extra stylesheets gives you more flexibility to customize placement of elements. But it’s a little tricky to make those customizations work within Sitefinity’s framework smoothly.
Think of it like someone taking a test, using two different instruction manuals. If you have conflicting instructions in each manual, your test-taker is bound to mess up an answer or two!
Caveats & Cautions
Responsive Design is not optional. Not anymore. No matter your business or organization, you must employ some form of Responsive Design. In Sitefinity, that’s fairly simple. In other CMS it may not be.
Design for mobile-first. Designing for a laptop-sized screen, and then trying to compress that design into a mobile screen, often doesn’t work. The site looks cramped, choppy, and may violate critical user experience standards. It’s much easier to design for a mobile screen first, and then expand it to larger screen sizes. (Cleaner, too!)
Testing is REQUIRED! When using responsive design, you must test how the website looks on a range of mobile devices. Repeatedly. It’s the only way to make sure your templates work as desired. Trust me, at the start, they won’t!
If you have some phones & tablets available to view the website during development, great. If not, use the QuirkTools Screenfly Tool. It can emulate most phone/tablet screen sizes, and it’s free.
Consider the future of your website. Mobile took over as the #1 Web browsing platform worldwide in 2014. Your website needs to work as well (if not better) on mobile than on a desktop.
That’s it! The end of our “Sitefinity Templates” series. If you liked it or plan to use it for future reference, please send us a comment with your thoughts.
And since this is December – What topics would you like to see the Sitefinity Insider cover in 2016? Please comment or email your ideas.
Hope everyone has a Happy Holiday! We’ll see you back here in January. (Don’t forget to subscribe! We wouldn’t want you to accidentally skip over this blog when making New Year’s Resolutions.)