responsive web design archive

Metal Toad on Twitter Metal Toad on Facebook
adam's picture

A Simple Device Diagram for Responsive Design Planning

by , Project Manager

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

by , Web Developer

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…

joaquin's picture

When it comes to Mobile Development, Stop Worrying about Bandwidth

by , President & Founder

When it comes to mobile development, I've seen a lot of buzz recently on how CSS3 can help people eliminate images and cut the bandwidth requirement for their websites, however if a good mobile experience is important to you, you may want to think twice before deciding how to retrofit your website. The Good Old Days The Future is Now Your Screensize May Vary Don't Forget the CPU Oldschool Techniques What About Bandwidth? The Need for Speed Read More…

joaquin's picture

Responsive Web Design and HTML5 are the Future

by , President & Founder

With the latest launch of the Amazon Kindle Fire Tablet, the world is now up to more than five major Android hardware providers. Among each of these, there is also a wide variety in the screen sizes, from the smart phones to mid and larger tablets. Outside of the Android market you have the 800 pound gorilla, Apple with their iPhone, iPod & iPad. And you have RIM with the Blackberry and Nokia (who still can't decide what they are going to use). Read More…

scott's picture

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

by , Front-End Web Developer

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…