CategoryResponsive Design

May 12, 2014 — We’ve seen many permutations of images in responsive design and spent a lot of time spinning our wheels, banging our heads and screaming at the wall. But our tireless journey is coming to a close. The W3C and browser makers got the hint. We’ve come a long way with responsive images. We can see the light at the end of the tunnel, but a lot of work still has to be done. Read more…

May 2, 2014 — Originally released in 2007, the BBC’s Programmes website now has pages for over 1.6 million episodes, but that’s barely half of the story. Surrounding those episodes is a wealth of content, including clips, galleries, character profiles and much more, plus Programme’s newly responsive home pages. This article is a case study of the responsive rebuild of the BBC’s Programmes pages, and it actually begins back in 2007, at the conception of the project. Read more…

April 9, 2014 — As mobile browsers continue to improve, offering new features and enhancing performance, new opportunities like this will arise. It’s always important to question whether you should build a native app or a Web app, and keep in mind the pros and cons of each, especially because the differences in their capabilities are narrowing rapidly. In this article, Nick Jonas and Francis Villanueva Will discuss a few of the biggest challenges here: detecting user activity, achieving performant animations, and building an API integrated with Google Analytics. Read more…

March 19, 2014 — What is the ideal product page? Who are we building this mobile website for? Putting together a mobile e-commerce website is a multidisciplinary task that encompasses business management, design, development and marketing. In this article, Lawrence Howlett will walk through all of the vital steps when planning a highly converting mobile e-commerce website. Read more…

March 5, 2014 — Responsive SVG icons can be used in a lot of ways. In this article, Ilya Pukhalski digs deeper into Joe Harrison’s responsive icons technique and explores what can be done with SVGs. Read more…

March 3, 2014 — What practical steps can you take to make your brand more approachable for mobile users? While general statistics are useful for demonstrating the value of designing with mobile in mind, they don’t provide the guidance necessary to understand precisely how users will interact with a particular brand on their phone. Google Analytics offers a number of free features for incredibly detailed analysis of mobile activity, with the ability to easily compare to desktop activity. Read more…

February 27, 2014 — iframe is one of the few HTML elements that don’t play nice with responsive layouts. You may need to use it when embedding content from external sources such as YouTube, so in this article, Rachel McCollin will show you how to make embedded content responsive using CSS. For those occasions when non-coders will be embedding video on your website and you don’t want to rely on them adding extra markup, she’ll also look at a solution that uses JavaScript instead of CSS. Read more…

February 19, 2014 — After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles. Many of these frameworks are open-source, free to download and quickly customizable, and in this article, Jen Kramer will focus on the most popular ones: Bootstrap and Foundation. A responsive design framework might be a helpful tool in your arsenal, for quick prototyping, testing or even production code — one that expands your range of products and makes clients happy. Read more…

February 6, 2014 — Transformations are a powerful technique for separating content and presentation in Web applications. Yet, they transformations have failed to gain popularity through XSLT. For this reason, Web developers are liable to think that transformations “don’t apply to me,” even though they work with HTML. Thankfully, new transformation frameworks are on the horizon, that hold the promise of a revival. In this article, Ishan Anand will reintroduce transformations and explore their applications to mobile and responsive design. Read more…

February 3, 2014 — One of the hardest problems in responsive Web design right now are responsive images. “Retina” images are especially a challenge because if you have sized your layout with ems or percentages, then you cannot be sure of the exact pixel dimensions of each image being displayed. In this article, Gavyn McKenzie will look at one solution to the problem that he implemented on his portfolio website at Etch. Read more…