RWD Element - Row by Row
Responsive web design<-- news.topic
is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience<-- news.briefA site designed with RWD[14] adapts the layout to the viewing environment by 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 page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.[64]Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.<-- news.content
<-- news.htmlarea -->
Mobile first, unobtrusive JavaScript, and progressive enhancement
are related concepts that predate RWD.[15] Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic web site and enhance it for smart phones and PCs, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones.
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 suggests that, compared with a simple RWD 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. Server-side "dynamic CSS" implementation of stylesheet languages like Sass or Incentivated's MML can be part of such an approach by accessing a server based API which handles the device (typically mobile handset) differences in conjunction with a device capabilities database in order to improve usability.[29] RESS is more expensive to develop, requiring more than just client-side logic, and so tends to be reserved for organizations with larger budgets. Google recommends responsive design for smartphone websites over other approaches.[30]
