Do you know what responsive web design is? As of last month, it is Google’s formal recommendation for mobile delivery. Responsive web design is the principle that a design should be flexible enough to adapt to the screen size and platform of the user.
Now, some are saying that this uniformity in user experience would appear to be a good thing for search engines and developers alike.
What does a web design need in order to be considered a responsive design? It should contain the following three attributes:
Fluid grid: In responsive web design, a fluid grid system uses percentages to define column or div widths (as opposed to pixels). For instance, a “hero” might have a width of 650px in fixed width design, whereas it would be labeled as 100% in the CSS of a fluid width design.
Media queries: In responsive web design, media queries should enable custom CSS based on the mini-max width of a browser. For example, a media query with a max-width of 450px would be intended for mobile only browsers.
Responsive images: Unlike desktop designs, mobile designs with responsive images don’t have fixed widths; instead, they have a max-width. This max-width is usually labeled at 100 percent when displayed on a desktop. Using a max-width enables images to be scaled down to fit the width of the screen on which the webpage is being viewed, including a mobile screen.
Responsive web design is believed to be a catalyst in the propagation of mobile web viewing – especially in the small/medium business world, where the practice of mobile web browsing is still emerging. It’s an unofficial standard, but it is sure to be an important step toward giving these business owners an affordable mobile web presence, including practical, user-friendly mobile web design and SEO improvements.
No comments yet