Responsive web design

Last updated

Wikipedia Vector 2022 skin (desktop view).png
Wikipedia Vector 2022 skin (mobile view).png
A screenshot of Wikipedia with the responsive skin Vector 2022, on a computer screen (left) and on a mobile phone screen (right). The elements rearrange themselves into a more mobile friendly layout.
Content is like water, a saying that illustrates the principles of RWD Content-is-like-water.svg
Content is like water, a saying that illustrates the principles of RWD

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. [1] [2]

Contents

A responsive design adapts the web-page layout to the viewing environment [1] by using techniques such as fluid proportion-based grids, [3] [4] flexible images, [5] [6] and CSS3 media queries, [7] [8] [9] an extension of the @media rule, [10] in the following ways:

Responsive web design became more important as users of mobile devices came to account for the majority of website visitors. [11] [12] In 2015, for instance, Google announced Mobilegeddon and started to boost the page ranking of mobile-friendly sites when searching from a mobile device. [13]

Responsive web design is an example of user interface plasticity. [14]

Challenges, and other approaches

Luke Wroblewski has summarized some of the RWD and mobile design challenges and created a catalog of multi-device layout patterns. [15] [16] [17] He suggested that, compared with a simple HWD approach, device experience or RESS (responsive web design with server-side components) approaches can provide a user experience that is better optimized for mobile devices. [18] [19] [20] Server-side CSS generator implementation of stylesheet languages like Sass can be part of such an approach. Google has recommended responsive design for smartphone websites over other approaches. [21]

Although many publishers have implemented responsive designs, one challenge for RWD adoption was that some banner advertisements and videos were not fluid. [22] However, search advertising and (banner) display advertising came to support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs have been used for different platforms, [23] or Ajax has been used to display different advertisement variants on a page. [24] [16] [25] CSS tables permitted hybrid fixed and fluid layouts. [26]

There have been many ways of validating and testing RWD designs, [27] ranging from mobile site validators and mobile emulators to simultaneous testing tools like Adobe Edge Inspect. [28] The Chrome, Firefox and Safari browsers and developer tools have offered responsive design viewport resizing tools, as do third parties. [29] [30]

History

The W3C specification of HTML+ stated that websites have to be rendered according to the user preferences. [31] The customization of web page layout was lacking however. Many web developers resorted to ordinary HTML tables as a way to customize the layout and bring some basic responsiveness to their websites at the same time.

First major site to feature a layout that adapts in a non-trivial manner to browser viewport width was Audi.com launched in late 2001, [32] created by a team at razorfish consisting of Jürgen Spangl and Jim Kalbach (information architecture), Ken Olling (design), and Jan Hoffmann (interface development). Limited browser capabilities meant that for Internet Explorer, the layout could adapt dynamically in the browser whereas, for Netscape, the page had to be reloaded from the server when resized.

Cameron Adams created a demonstration in 2004. [33] By 2008, a number of related terms such as "flexible", "liquid", [34] "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009. [35] Ethan Marcotte coined the term responsive web design [36] —and defined it to mean fluid grid / flexible images / media queries—in a May 2010 article in A List Apart . [1] He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1. [37]

Mashable called 2013 the Year of Responsive Web Design. [38]

Mobile-first design and progressive enhancement are related concepts that predate RWD. [39] Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice was to create a basic web site and enhance it for smartphones and personal computers, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones. [40] [41] [42] [43]

See also

Related Research Articles

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

In computing, page zooming is the ability to zoom in and out a document or image at page level. It is usually found in applications related to document layout and publishing, e.g. word processing and spreadsheet programs, but it can also be found in web browsers as it improves accessibility for people with visual impairment and people using mobile devices, such as PDAs and mobiles which have a relatively small screen.

A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.

Content adaptation is the action of transforming content to adapt to device capabilities. Content adaptation is usually related to mobile devices, which require special handling because of their limited computational power, small screen size, and constrained keyboard functionality.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

<span class="mw-page-title-main">CE-HTML</span>

CE-HTML is an XHTML-based standard for designing webpages with remote user interfaces for consumer electronic devices on Universal Plug and Play networks. The standard is intended for defining user interfaces that can gracefully scale on a variety of screen sizes and geometries, including those of mobile devices to high definition television sets.

<span class="mw-page-title-main">Web Compatibility Test for Mobile Browsers</span>

Web Compatibility Test for Mobile Browsers, often called the Mobile Acid test, despite not being a true Acid test, is a test page published and promoted by the World Wide Web Consortium (W3C) to expose web page rendering flaws in mobile web browsers and other applications that render HTML. It was developed in the spirit of the Acid test by the Web Standards Project to test the relevant parts that a mobile browser needs to support. The browser has to accomplish 16 different subtests indicated by a 4 x 4 image of green or red squares.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution. It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design (RWD).

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

Adobe Edge is a discontinued suite of web development tools that Adobe Inc. started developing in 2011. The tools enhances the capabilities of other Adobe apps, such as Dreamweaver. The first app in the suite was the eponymous Adobe Edge, released in August 2011 as a multimedia authoring tool designed to succeed the Flash platform. In September 2012, Adobe renamed the app Edge Animate, and announced Edge Reflow, Edge Code, and Edge Inspect. Also packaged with the suite are Edge Web Fonts, the PhoneGap app, and an Adobe Typekit subscription. In October 2015, Adobe announced an end to the development of the Edge family. By the end of September 2019, all Adobe Edge products were removed from the Creative Cloud offering.

