Add new comment

Responsive Web Design with Drupal

In this video you learn about how Drupal works with responsive design and some themes enable responsive design organically. Drupal makes it fast and easy to create sites that look great and function on the widest range of devices. Drupal is a social publishing platform that powers millions of websites and online applications, it enables you to built innovative content rich social web experiences at every scale.

Category: 
Publish on date: 
Monday, January 16, 2012
Attachment: 
Rating: 
Click to see video transcript

Voice-over: Your next web project needs to be built on Drupal using the principles of Responsive Web Design. Responsive Web Design is a new way of building sites that look great no matter how they’re accessed on any device; avoiding the cost and complication of investing in specific native apps or mobile sites. Note how page elements on this Drupal site automatically resize and change position as the size of the browser window or the device changes.

Your next web project needs to be accessible, look good and function on any kind of device, not just on laptop or desktop computers. Gartner predicts that mobile phones will overtake PCs as the most common web access devices worldwide by 2013 and concludes, “Websites not optimized for the smaller screen formats will become a market barrier for their owners.” Many mobile web users, including 25% of US mobile users, don’t use desktops, laptops or tablets to access the web. dotMobi estimates that as of July 2011, there were 6,500 distinct web-capable mobile devices in use. You don’t want to have to build a specific version of your site for every one of those. Drupal already does Responsive Web Design today with tools like the cutting-edge Omega theme written in HTML5.

Here’s the barebones Drupal site showing how the Omega theme works. It has default breakpoints to switch between grids of 1200, 960 and 720 pixels as well as a mobile version built in. Here are a few Drupal websites built using Responsive Web Design and the Omega theme. You will notice images resizing or being replaced on the fly and block and color layouts dynamically changing. The mobile version of a site theme commonly has navigation optimized for touchscreens and leaves out unnecessary page elements to improve page load speed. Drupal has always been ahead of the curve on technologies like RSS and the semantic web. Now it’s leading the Responsive Web Design charge, too, with Drupal products like OpenPublic and OpenPublish being delivered responsive design capable out of the box. Drupal makes it fast and easy to create sites that look great and function on the widest range of devices.

Drupal is a social publishing platform that powers millions of websites and online applications. It enables you to build innovative, content-rich social web experiences at every scale. With a community of hundreds of thousands of users and developers, Drupal’s success has spawned the global business ecosystem. Thousands of pieces of add-ons software extend what it can do.

Learn more at www.drupal.org.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.