Browse Definitions :
Definition

responsive design

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display.

Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device’s display and serve a desktop, tablet or smartphone style sheet depending on the query response.

This capacity means that instead of having to build a special mobile version of a website -- which often requires writing new code from scratch -- developers can simply build multiple style sheets for the same web page and perhaps even associate different images with each of the style sheets. As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time.

 

Chris Converse of Codify Design Studio demonstrates the basic elements of responsive design:

 

See also: mobile application development, Web app, native app, hybrid app, mobile browser, mobile OS

This was last updated in January 2012

Continue Reading About responsive design

Join the conversation

5 comments

Send me notifications when other members comment.

Please create a username to comment.

It is helpful.
Cancel
Nice, it helped me.
Cancel
Do you have links for the other videos? Nice post.
Cancel
Good content. I have learnt a lot and implemented responsive design successfully on my personal blog as well.
Cancel
Thanks for the information. It will help us to decrease the Dwell time of website.
Cancel

-ADS BY GOOGLE

File Extensions and File Formats

SearchCompliance

  • PCI DSS (Payment Card Industry Data Security Standard)

    The Payment Card Industry Data Security Standard (PCI DSS) is a widely accepted set of policies and procedures intended to ...

  • risk management

    Risk management is the process of identifying, assessing and controlling threats to an organization's capital and earnings.

  • compliance framework

    A compliance framework is a structured set of guidelines that details an organization's processes for maintaining accordance with...

SearchSecurity

  • Trojan horse (computing)

    In computing, a Trojan horse is a program downloaded and installed on a computer that appears harmless, but is, in fact, ...

  • identity theft

    Identity theft, also known as identity fraud, is a crime in which an imposter obtains key pieces of personally identifiable ...

  • DNS over HTTPS (DoH)

    DNS over HTTPS (DoH) is a relatively new protocol that encrypts domain name system traffic by passing DNS queries through a ...

SearchHealthIT

  • telemedicine (telehealth)

    Telemedicine is the remote delivery of healthcare services, such as health assessments or consultations, over the ...

  • Project Nightingale

    Project Nightingale is a controversial partnership between Google and Ascension, the second largest health system in the United ...

  • medical practice management (MPM) software

    Medical practice management (MPM) software is a collection of computerized services used by healthcare professionals and ...

SearchDisasterRecovery

SearchStorage

  • M.2 SSD

    An M.2 SSD is a solid-state drive (SSD) that conforms to a computer industry specification and is used in internally mounted ...

  • kilobyte (KB or Kbyte)

    A kilobyte (KB or Kbyte) is a unit of measurement for computer memory or data storage used by mathematics and computer science ...

  • virtual memory

    Virtual memory is a memory management capability of an operating system (OS) that uses hardware and software to allow a computer ...

Close