Responsive Web Design with Drupal

Drupal makes designing responsive websites easy. Such a site looks good on phones, tablets, laptops, and large screens. They are easy to use. I learnt why this is important soon after buying a smartphone. Trying to browse an unresponsive website is hell on earth! Everything was too small and I had to zoom in on parts of web pages, scrolling from left to right just to read a single line. I learnt that I could have things magnified by default, instead of really small... but still the scrolling issue. A few months ago, this website was one of the sinners (visit the old website). Here I will share with you how I used Drupal 7 to make it responsive, and easy to use. Mobile first!

 

Menus Change to Suit Device

On small screens it must be easy to tap a menu item with a finger. On large screens, menus should make way for content. I did this by installing Sky an (AdaptiveTheme subtheme). The menus you see below are the default menus. On smaller devices the menu buttons stack vertically, and enlarge a little for easy finger tapping. On tablets the menu is horizontal but detached from the page. This makes it clear that it is a menu, not content. and on standard screens the menu attaches to the page.

 

Images Scale

Images must fit in the browser window. No offscreen overhangs. No horizontal scrollbars. By using the Sky theme this happens automatically. It does this by assigning images some CSS:-

heightauto;
max-width100%;

Which results in scalable images, like the phone and standard size browser images below:-

The images are displayed using FlexSlider, e.g. Texturising Terrain in Blender. It is a jQuery slideshow that responds to changes in browser size, and accepts swiping gestures on touchscreens. The slider formats images that have been uploaded using the built in Image module. This means it is very easy to try out different image formatting modules, another interesting one is Galleria. Against FlexSlider is that it doesn't natively support a lightbox module, e.g. Colorbox. The reason I'm using it is that it 'felt' quicker than Galleria, and was easy for me to theme. Some day I will go back and test Galleria thoroughly, as it does support a lightbox. This has been raised as a Colorbox issue.

 

Content Responds to Browser Size

I have content that looks best in two columns. Pages where I've a translation of a medieval Latin document, the I.33. It is handy to have English and Latin side by side for comparison. On a smartphone vertical arrangement is more more readable. For instance:-

To do this I installed Panels and Display Suite. I also a created a content type with a field for the English, and one for the Latin. In Display Suite I chose an  AT 2 column 50/50 Panel layout. From there I decided that the title and picture should be at the top, English left, Latin right, and everything else at the bottom. Like so:-

Then I went to the Sky theme settings page and told it that on standard screens the left and right columns should be side by side. and on small devices stacked vertically,:-

The theme does this through media queries, which ask the device how big the screen is. Drupal then sends through the right layout. This can also be aided by User Agent Detection using Browscap.

 

Fluid Grids

A thumbnail linked to content is created every time I post. My Blog and Tutorial pages are examples of this. You will see up to four columns of items depending on your browser size. As the browser size changes the items will move to make best use of the space. This is done with Views, which finds all the posts on my site, extracts the title and first picture. These items are then formatted using Views Fluid Grid into what you see below:-

 

Getting Images into Drupal

There are three ways I like to use to get images into Drupal. The built in Image module, the Insert module, and through a WYSIWYG button. At a user level, the first method is the simplest. A user is allowed to an arbitrary number of images and Drupal takes care of placement, size, and formatting. Insert module has more freedom, allowing a user to choose where an image goes, and can choose from a list of sizes. With the WYSIWYG offering the greatest freedom. The first two have the advantage that the images can be reused, automatically. E.g. a thumbnail of the main image of a page can be used in a teaser, elsewhere on the site. This reduces the burden on an author.

Below is an example of the how the Image module lists the images on a node. I have allowed myself unlimited images, and Drupal will display them using FlexSlider. As a designer you can choose whether a user has the option of Alt and Title fields, or the number of images. You also control how an image is displayed on the page. This is a good option for forcing consistent image sizes through a site.

The next image is what an author will see of the Insert module. It uses the Image module for uploading images, but allows a user to place those images anywhere on a page. A designer can provide a list of default sizes, and can choose to link smaller sizes to a lightbox. The images on this page were inserted this way.

IMCE is the final option that I recommend. I use it for Blender icons when writing tutorials. E.g. "Click on the  Cloth Modifier...". Get to it by clicking on the image button in a WYSIWYG then Browse Server. This is a good option for images that are used on multiple pages.

For readability it can be good to reduce the size of an image. As I have done on this page. The Image Resize Filter will link the smaller image to the original via a lightbox. All the author has to do is drag the image to the size they want, and Drupal will take care of the rest.

By default all uploaded files are dumped in a single folder. Messy! To control this, install the File (Field) Paths and Token modules. This gives a designer control over the name and location of images on the server. The original images on this page are all saved at .../sites/default/files/blog/responsive-web-design-with-drupal/name-of-image.xxx. Tidy!

 

WYSIWYGs

Drupal can give fine control over the tools a user has to author nodes. They can be given a WYSIWYG, or not. It can be off or on by default. Control can be had over features, e.g. Bold, Font Size, Tables etc, by user type. If you are reading this, you will have a limited feature subset, I will have more:-

To achieve this, install the WYSIWYG module then the editors you want to use (refer to the WYSIWYG Readme for installation). You can assign a different editor to different user types. Then go to the configuration page and select which user types have which features.

My preferred WYSIWYG is CK Editor. Fast, lean, easy to configure. By default I have it turned off, and have a blank text area. Whereas when you leave a comment below, it will be on, but you can turn it off... but if you scroll down, now, you won't see it. Why, will be explained in the next section.

 

Inviting Comments

Comments encourage an author, and let readers know that a site is popular. Responding to comments shows that an author is accessible. As an author I want to know... Was this page helpful? Do you want me to go into detail? Can you suggest an improvement? To encourage comments I've provided a simple box, no nosy questions. Just a box. Clicking on the box will load a WYSIWYG, for your convenience, and gives you the option to leave your name, email, and/or website. The option. This is important. You have full control over what I know about you. I believe this increases the likelihood of a post, because you can be truly anonymous.

For this you will need the b2 nice comments module. You will get a simple box that expands on clicking.:-

 

Going Further

In addition to what I have done above, you can go further by controlling which content is shown to which device, and serving different images based on screensize. The methods above use media queries, but finer control can be gained from User Agent Detection. If you want to go down this path you maybe interested in the following modules:-

As new modules are created all the time, try searching at Drupal Modules using, Mobile, Responsive, and Adaptive as keywords.

Comments

Kieran Mathieson

Thanks, John. A good writeup. Appreciate your taking the time to write this.I like your approach to comments - simple until the user clicks. I'll have to try that.Small thing: If you turn off CKEditor's spell checker, then tell CK to allow the browser's native spell check, users get a good experience.Kieran

john
john's picture

You're welcome Kieran.

Thank you for raising the spell checking issue. I agree. I've written a module to fix this issue. It is for CK Editor installed for use by the WYSIWYG module. Download it here - wysiwyg_custom.tar.gz. This module is a copy of code in a post by loyukfai.

john
john's picture

Last night I did a talk, on this topic, to the Palmerston North Linux Users' Group (PLUG). I talked about how videos can be made responsive too. See this Sword & Shield DVD Review example. Try resizing your browser window, note that the video responds. This was done with the Media module. You can find extension modules for it by searching for Media: at Drupal Modules, Not only can they do video, but audio, and images too. For some uses the Media module maybe better than the built in Image module.

Add new comment