background preloader

Multi-Device Layout Patterns

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. I looked for what high-level patterns showed up most frequently and tried to avoid defining separate patterns where there were only small differences. 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). Column Drop Layout Shifter

http://www.lukew.com/ff/entry.asp?1514

Related:  CSS3

Flexible CSS cover images I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Ruby on Rails Tutorial: Learn Rails by Example book and screencasts by Michael Hartl Michael Hartl Contents Foreword My former company (CD Baby) was one of the first to loudly switch to Ruby on Rails, and then even more loudly switch back to PHP (Google me to read about the drama).

Create an Absolute Basic Mobile CSS Responsive Navigation Menu In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need for javascript in this tutorial. We will walk through the build in this order HTML > CSS > Media Queries. HTML Code As for the HTML we will be using the HTML5 doctype as we will be using HTML5 tags. State of the web: of apps, devices, and breakpoints IN The ‘trouble’ with Android, Stephanie Rieger points out the ludicrous number of Android screen sizes on a typical UK client’s website and comes to this conclusion: If … you have built your mobile site using fixed widths (believing that you’ve designed to suit the most ‘popular’ screen size), or are planning to serve specific sites to specific devices based on detection of screen size, Android’s settings should serve to reconfirm how counterproductive a practice this can be. Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices. Alternatively, attempting to track, calculate, and adjust layout dimensions dynamically to suit user-configured settings or serendipitous conditions is just asking for trouble. I urge you to read the entire article—it’s brief yet filled with rich chocolatey goodness.

Wireframe Screen Flow Template [Free Download] Update: I’ve updated the template to 1.0.1 to fix an issue that all screens will be using the same content. Have to blame myself for the lazy duplication. At the same time, Wireframe Screen Flow Template using Nexus 4 is also available now. Inspired by a question from the group member within a private G+ community – Android Designers, I decided to spend some time to create a Wireframe Screen Flow Template for Adobe Photoshop that can help Android Developers/Designers to create a complete screen flow for wireframes or mockups. Below is the preview of the template that I have made: What’s inside

How to Center Anything with CSS Updated March 24, 2016. If you've ever had to build a webpage, you have likely needed to center something in that page. Using Cascading Style Sheets (CSS) is the proper way to center images, blocks of text, and even your entire layout for a Web page. Most of the properties for centering have been in CSS since version 1.0, and they work great with CSS3 and modern Web browsers. Let's take a look at some different ways to use CSS to center certain elements in a Web page. On Overview of Using CSS to Center in HTML

NoSQL Data Modeling Techniques « Highly Scalable Blog NoSQL databases are often compared by various non-functional criteria, such as scalability, performance, and consistency. This aspect of NoSQL is well-studied both in practice and theory because specific non-functional properties are often the main justification for NoSQL usage and fundamental results on distributed systems like the CAP theorem apply well to NoSQL systems. At the same time, NoSQL data modeling is not so well studied and lacks the systematic theory found in relational databases.

Mobile Navigation Design & Tutorial One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. On designing content-out (a response to Zeldman and others) (…reposted from a lengthy comment on Zeldman’s blog…) “I love “content-out” as a strategy…setting a series of breakpoints based on ems (based in turn on font size) could create lovely context-based layouts that move fluidly from one state to another. They won’t match with device sizes but they won’t be trying to.

Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix.

Designing a Secure REST (Web) API without OAuth Situation You want to develop a RESTful web API for developers that is secure to use, but doesn’t require the complexity of OAuth and takes a simple “pass the credentials in the query” approach… or something equally-as-easy for people to use, but it needs to be secure. You are a smart guy, so you start to think…

Related:  Responsive designRead LaterDesignResponsiveGRID / LAYOUT TOOLSRWD