responsive archive

joaquin's picture

Samsung Music Chooses Drupal

SamsungMusic.com (formerly Samsung Music Hub) launched earlier this year pushing the boundaries of HTML5 and responsive web design. It was designed to work (obviously) across a large number of Android devices, with the animations taking full advantage of the built in GPU acceleration available on many mobile devices. The design was done by our awesome partners at Oakland-based Emotive Brand. With its single page layout, the site is modern and hip - and also happens to sit on top of Drupal. Another large brand name for Drupal, and another demonstration of Drupal's complete compatibility with mobile devices. Read More…

dan's picture

Drupal 7 Tutorial: Using Breakpoint Panels

This tutorial is obsolete for the new version of Breakpoint Panels - New tutorial to come Breakpoint Panels is a new module just released that allows you to specify which panels show in which breakpoints. It integrates with the Breakpoint module, Panels, and specifically the Panels In-Place Editor. In this post, we'll walk through how to use it. Read More…

adam's picture

A Simple Device Diagram for Responsive Design Planning

At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. Read More…

erin's picture

Improved Lazy Loading for mobile devices (iPhone, Android) with Lazy Load 1.7

The latest version of the jQuery Lazy Load plugin (released Jan 29th, 2012) included the ability to customize your data attribute parameter. This is a pretty helpful update; I realized it could be used to set multiple source images for the same node. Here's how you can use it to optimize images, cutting down on data transfer for mobile devices. Set up your lazy loading the normal way - generally this is gives you HTML like this: Read More…

scott's picture

How we made the Metal Toad site more mobile-friendly with media queries

There’s been a lot of buzz lately about Responsive Web Design, and in particular about CSS3 Media Queries. When our CEO recently asked me to make our site easier to view on his mobile phone, I jumped at the chance to retrofit our fixed-width layout using these new techniques. In a nutshell, media queries allow you to define alternate styles that are applied to certain screen sizes. The obvious example is to pass a mobile stylesheet to small screens, and your regular stylesheet to large screens. Read More…