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.

More great blog posts from Thomas Witt

  • Honey, I shrunk the search response times

    100% faster search response times In the last weeks we've deployed two new releases into production which results in a massive search speed-up for all our customers. Scrivito's internal search engine, which utilitizes on Elasticsearch, has been massively optimized. Through two separate...

  • CDN URLs change on Monday, 2016-07-11

    We're going to change our CDN URL from cdn[0-3] to cdn[0-3] on Monday, 2016-07-11 at 14:50 CET. Existing links will continue to work, meaning that the legacy URLs pointing to cdn* won't expire. The change will be done automatically in our backend. No SDK...

  • E-Commerce Meets Content: Announcing the Scrivito CMS Integration with Solidus

    Solidus (formerly Spree Commerce) is an excellent e-commerce platform for Ruby on Rails, which is available for free on GitHub. It is a Rails engine and provides a scalable, stable, and highly customizable platform for online commerce. Thousands of stores – from small to big – are using Solidus...

  • Ruby Conference Review: Mountain West Ruby Conf 2016

    This is the fourth article of a multi-series blog post about Ruby and tech conferences that @thomas_witt visited in 2016. The setting Mountain West Ruby Conf  2016 (@mwrc) took place on March 21-22, 2016 in Salt Lake City, Utah for the 10th and sadly the last time. The venue was the Rose Wagner...

  • Tech Conference Review: SXSW 2016

    This is the third article of a multi-series blog post about Ruby and tech conferences that @thomas_witt visited in 2016. The setting South By Southwest (@sxsw) takes place every year in Austin, TX. This year marked the 30st anniversary of this legendary event. It started as a small music festival...

  • Ruby Conference Review: RubyConf Australia 2016

    This is the second article of a multi-series blog post about Ruby and tech conferences that @thomas_witt visited in 2016. The setting I guess I don't have to lose too many words on Australia: It's an absolutely endearing country - unfortunately located very very far from everywhere. It's got...

  • Ruby Conference Review: Rubyfuza 2016

    This is the first article of a multi-series blog post about Ruby/Tech conferences that @thomas_witt visited in 2016. The setting Cape Town is always worth a visit. Since years I keep on coming back to this lovely place on earth. Its peaceful atmosphere, its beauty of nature, the great food and...

  • The Modern Building Blocks of Websites

    We create websites to store, access, edit and publish content. It has been like this and it will stay just so, at least in the conceivable future. Hence, it should come as no surprise that the history of web design will stay inextricably tied to the evolution of content management systems...