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.
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).
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
CSS3 Media Queries CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries. CSS3 Media Queries (demo) Check my demo and resize your browser window to see it in action. Max Width The following CSS will apply if the viewing area is smaller than 600px. If you want to link to a separate stylesheet, put the following line of code in between the <head> tag. Min Width The following CSS will apply if the viewing area is greater than 900px. Multiple Media Queries Device Width For iPhone 4 Colly
Responsive Tables with CSS/JS - Foundation 3 - ZURB Playground - ZURB.com Why We Built This When we looked around at the various implementations of responsive tables on the web, we saw lots of interesting ideas but nothing we thought was a really great implementation. Chris Coyier on css-tricks.net did a great round up of responsive data tables and while there's some fascinating ideas in there, nothing seemed to meet the criteria we had for a great implementation: Doesn't break responsive layouts Doesn't unnecessarily hide data Still lets you compare rows With those existing tricks in mind, we set out to develop this, a CSS/JS combo that takes existing tables and modifies them for small devices so they meet our criteria. We built these specifically to work with Foundation, our open source front-end framework for responsive sites, but it would work just fine with any responsive site. How to Make Your Tables Responsive We wanted this to be incredibly easy to implement. Example Page Download the Code Attach to Your Markup <table class="responsive"><tr> … Ready to Rock
Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. 1. 3. 5.
Off Canvas Layouts CSS - Foundation 3 - ZURB Playground - ZURB.com Off Canvas What Now? If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). He and Jason Weaver then worked to create a batch of layouts, which they published to demonstrate how layouts like this could work on the Web. Four Layouts, No Waiting We've put together four different layouts, each with specific functionality and code for you to check out and download. Bottom Nav Layout This layout moves the nav menu to the bottom on mobile, and enables a sliding sidebar. Sidebar on Mobile Only This layout moves the navigation to the sidebar on mobile only. How to Use These Layouts The download below includes everything you need to play with these layouts and use them on your own site or app. Foundation 3.2, the release version of Foundation 3. Repurpose, Rebuild, Reuse
CSS3 Media Queries Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Не будем останавливаться на подробном описании HTML. HTML5.js Обратите внимание, что в демо используется HTML5. Сбрасываем HTML5 элементы в block Описываем основную структуру в CSS Я снова не буду вдаваться в подробности. Шаг 1
How to Build a Simple Mobile Website with CSS3 In this article we're going to look at a variety of options for building simple mobile websites with CSS3. Note that these techniques won't work with all phones but if you only need a mobile site for a few devices, these tips could to the trick. Before we get started, be aware that due to the restricted viewing space, a mobile website is generally one column of data, with the exception of simple tables and small buttons side by side. It's not a good idea to try and cram a lot of data into that space. If you use PDF documents as part of your layout, I recommend reformatting them into a single column of data, no more than 480pixels wides. If you don't despite using a PDF reading app, it may be hard to see on a mobile device. For the sake of simplicity you could build an icons based layout, a windows based layout or a combination. there are some other choices, though these would result in a simple site that's effective. Here are some layout examples: