CategoryResponsive Design

July 8, 2014 — Responsive web design has turned out to be somewhat of a case study in the law of unintended consequences, with one of them being breakpoint paranoia. But even without the undue influence that media queries exerts on your selection of these breakpoints, these might not be the droids we’re looking for. In this article, Obinwanne Hill will look at breakpoints beyond screen size and explore different possibilities and practical approaches to using them to create truly adaptive experiences on the web. Read more…

May 15, 2014 — In this article, Biran Krall, will look at how the need of a more involved design and implementation process, due to responsive design complexities, create opportunities to work together better. We have to kill the mentality that there is an assembly line of workers waiting for it to be their turn, and instead embrace more focused collaboration across the project’s entire team. Read more…

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…