Managing the Rising Tide of Mobile-Devices with Responsive Design

Try Sitefinity Mobile Web

Experts estimate mobile-traffic will increase by 4,000% by 2014 and eventually overtake desktop-traffic. To meet this growing demand, it’s vital for organizations to have a mobile strategy. Creating ideal web experiences for all web visitors requires extensive support for a wide variety of mobile devices. To create this support websites must adapt based on the visitor's personal choice of device. Creating these device-specific adaptions has historically been very challenging.

The Bad Old Days: Lots of Phones, Lots of Versions of Your Content

Many websites maintain separate mobile versions of their web content. These websites detect the visitor's device and redirect to a sub-site to present a customized experience. Alternately, the website might use the same page but apply different HTML markup. These techniques work fine for a couple of devices, but it's impossible to scale this strategy to address the large number of web devices already in use today. For each device programmers, front-end developers, and content writers must manage an additional version of the web content. 

The Modern Solution: Support An Unlimited Number of Mobile Devices with Responsive Design

Responsive design is a design philosophy that addresses the extreme amount of diversity in web devices using "best practice" web standards. By using CSS3 media queries, web pages can adapt based on the capabilities or constraints of the device. This means web pages can "progressively enhance" or "gracefully degrade" for each visitor.

Sitefinity Uses Responsive Design to Help You Deliver Better Web Experiences Across Devices

Sitefinity CMS includes layouts that can effortlessly be dragged and dropped onto any page or template. These layouts enable end-users to easily add new columns (2- columns, 3-columns, etc.) onto their web pages without any knowledge of HTML, while still producing "best practice" DIV based markup.

Consequently, through these layouts, Sitefinity is already aware of the design structure being used in the website. This enables Sitefinity customers to easily attach responsive design rules to these layouts. These responsive rules can be defined in Sitefinity using a web-based interface. Through this interface, website administrators can instruct Sitefinity to transform a 4-column layout into a 4-row layout when the visitor is using a smartphone.

Furthermore, Sitefinity includes a web-based preview-mode that enables content authors to quickly preview their content in a variety of devices (iPad, iPhone, etc.).

By using drag and drop layouts and attaching responsive rules to these layouts, Sitefinity customers can quickly create web pages that fluidly adapt to an unlimited number of devices. As a result, organization can focus on creating compelling content instead of re-creating content countless times.

Watch the demo video

How it Works in Sitefinity?

At its core, responsive design relies on media queries to define different styles for different resolutions.  Media queries are supported by all WebKit-based browsers (Safari, Firefox, Chrome) and in IE via some jQuery plug-in’s. 

The following code is implemented in Sitefinity, which makes your website instantly mobile-ready:

By establishing this set of adaptive styles, Sitefinity adapts web pages to an unlimited number of devices and resolutions. For website managers, there is no need to re-create web content in sub-sites or create dedicated markup for a particular device. Your web page transforms into a perfect fit for all devices.

Try Sitefinity Mobile Web