Measurable Success «10 Checkpoints for Future-Proof Enterprise CMS» White Paper
Measurable Success - White Paper

Best Practices for Creating Responsive Websites

Creating responsive websites is more important than ever. Google has added mobile-friendliness as part of their search algorithm for mobile devices, and a growing number of people are accessing the Internet from an array of mobile devices, and the number of users keeps growing every year. With the escalation of this trend, it is no longer optional to support mobile responsive design when programming websites for customers. Sites that are not mobile responsive will be downgraded in Google's search engine. It is time to act and add mobile responsiveness to your repertoire.

Mobile & responsive support in Scrivito

Scrivito offers you all of the tools and the framework that you need to take this step with confidence. We support the highly recommended, flexible and modern web framework “Twitter Bootstrap” right out of the box. Our recommendation is to base your HTML code on the Twitter Bootstrap framework, as it will save you a lot of labor hours as you introduce mobile responsiveness to your sites. In addition, Twitter Bootstrap is automatically cross-browser compatible. Your customer will be able to get the same excellent results no matter which browser they prefer to use.

 

Another feature Scrivito offers is the capability to automatically scale images to the appropriate size needed. As images are delivered, their file sizes are automatically reduced. With smaller file sizes, loading times are cut down, another factor that Google has included in their algorithm. Mobile users are highly sensitive to load speed and are known to skip pages that load too slowly for their patience. Scrivito strips unnecessary meta data from the images to help reduce file size. Essentially, the CMS helps to optimize images automatically, removing the responsibility from the editor. In fact, the editor never needs to bother with it or even know that this process is happening at all. Photo editing programs are no longer required for hours of painstaking image editing.

Twitter Bootstrap wholly supports responsive design at its core and throughout every element of the design process. It gives you, the programmer, everything that you need to make creating mobile responsive websites based on this structure easy. It is for this reason that we support Twitter Bootstrap right out of the box.

Responsive website design

Responsive website design is based on specific media queries to determine which screen size the user's device has. These queries then separate devices into four distinct categories. They are:

  • Mobile devices, smartphones (320 - 767px)
  • Tablets (768 - 1024px)
  • Desktop computers (1024px minimum)
  • Large desktop computers (1200px +)

Scrivito utilizes Bootstrap's mobile responsive grid that shifts page components automatically in a variety of ways for screens that are smaller than the allotted space for the original layout of a page. Pages generally rearrange themselves according to a previously ordered pattern. Often, the primary part of the content page slims down and presents vertically, then the sidebar elements follow beneath the first section in a vertical fashion. For more information on mobile responsive layout patterns, read Multi-Device Layout Patterns by Luke Wroblewski.

Scrivito includes a switch which demonstrates how the website will appear on smaller screen sizes giving users a visual reference when they create the layout for their pages. Knowing how the page will reconfigure itself gives the content creator the information they need to place the most important content where it will appear at the top of the page on every device. The editor can edit, optimize and make any necessary corrections or additions to the content in any configuration.

Adding design components

Twitter Bootstrap supports a long list of design components for website builders. You can find a lot of these components on an open source third-party basis such as Bootsnipp. These components can help you design beautiful sites that look completely unique for each customer's requirements and personality type without sacrificing the high quality that your customers demand. You can provide customized sites that operate well on both desktop and mobile devices and on every browser so that your clients continue to build their customer base without losing any momentum due to the growing percentage of mobile users. You will love the ease of use as you learn these programming tools, and your clients will love the new and improved mobile responsive websites that you produce from them. Contact us with any questions or to see how Scrivito will work for your website designs.