background preloader

Pragmatic responsive design

Related:  responsive design

The Business of Responsive Design – December 1st, 2013 – Responsive design affects a lot more than just our website’s layout. From content, and how it’s created, to the structure of teams and organisations can all be affected by the processes responsive web design brings. This post is a rough transcript from my talk at Handheld Conference last week in Cardiff on just that. I’ve a confession to make. I’m an armchair mountaineer. The Eiger Nordwand in the Bernese Alps in Switzerland. This is the North Face of the Eiger in the Bernese Alps in Switzerland. Andreas Hinterstoisser, a talented German climber, in the meadows below the Eiger enjoying the sunshine. In the winter of 1936, Andreas Hinterstoisser (pictured), Toni Kurtz, Willy Angerer and Edi Rainer set about tackling the face of the Eiger – then unclimbed. Let’s leave that story there for now and come back to it later. Let’s talk about responsive design. Responsive design has changed my work and, ultimately, how I do business. 1. We have a content problem. And they did.

8 Tools and Scripts for Responsive Web Design At Theme Trust, we recently launched our first responsive WordPress theme. Since it was also my first time building a responsive website, I had to do some learning and research. Along the way, I discovered some interesting techniques, useful resources, and handy tools to help with the task. So in this article, I’m sharing some of those tools and scripts I came across that make developing a responsive website a whole lot easier. FitText FitText makes font-sizes flexible. Respond A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) Adobe Device Central CS5.5 Adobe® Device Central CS5.5 software simplifies the production of innovative and compelling content for mobile phones, tablets, and consumer electronic devices. Responsive Web Design Sketch Sheets During Denise Jacobs’ workshop on CSS3 at ConvergeSE 2011, I was inspired to make these responsive web design sketch sheets to help think through layouts for various devices. Golden Grid System Skeleton 815 shares

Web Design How-To: Get Started with Responsive Web Design With the introduction and proliferation of smart phones and tablets, the way websites are designed is changing. As more websites are visited by users of tablets and phones, your design has to accommodate a myriad of screen sizes. In more traditional web design workflows, designers and developers target a specific screen width, then let smaller devices invoke pinch-and-zoom actions to change the size of the page and in so doing allow visitors to explore your page more extensively. While the capability to pinch-and-zoom to expose more content is a great feature of modern mobile devices, your content will benefit greatly if it can adapt to multiple screen sizes. This can, however, be a daunting task when you consider the growing number of devices available. This is where responsive design comes in. Responsive web design is a principle that makes extensive use of CSS3 media queries. Adding Imagery With CSS Apply Images to Your Web Page with CSS Adapting Navigation for Handheld Devices

техники адаптивной верстки 17 мая 2012 в 04:10 Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц. 1. Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы: 2. Max-width помогает определить максимально возможную ширину объекта. Так же можно масштабировать изображение: Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак: Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. 3. Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Относительный margin Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Относительный размер шрифта 4. 5.

Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox

10 Excellent Tools for Responsive Web Design By Jason Gross So, you’ve decided to venture into the creation of responsive web designs. Wonderful! So now, you’ve determined that it would be beneficial to create responsive web designs. Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. I divided the tools in this list into four categories: Responsive typographyFlexible imagesResponsive web page layoutsTesting and cross-browser support Responsive Typography First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography. 1. Lettering.js, a jQuery plugin for controlling the appearance of your web type, is a great tool to help designers get a chokehold on their typography. In the context of responsive design, Lettering.js gives designers precise control over typography characteristics such as spacing, leading and kerning in order to produce an optimal reading experience in various visual spaces. 2. Flexible Images 3. imgSizer.js 4.

Wirefy | The Responsive Wireframe Boilerplate Wirefy was created as a tool to help web designers and developers create fast, manageable wireframes. It helps to speed up the journey between sketches and final deliverables. Like the web, it is in constant iteration. This requires a simple workflow and a well-defined collection of atomic elements so that new UIs can be quickly pulled together. It is our belief that we aren't building pages but rather systems of components. Our goal is to help you make smarter UX decisions by focusing on the content first rather than the subjective design decisions. Creating static wireframes can be great but sometimes clients just don't understand how they function or change based on various devices. Use Wirefy to build prototypes quickly, then without starting from scratch implement your Wirefy foundation into any additional framework or CMS system for a fully designed deliverable. Getting started To get started with Wirefy quickly, you can either clone or download the git repository Adding Elements

CSS transitions & media queries Posted on 31 May 2011 • 14 comments While coding up the site for our Insites Tour, I happened across an accidental feature: a smooth transition on growing / shrinking type and image sizes when I resized the browser window. This isn’t particularly groundbreaking and has probably been put into use by others, but as I personally haven’t seen it used elsewhere on the web, I thought it’d be good to make a note of this happy accident. The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize? A note about relative sizing In our example code above, the media queries kick in at 800px (reducing the type down to 0.8em) and at 400px (reducing the type even further to 0.7em).

Designing for Breakpoints Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here. Let’s say you’ve chosen three basic design directions from your thumbnails. When thinking about major breakpoints, remember to think about device classes . Rough sketches of major breakpoints can help you determine: Whether or not more major breakpoints are needed Which design choice will be the most labor intensive; you might opt for a design that will better fit within time and budget constraints Whether or not a particular device class has been neglected or needs further consideration What technologies you’ll need to develop the design responsively So where and when will you sketch minor breakpoints ? Text Navigation Tables

Responsive Layouts, Responsively Wireframed Responsive layouts, responsively wireframed Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts. Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context. Responsive layouts? Producing static wireframes to design layouts for websites, web applications and user-interfaces has worked well for a long time. However, this solution creates a new problem: How should we go about the process of designing these variable layouts? Enter, responsive wireframes? The 'wireframes' on this page (which are only very simple, high-level examples) were created with HTML/CSS, and some argue that this is the answer; to design in the browser. So which is better? Traditional wireframes? HTML? So, what's the answer? Just wondering...

Multi-Device Layout Patterns Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts. To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times. Mostly Fluid The most popular pattern was perhaps surprisingly simple: a multi-column layout that introduces larger margins on big screens, relies on fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest incarnations (illustrated below). I dubbed this pattern "mostly fluid" because the core structure of the layout really doesn't change until the smallest screen width. Column Drop Layout Shifter Tiny Tweaks Off Canvas