Change definitely is the new constant. As the great Stephen Hawking once said “Intelligence is the ability to adapt to change”. To keep up with this fast-paced world and the ever-changing and developing technology, we need to build intelligent websites that can easily ‘go with the flow’. Responsive design is all about designing your website to be able to fit perfectly into any device irrespective of the screen size.
Mobile First Strategy and Drupal
The mobile-first approach makes the assumption that mobile phones are the most highly-used technology device and hence first priority should be given to designing a site for a mobile device and then the design can be adapted to suit larger devices like tablets, PCs and now TVs. The Bootstrap theme for mobiles is most popularly used, very user-friendly and follows the Mobile-first strategy to achieve mobile responsive design.
There are a lot of out of the box Drupal themes available that support responsive design like Bootstrap, Omega, AdaptiveTheme, Sky, Corolla etc. But if you need more customized solutions Drupal also provides plenty of modules to make responsive web designing a lot more easier. Let’s discuss some of them below:
The picture module gives site administrators a way to optimize images for different devices. It provides a tag for HTML and what it basically does is it renders different versions of the image which the browser will then select the best using media queries and displays only the best suited image for your device. So the images can scale itself depending on the screen size and resolution.
To embed a video into your responsive web site, you will need this FitVids module. It will expand or shrink the size depending on the div container it is within. This Drupal module supports Youtube, Blip.TV, Vimeo, Kickstarter and others like Facebook and Viddler too.
This Drupal module is a very essential module and is used by other modules to achieve a responsive design. You will need a theme to define breakpoints and these are stored in a theme.info file which is then read by the database. Custom breakpoints can also be defined using full media queries.
Context Breakpoint Module
With this Drupal module you can define a context for a breakpoint and build a super responsive design. For example, you can use a narrow template for a screen whose width is lesser than 800px. It also detects the browser and screen size.
Responsive menus Module
A well-written CSS should be enough to handle your menu layouts but for more responsive layouts for your menus this Responsive Menu module can be used. You can choose between different responsive styles of menus, configure at what screen size they need to be handled or disable any mouse events.
Using the Panels module gives you more control and flexibility on the layouts of your website. It is a drag and drop content manager and lets you play around with the design giving you a real-time feel of your page. It allows you to place content wherever you like and can provide custom or responsive layouts.
If you want your font size of your text to increase and decrease automatically to fit in the container, this FitText module is helpful. You will need to use a responsive theme to make use of this module.