Subscribe to dolody Newsletter
IN THIS ISSUE: Streamlining The Responsive Design Process
Digging Into Responsive Design Ingredients
-
Responsive Design Boilerplates
Ethan Marcotte coined the term “Responsive Design” to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size.
Fluid grids is one of the three technical ingredients (Fluid grids, flexible images, and media queries) to deliver elegant visual experiences. A fluid grid layout can be created through the smart use of DIV layers, percentages and math.
Boilerplates combines these three ingredients (flexible grid, Responsive images and Media queries) into one neat package: a flexible grid enhanced with scripts. There are several interesting Boilerplates out there, some are right for some situations, and others are right for others.
- Skeleton is a small collection of CSS & JS files that can help you develop sites that look beautiful at any screen size. Skeleton uses 960 grid as its base.
- 320 and up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
- Gridless is a solid H
…
-
Responsive Images
Most responsive designs use
Max-widthto create flexible images. To make the images fluid, just addmax-width:100%andheight:auto.The
max-width: 100%treatment ensures that your images never exceeds the width of its parent element. If the width of its container changes, the image resizes proportionally in nearly all modern browsers.Filament Group introduced a practical technique that delivers optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.
This technique uses .htaccess files and a JS file to serve up different sized images based on the screen width. This approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes. You can view a demonstration of the technique here.
Matt Wilcox took a similar approach to the mobile image problem and created a solution called Adaptive Im…
-
Responsive Navigation Menus
Check out how ForeFathersGroup website responds. The design adjusts based on the viewport width.
The navigation menu gets isolated from the logo when the browser gets narrow, placing each menu item on its own row occupying the whole width of the screen.
Chris Coyier describes an interesting technique he noticed on Five Simple Steps website. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When the user is on a small screen and clicks the dropdown menu, they’ll be able to select an option that big enough for the user to click.
Food Sense menu responds flowly from having icons on wide screens and disappears on smaller ones.
Another common technique to manage the navigation menu is using media queries to actually hide and display text based on screen size. As our flexible layout resizes, we can apply media queries at different resolution ranges to surgically correct issues as they appear – whether in a widening desktop browser window or on m…
Chime-In
What Topic Would You Like Us to Cover Next?
regnar,
When next issue?
Marie,
We need a really good issue about CSS3 Animations.
The MasterPiece
Responsive Design: Streamlining Your Process
There are countless combinations of tools, frameworks, and processes to build a responsive website. While there may not be just one right or wrong way to begin, an outline is a great way to start your project. From the initial wireframes and concepts to the co…
Quick Tutorial
Scaling Font Sizes & Icons
Typefaces play an important role in responsive web design. UX designer Joshua Sortino covers how using a little snazzy jQuery plugin (FitText) and a special typeface can get our fonts and images scale easily. Let’s jump right in!
1. FitText is a lightweight and simple yet very functional jQuery plugin to achieve scalable headlines that fill the width of a pa
A Designer's Quote
If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.
— Ethan Marcotte
GEMS FOR STEAL
Sequence
Sequence is a jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!
Hoverizr
Hoverizr is a very small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. It features three effects: “grayscale”, “blur” and “color inversion”. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.
THE DESIGN GALLERY
Below you'll find a hand-picked selection of some for your viewing pleasure.
From the Archive
Conditional Loading for Responsive Designs
Jeremy Keith loads up his sleigh this year with a nifty mobile-first approach that responds to onscreen conditions.
Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page.
Featured Tutorial
Fluid grids, orientation & resolution independence
Mark Hurrell wrote an excellent tutorial that shows how by specifying font sizes in ems, you can adjust every font-size on the page by using media-queries to change the font-size set on the BODY or HTML element according to viewport width.
So in order to get fluid typography, Mark calculates a resolution-independent font scale based on target widths. That is then applied using a series of media queries and the CSS3 unit rem. So when the device rotates the type resizes to fit the new screen dimensions. For more details, check out the Responsive News blog post.
