Responsive Web Design & Development With Drupal

Responsive design is becoming increasingly important for all websites these days. Websites built with a responsive design are viable on just about any platform whereas those built by following a simple process will usually not be correctly visible on mobile platforms. Their website on mobile devices will usually lack any form of decent navigation system and the content would be pretty much harder to decipher. There are many different kind of screens available on the mobile platform. If the design is not responsive that would mean building a different website for each and every different platform. However, with responsive design it is now possible make just one website and use it across all platforms; like desktop and mobile devices. That also includes websites built on Drupal.

Drupal web development makes designing responsive websites much easier as you will discover by the end of this article. The main aim of responsive web design is to make websites look good on phones, tablets, laptops and even normal large screen monitors. Besides looking good they should also provide users with a certain degree of satisfaction by being easy to use. If you have ever tried surfing an unresponsive website on a mobile phone you would know what I am talking about. No visitor to an unresponsive website is likely to remain there more than a few seconds. This is because unresponsive websites are usually a nightmare to navigate, view and understand on a smartphone.

Navigation:

Navigation is one of the most important parts of any website whether it is on the desktop or a mobile device. However, it is very important to get the navigation correct on the mobile device because there is not a lot of room for error. Thus, it must be easy to tap a menu item with one’s finger and expect a quick response. On larger screens, menus should be substituted by content. In fact the code should be intelligent enough to recognise the type of device that is being used to access the website. On smaller mobile devices like smartphones the menu will usually be vertical and enlarged a little for easy finger tapping. On the other hand the menu items on a tablet will be horizontal but slightly detached from the page and finally the one on the desktop will be horizontal but attached to pages. Getting the menu right by making use of responsive web design means you are halfway there.

Scaling images:

It is important to have images that fit in the browser of a mobile device as well as a desktop device. These image should not go off the screen. This also means that scrollbars to view the full image is a big no no! This can be easily implemented by using Sky theme which automatically takes care of the resizing of images assigning images the following CSS parameters:

height: auto;

max-width: 100%;

The result being that you will get scalable images viewable on all platforms. In the case of a slider you can use FlexSlider to do the job. FlexSlider is a jQuery slideshow that responds to change in browser sizes and also accepts swiping gesture on a touchscreen device.

Adaptive content:

The content too needs to be adaptive to the size of the screen. The content on the desktop version may be quite spread out over several columns however the same may not look good and be easy to browse on a small mobile device. Thus, Drupal is able to adapt its content using media queries which asks the device how big the screen is. Drupal than detects the correct layout as per the query results. This process can also be aided with user-agent detection using BrowsCap.