Main Content

Hackathon Project Review: Responsive Background Images

Responsive Background ImagesWhat

Responsive Background Images module (a Drupal plugin)

Responsive Background Images is an easy to use, simple helper module for making your background images responsive.  It can be used with either static or slideshow background types, and will always fill the full window space with your image(s).  The slideshow background effect is automatic with this module if you enable more than one image.

The module achieves this by first recognizing the screensize with which a user is viewing your site, then loading the best file size (image style) for that screen. 

For example, a 320x480 image will load for iPhone viewers, and a 1600x900 version for those on a large desktop.

Responsive Background then resizes the image dynamically to match the browser width exactly, maintaining the proportion of the image even if the user resizes the window.  If the user were to view your site first on a small screen and then maximize the window, the module will automatically load a new image size so that the background does not become pixelated.  If a user were to zoom in or out while viewing your site, the background image will stay the same and not resize with the rest of the page.

This solves theming issues with sites that have standard responsive features, and offers an enhanced user experience for all browser sizes.

Why

It’s a common idea for web designers to use background photos to make websites more appealing and interesting, especially when the site is too static or does not contain much content.  Another good use for background photos is for sites which will better communicate their services by images instead of text, such as hotels, restaurants and photographers.

Given these select types of sites, and the growing popularity of iPhone, iPad and similar devices, there is a technical challenge to for site

Responsive Background Imagesdevelopers to optimize the loading of images for different sizes of screens. It is obvious that it is useless and unnecessary to load an image of 1920px wide and 1200px long for iPhone.  Simply, it is not practical to be constantly loading large images for small screens.

Another challenge which most designers struggle with is a way to have background images resize and always fill the whole screen, yet without distorting the image.  This means that the image can be cropped both in height and width to optimize viewing for a given screen; the trick is intelligently knowing the best cropping limits to always show the largest portion of the image.

Drupal

Using the most popular CMS among developers, we have made our Responsive Background Images plugin available to the public and open for more improvements.

Project Page: http://drupal.org/project/responsive_background

The Work

Research: There are other known modules in Drupal which help manage background images and offer advanced features to further customize the use of background images.  The big limitation we see with existing options is that these modules do not resize images, therefore they will not satisfy web designers’ wish for proper cropping and scaling of background images nor, and especially not in conjunction with, developers’ wish to optimize the images for their uses in different devices.

Codes:

Using existing scripts such as Responsive Web Design Images module, http://drupal.org/project/rwdimages, and adding some tweaking, gave us a headstart in creating this module.

 

 
 
Code Details:
  1. Checks existing image sizes and loads larger versions if it detects the screen is wider than the image.
  2. Maintains the proportion of the image in scaling to fill the height and width of the screen.
  3. Adds slideshow functionality if the user added more than one image to show as background.
Admin User Interface Highlights:
  1. User can choose the image styles (the different custom processes in scaling, resizing of images) for different breakpoints of the screen sizes, such as:
    • 320px
    • 480px
    • 640px
    • 800px
    • 960px
    • 1120px
    • 1280px
    • 1440px
    • 1600px
  2. User can upload the images and put the default image styles.
  3. User can exclude the pages where background images will not appear.
  4. Other minor customization such as position, alignment, background wrapper size, etc.

Responsive Background Images

The Team

Jenna - managed our team by documenting the functionalities of our module, assigning each member’s tasks and made the presentation of our project interesting and clear to Promet.

Daniel - pitched in the idea, made the basic framework of the module and focused on the jquery scripts.  He also made the demo site, http://responsive.prometdev.com

Tere and Marc - joined forces to perfect the admin user interface and added the functionality of uploading of the images.

Donna - was on leave.

 

Responsive Background Images

Outcome

We were very excited that we were able to show a working demo of the module, although there were still some minor issues which have to be resolved in the admin user interface. Jenna made a wonderful presentation of the module, that was clear, precise and straight to the point while showing our heart stopping demo site.

The Experience

The team achieved a well coordinated project from start to finish in one day, from concept, to planning, coding, demo and finally to presentation. The enthusiasm, cooperation, focus of everyone was undeniably present during the process. The expertise, knowledge and attitude of everyone involved was unified in achieving the set goals in one day, it’s simply amazing.

 

Responsive Background Images

Responsive Background Images

 

 

 

 

 

 

 

Responsive Background ImagesResponsive Background ImagesResponsive Background Images