Browse Definitions:
Definition

responsive design

This definition is part of our Essential Guide: Build a WCM architecture that supports business needs

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

11 comments

Send me notifications when other members comment.

By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Please create a username to comment.

Hola
Les comparto un muy buen video tutorial gratuito de Responsive Design:
http://responsivedesigndesdecero.com/

Espero les sirva!!
Cancel
Great resource for responsive web design. We’ve added it to the Responsive Design Knowledge Hub: http://www.ugurus.com/responsive-design-definition
Cancel
Thanks for the info.. few good responsive websites @ www.visitresponsivewebsites.com
Cancel
very nice article now i know what is this thing responsive design http://hotelperunbansko.com
Cancel
Hello,

If you need to build an easy tool to build responsive websites with very cool themes and a friendly non technical experience use www.livecontrol.net. It really works
Cancel
It is helpful.......
Cancel
nice it help me
Cancel
Thanks for info! nice post. Responsive website http://freemiumdownload.com/
Cancel
Do you have links for the other videos? Nice post.
Cancel
If anyone wants to know about responsive website design, then this article is really helpful for those who trying to implement a responsive website for tablet mode, mobile friendly and for phablet user.
Here is one more article for latest website design trends which I have read, in that article also they have mentioned about what is the importance of the responsive website design.

http://www.aarnasystems.com/blog/website-design-trends-india/
Cancel
Unfortunately responsive design is only responsive to screen dimensions, not bandwidth. Huge images and videos will resize nicely but just won’t work on low bandwidth clients (typically mobile phones). This is the major reason people use adaptive breakpoints. The server language can swap the huge media file for a lower resolution one that is appropriate for the device. Assuming adequate server resources, it’s typically better to produce several versions of an uploaded media file at different resolutions (e.g. in a forked process triggered by the upload) so that they can be served quickly. Otherwise a media based website will be too slow to provide an adequate user experience, or often it just won’t work. Responsive is great in contexts where bandwidth can never be an issue, e.g. a site without media content. As an example, that’s exactly what bootstrap was developed for. <a href="https://www.whitechek.com/">website development company in jaipur</a>
Cancel

-ADS BY GOOGLE

File Extensions and File Formats

SearchCompliance

  • PCAOB (Public Company Accounting Oversight Board)

    The Public Company Accounting Oversight Board (PCAOB) is a Congressionally-established nonprofit that assesses audits of public ...

  • cyborg anthropologist

    A cyborg anthropologist is an individual who studies the interaction between humans and technology, observing how technology can ...

  • RegTech

    RegTech, or regulatory technology, is a term used to describe technology that is used to help streamline the process of ...

SearchSecurity

  • email spam

    Email spam, or junk email, is unsolicited bulk messages sent through email with commercial, fraudulent or malicious intent.

  • distributed denial of service (DDoS) attack

    A distributed denial-of-service attack occurs when an attack originates from multiple computers or devices, usually from multiple...

  • application whitelisting

    Application whitelisting is the practice of identifying applications that have been deemed safe for execution and restricting all...

SearchHealthIT

  • athenahealth Inc.

    Based in Watertown, Mass., athenahealth Inc. is a leading vendor of cloud-based EHRs for small to medium-sized physician ...

  • Affordable Care Act (ACA or Obamacare)

    The Affordable Care Act (ACA) is legislation passed in 2010 that changed how uninsured Americans enroll in and receive healthcare...

  • HIPAA Privacy Rule

    The Standards for Privacy of Individually Identifiable Health Information, commonly known as the HIPAA Privacy Rule, establishes ...

SearchDisasterRecovery

  • disaster recovery as a service (DRaaS)

    One approach to a strong disaster recovery plan is DRaaS, where companies offload data replication and restoration ...

  • data recovery

    Data recovery restores data that has been lost, accidentally deleted, corrupted or made inaccessible. Learn how data recovery ...

  • disaster recovery plan (DRP)

    A company's disaster recovery policy is enhanced with a documented DR plan that formulates strategies, and outlines preparation ...

SearchStorage

  • yottabyte (YB)

    A yottabyte is a measure of theoretical storage capacity and is 2 to the 80th power bytes, or, in decimal, approximately 1,000 ...

  • Kilo, mega, giga, tera, peta, exa, zetta and all that

    Kilo, mega, giga, tera, peta, exa, zetta are among the list of prefixes used to denote the quantity of something, such as a byte ...

  • brontobyte

    A brontobyte is a measure of memory or data storage that is equal to 10 to the 27th power of bytes.

SearchSolidStateStorage

  • SSD caching

    SSD caching, also known as flash caching, is the temporary storage of data on NAND flash memory chips in a solid-state drive so ...

  • NVDIMM (Non-Volatile Dual In-line Memory Module)

    An NVDIMM (non-volatile dual in-line memory module) is hybrid computer memory that retains data during a service outage.

  • NAND mirroring

    NAND mirroring has been proposed to break the security in certain portable devices that use NAND flash memory for encryption.

SearchCloudStorage

  • RESTful API

    A RESTful application program interface breaks down a transaction to create a series of small modules, each of which addresses an...

  • cloud storage infrastructure

    Cloud storage infrastructure is the hardware and software framework that supports the computing requirements of a private or ...

  • Zadara VPSA and ZIOS

    Zadara Storage provides block, file or object storage with varying levels of compute and capacity through its ZIOS and VPSA ...

Close