Responsive Web Design aka Adaptive Web Design #ResponsiveDesign #WebDesign

Essentially the term was used in Responsive Web Design, an article by Ethan Marcotte on A List Apart. In general, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Responsive websites are those crafted to use W3C CSS3 media queries with fluid grids and commonly also fluid images, to adapt the layout to the viewing environment. The idea of responsive web design is to make websites that fit multiple screen sizes. For the designer and developer that means they only have to work on one version of the website instead of designing one for desktop computers and another for mobile devices. Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.

Core Concepts
Three key technical features are the heart of responsive Web design:

Media queries and media query listeners.
A flexible grid-based layout that uses relative sizing.
Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and with higher resolution. Having to serve both segments shouldn’t stop designers from being innovative on either.

Responsive Web Design or Adaptive Design has evolved from being a strong trend to become a reality of the web today. In a world that has been conquered by mobile devices over the past two decades, no one now understands a website that cannot be viewed on different screen resolutions, or at the very least the minimum provided on smartphones and tablets. The latest surveys on internet use in many countries no longer make a point of discussing the use of these portable devices because they are a reality: connections to the internet from these devices has grown exponentially over recent years.

If you have not updated we recommend you do. If you do not know this web design technique already we recommend you study, research and learn about it. Make sure your website displays correctly with mobile devices. Use a responsive website design that adapts to any device, create a separate mobile site, or use mobile web development tools to optimize your current site. Contact Us Today For FREE Consultation 888-404-8282 or email contact@lordgriffin.net

Learn More About Responsive Web Design / Adaptive Web Design

Responsive Web Design

10 Great Examples of Adaptive Websites

Awwwards – BEST WEBSITES EXAMPLES OF DESIGNS WITH RESPONSIVE DESIGN

Here are some additional resources:

One thought on “Responsive Web Design aka Adaptive Web Design #ResponsiveDesign #WebDesign”

Pingback: Why You Need A Mobile Website | Lord & Griffin IT Solutions

Share this:

Like this:

Related

One thought on “Responsive Web Design aka Adaptive Web Design #ResponsiveDesign #WebDesign”

Leave a Reply Cancel reply