Cascade Exchange: Bootstrap Site

By Charlie Holder — Thursday, June 18th, 2015 at 9:37am

Cascade Exchange Bootstrap site

This is the 8th blog post in our ongoing Cascade Exchange (#CascadeXC) Series, where we’ll be highlighting a different resource every week. Check out last week’s post on the QuickEdit feature.

In 2014, Litmus reported that 51% of emails in 2013 were opened on mobile devices. That same year, Business Insider published findings that roughly 60% of social media time is spent on smartphones or tablets. As of January 2014, the Pew Research Internet Project reports that 58% of American adults have a smartphone and 42% of American adults own a tablet computer.

Mobile traffic is growing and users want the same kind of experience on their smaller device as they get on their desktop computer. But how do you give it to them? How do you create a single website that works for both traditional PCs and emerging technologies?

Responsive web design (RWD) is an approach that strives to provide an ideal viewing experience for a wide variety of devices. A site designed with RWD principles attempts to respond to each device accessing the content and adapt the layout to fit the user’s display.

In order to develop a responsive site, concepts such as fluid grids, percentage units, flexible images, and CSS3 media queries are used. These concepts can be a lot to take in for a developer creating their first site using RWD principles or an end user responsible for managing the content styled by the site. Fortunately for the design and development communities, front-end frameworks for creating responsive websites emerged.

There are many frameworks to help with the development of a responsive site -- Bootstrap, Foundation, HTML5 Boilerplate, Gumby, and Skeleton to name a few. For this post, I’ll be using.

Like many of the frameworks, Bootstrap offers a fluid (or fixed) grid system that scales as the device size changes. Bootstrap’s grid system is based on 12 columns and includes predefined classes for easy layout options.

The question now becomes, how do you structure your Cascade Server implementation to easily allow content contributors to create and edit responsive content? And the answer lies within the power of the Data Definition and Format.

Cascade Server’s powerful Data Definitions give you the ability to provide a large number of different page layouts and content configurations from a single Template, Configuration Set, Content Type, and Format. Adding in Smart Fields to provide additional options for configuring content keeps things simple while still offering maximum flexibility.

Download our stand-alone Site that contains examples in both XSLT and Velocity for maximizing your responsive layouts and minimizing the number of assets being managed. Your end users will thank you for making it so easy.

Check out the rest of our free resources at the Cascade Server Exchange.

Subscribe to our blog via RSS Download RSS

Hannon Hill Corporation

3423 Piedmont Road NE, Suite 520
Atlanta, GA 30305

Phone: 678.904.6900
Toll Free: 1.800.407.3540
Fax: 678.904.6901

GSA Contract Holder