Responsive web design ( RWD ) is a web design approach that makes web pages display well across devices and screen or window sizes. Recent work also considers the proximity of viewers as part of the display context as an extension to RWD. Content, design, and performance are required across all devices to ensure usability and satisfaction.
A site designed with RWD customizes the layout with a viewing environment using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
- The fluid grid concept calls for the page element size to be in relative units like percentages, not absolute units like pixels or dots.
- Flexible images are also sized in relative units, preventing them from showing outside of existing elements.
- Media queries allow pages to use different CSS style rules based on the characteristics of the device on which the site is displayed, most commonly the width of the browser.
Responsive web design is becoming increasingly important as the amount of mobile traffic now accounts for more than half the total internet traffic. Therefore, Google announced Mobilegeddon in 2015, and began improving the ranking of mobile-friendly sites if searches were made from mobile devices. Responsive web design is an example of user interface plasticity.
Video Responsive web design
Related concepts
First mobile phone, unobtrusive JavaScript, and progressive upgrade
"Mobile first", unobtrusive JavaScript, and progressive enhancement are related concepts that precede the RWD. Basic phone browsers do not understand JavaScript or media queries, so the recommended practice is to create a basic website and upgrade it to smartphones and PCs, rather than relying on graceful degradation to create complex, heavy-image sites working on mobile.
Progressive enhancements based on browser, device, or feature detection
Due to the high volume of internet usage on mobile devices, they are no longer negligible. In 2014, for the first time more users access the internet from their mobile devices than desktops. Where websites must support basic mobile devices that do not have JavaScript, browser detection ("user agent") (also called "browser sniffing") and mobile device detection are two ways to conclude if certain HTML and CSS features are supported (as a basis for progressive improvement) - however, this method is not entirely reliable unless used in conjunction with the device capability database.
For more powerful phones and PCs, JavaScript frameworks like Modernizr, jQuery, and jQuery Mobile that can directly test browser support for HTML/CSS features (or identify device or user agent) are very popular. Polyfill can be used to add support for features - ie. to support media queries (required for RWD), and to increase HTML5 support, in Internet Explorer. Feature detection may also not be fully reliable; some people may report that a feature is available, when the feature is missing or poorly implemented so it does not work properly.
Maps Responsive web design
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. He stated that, compared to a simple RWD approach, device experience or RESS (responsive web design with server side components), the approach can provide a better user experience optimized for mobile devices. The implementation of server-side "dynamic CSS" languages ​​from stylesheet languages ​​such as Sass or Incentivated's MML can be part of such an approach by accessing API-based servers that handle devices (usually mobile handsets) the difference in relation to device database capabilities to improve usability. RESS is more expensive to develop, requiring more than just client-side logic, and is likely to be provided for organizations with larger budgets. Google recommends responsive design for smartphone websites through other approaches.
Although many publishers are beginning to implement responsive designs, an ongoing challenge for RWD is that some banner ads and videos are not liquid. However, search ads and (banners) displaying ads support specific device platform targeting and various ad size formats for desktop, smartphones, and basic mobile devices. Different landing page URLs can be used for multiple platforms, or Ajax can be used to display different ad variants on the page. The CSS table allows a fixed fluid layout hybrid.
Now there are many ways to validate and test RWD designs, from mobile site validators and mobile emulators to simultaneous testing tools like Adobe Edge Inspect. The Chrome, Firefox, and Safari browsers and the Chrome console offer a responsive design review review tool, just like a third party.
The use of the RWD case will now be expanded further with increased use of mobile phones; according to Statista, visits of organic search engines in the US coming from mobile devices have reached 51% and increased.
History
The first site featuring layouts that adjust to the width of the browser display is Audi.com launched in late 2001, created by a team in razorfish consisting of JÃÆ'¼rgen Spangl and Jim Kalbach (information architecture), Ken Olling design), and Jan Hoffmann (interface development). Limited browser capability means for Internet Explorer, the layout can adapt dynamically in the browser while for Netscape, the page must be reloaded from the server when resized.
Cameron Adams made a demonstration in 2004 that is still online. In 2008, a number of related terms such as "flexible", "liquid", "liquid", and "elastic" were used to describe the layout. The CSS3 media request was almost ready for prime time in late 2008/early 2009. Ethan Marcotte coined the term responsive web design (RWD) - and defined it as flexible fluid/image/media question - in a May 2010 article on A List Apart . He describes responsive web design theory and practice in his short 2011 book entitled Responsive Web Design . Responsive design is listed as # 2 in Top Web Design Trends for 2012 by.net magazine after progressive upgrading in # 1.
Mashable called 2013 Year of Responsive Web Design. Many other sources recommend responsive design as a cost-effective alternative to mobile apps because of their ability to store all code in one website. Users and developers alike are beginning to realize the benefits and importance of mobile responsive design as mobile usage continues to increase. This important embodiment has been confirmed when Google made the announcement that search engines will reward responsive websites with increased rankings.
Related Terms
- Em (and brake)
See also
- Adaptive web design
- CSS framework
- Progressive improvement
- Tableless web design
References
Source of the article : Wikipedia
0 Comments