<span class="mw-page-title-main">Adaptive web design</span> Display a web page to fit a certain device and screen size

Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user's device, as opposed to a single static page which loads the same on all devices or a single page which reorders and resizes content responsively based on the device/screen size/browser of the user.

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS web layout model. It is in the W3C's candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.

<span class="mw-page-title-main">Blisk (web browser)</span> Chromium -based web browser

Blisk is a freemium Chromium-based web browser that aims to improve productivity and code quality by providing a wide array of tools for Web development and testing for different type of devices: desktop, tablet and mobile.

<span class="mw-page-title-main">CSS grid layout</span>

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

<span class="mw-page-title-main">Jen Simmons</span> Web designer and developer

Jen Simmons is an American graphic designer, web developer, educator and speaker known for her expertise in web standards, particularly HTML and CSS. She is a member of the CSS Working Group and has been prominent in the deployment of CSS grid layout. She worked as a developer advocate at Mozilla and later at Apple.

References

  1. 1 2 3 Marcotte, Ethan (May 25, 2010). "Responsive Web design". A List Apart.
  2. ↑ Schade, Amy (May 4, 2014). "Responsive Web Design (RWD) and User Experience". Nielsen Norman Group. Retrieved October 19, 2017.
  3. ↑ "Core concepts of Responsive Web design". September 8, 2014.
  4. 1 2 Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  5. 1 2 Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart.
  6. ↑ Hannemann, Anselm (September 7, 2012). "The road to responsive images". net Magazine.
  7. ↑ Gillenwater, Zoe Mickley (December 15, 2010). Examples of flexible layouts with CSS3 media queries. Stunning CSS3. p. 320. ISBN   978-0-321-722133.
  8. ↑ Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries".
  9. ↑ "Responsive design—harnessing the power of media queries". Google Webmaster Central. April 30, 2012.
  10. ↑ "@media rule". w3.org. W3C.
  11. ↑ "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper". Cisco. January 30, 2015. Retrieved August 4, 2015.
  12. ↑ "Mobile share of U.S. organic search engine visits 2021". Statista . Retrieved October 29, 2021.
  13. ↑ "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update". Official Google Webmaster Central Blog. Retrieved August 4, 2015.
  14. ↑ Thevenin, D.; Coutaz, J. (2002). "Plasticity of User Interfaces: Framework and Research Agenda". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press. Edinburgh. pp. 110–117.
  15. ↑ Wroblewski, Luke (May 17, 2011). "Mobilism: jQuery Mobile".
  16. 1 2 Wroblewski, Luke (February 6, 2012). "Rolling Up Our Responsive Sleeves".
  17. ↑ Wroblewski, Luke (March 14, 2012). "Multi-Device Layout Patterns".
  18. ↑ Wroblewski, Luke (February 29, 2012). "Responsive Design ... or RESS".
  19. ↑ Wroblewski, Luke (September 12, 2011). "RESS: Responsive Design + Server Side Components".
  20. ↑ Andersen, Anders (May 9, 2012). "Getting Started with RESS".
  21. ↑ "Building Smartphone-Optimized Websites".
  22. ↑ Snyder, Matthew; Koren, Etai (April 30, 2012). "The state of responsive advertising: the publishers' perspective". .net Magazine.
  23. ↑ "Google Partners Help". google.com. Retrieved May 21, 2015.
  24. ↑ "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. September 24, 2012.
  25. ↑ JavaScript and Responsive Web Design Google Developers
  26. ↑ "The Role of Table Layouts in Responsive Web Design". Web Design Tuts+. Retrieved May 21, 2015.
  27. ↑ Young, James (August 13, 2012). "Top responsive web design problems... testing". .net Magazine.
  28. ↑ Rinaldi, Brian (September 26, 2012). "Browser testing... with Adobe Edge Inspect".
  29. ↑ "Responsive Design View". Mozilla Developer Network. Retrieved May 21, 2015.
  30. ↑ Malte Wassermann. "Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar". maltewassermann.com. Retrieved May 21, 2015.
  31. ↑ "An Overview of HTML+". w3.org. W3C.
  32. ↑ Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)." [ self-published source? ]
  33. ↑ Adams, Cameron (September 21, 2004). "Resolution dependent layout: Varying layout according to browser width". The Man in Blue.
  34. ↑ "G146: Using liquid layout". w3.org. Retrieved May 21, 2015.
  35. ↑ "Media Queries". w3.org. Retrieved May 21, 2015.
  36. ↑ "OutSeller Group - Organize, Optimize, Maximize". outseller.net. Retrieved May 21, 2015.
  37. ↑ Grannell, Craig (January 9, 2012). "15 top web design and development trends for 2012". .net Magazine. Archived from the original on September 11, 2013. Retrieved October 29, 2021.
  38. ↑ Cashmore, Pete (December 11, 2012). "Why 2013 Is the Year of Responsive Web Design".
  39. ↑ "What is Responsive Web Design". July 23, 2012.
  40. ↑ Wroblewski, Luke (November 3, 2009). "Mobile First".
  41. ↑ Firtman, Maximiliano (July 30, 2011). Programming the Mobile Web. pp.  512. ISBN   978-0-596-80778-8.
  42. ↑ "Graceful degradation versus progressive enhancement". February 3, 2009. Archived from the original on November 13, 2014.
  43. ↑ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. p. 456. ISBN   978-0-321-65888-3 . Retrieved March 1, 2010.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.