A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).
Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”
The Wall Street Journal has an interesting article this morning…
Apple Tests Larger Screens for iPhones, iPads
It got me to thinking about responsive design, specifically the matter of using breakpoints vs. fluid layouts. Continue reading
Re-styling for responsive design is a ton of re-work. It’s much easier to build a website correctly the first time! I’ve still got about a day and a half of css tweaking ahead of me, but here are a few concrete tips for avoiding the pain I am experiencing…
1) Whenever possible, style repeatable components (e.g., menus and block views) so they’ll look good as they adapt to your responsive breakpoints.
Here is a sidebar component that is not very flexible. I will have to write and test separate css code for each breakpoint to make it work with my responsive layout…
Here’s a lesson on how NOT to design a responsive website.
Don’t wait until the end of the project to think about it. Thinking about how your site will look and behave on mobile devices should be the first step in planning and designing a site. It should continue to be forefront in your mind during every layout and feature decision, especially anything having to do with menus and navigation.
When I started the gench site, I knew I wanted it to be responsive, so I did my homework and based the genchstyle theme on Omega. This was a good move, but the last time in the project that I focused on responsiveness. As I built and styled the site, I told myself “I’ll tweak the design for mobile devices once I get the ‘basic’ site built.” BIG mistake! Continue reading