logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

What is Responsive Web Design


There are three main features of a responsive web design, which are fluid layouts, resizable images and media queries. Media queries are not really that new to web design. Beginning as media types in CSS2.1, we could design stylesheets for both web and print, somewhat insuring that the webpage would look the same on the screen and when printed. This progressed into media queries in CSS3. This query checks for the width of the media device (max-device-width) and tests it against a set value such as 480px or 768px. In response to this query, we use CSS styles to change the fluid layout and resize the images for the screen.

You can easily test if a website has a responsive design. Begin with the browser at full width of your computer screen. Then drag the right edge of the browser to the left to reduce the width of the browser window. You should see the images become smaller and the layout will take the floating divs that are side-by-side and stack them vertically. For example, if we have six images (six divs) per row on a gallery page at full screen, as we reduce the screen width, the number of images in a row are progressively reduced and stacked, as needed. Once the width is reduced to a certain amount, the images themselves will begin to resize smaller. If you watch closely, you will also see that certain design elements, such as the navigation links, may be reduced to an icon or even disappear. This is also controlled by the CSS stylesheet.

When designing websites, consider not only how the webpage design elements will look at full screen width but how they will look when stacked. Consider what design elements can be removed from the screen at the smaller screen width without reducing the functionality of the website. As the features and technology for responsive design are changing quickly, keeping up with all the enhancements can be time consuming. If you would rather spend your time designing instead of coding, take a look at some of the beautiful responsive themes available for Wordpress. If you are a small design firm, you might want to consider starting from one of these responsive theme layouts when designing websites.

Join us in the Animation forum. | Join us in the Digital Art forum.

|


Add What+is+Responsive+Web+Design to Twitter Add What+is+Responsive+Web+Design to Facebook Add What+is+Responsive+Web+Design to MySpace Add What+is+Responsive+Web+Design to Del.icio.us Digg What+is+Responsive+Web+Design Add What+is+Responsive+Web+Design to Yahoo My Web Add What+is+Responsive+Web+Design to Google Bookmarks Add What+is+Responsive+Web+Design to Stumbleupon Add What+is+Responsive+Web+Design to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Creative Cloud Classroom with Mike McHugh

Adobe KnowHow Learning Center

Silhouette Studio New PixScan Feature

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor