Tags:
create new tag
, view all tags

Responsive Web Design

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD 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.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Detail:

Related:

External links:

-- Contributors: Peter Thoeny - 2015-04-29

Discussion

I find the term "Responsive Web Design" a bit odd, to me, "responsive" associates with time, as in quick response, or responsible, as in determined to follow up.

In any case, a TWiki that can be used as well on a desktop computer as well as tablets and smartphones is needed. It is especially important now since more and more traffic shifts to mobile devices. Case in point: Google just started to penalize websites that are not mobile friendly with a lower page rank.

I think, as a first step we need a ResponsiveTopMenuSkin.

-- Peter Thoeny - 2015-04-29

The latest version of TWiki (SVN trunk and TWiki.org) now supports a responsive multi-column page layout. A two-column layout can be done with: %TWOCOLUMNS% ...text... %ENDCOLUMNS%. The two columns change to a single column if the window or screen is too narrow. Embedded images are scaled down automatically to the window or screen width as needed. Documentation at VarTWOCOLUMNS, VarTHREECOLUMNS, and VarFOURCOLUMNS.

Example: (resize the window width, or look at this page with a smartphone)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante ac augue sagittis semper. Vestibulum sed urna quam. Phasellus eleifend dolor id dui dictum lobortis. Etiam enim erat, fermentum eget libero non, pretium vestibulum nisi. Nam eget nisi diam. Cras egestas, nibh a malesuada hendrerit, tellus turpis gravida dolor, at fermentum ipsum libero id eros. Mauris a nunc turpis. Fusce turpis dui, blandit nec maximus at, sagittis et arcu. Duis eros sapien, accumsan sed varius eget, elementum eu sapien. Nulla congue, nulla efficitur gravida porta, leo ex feugiat purus, sit amet sagittis leo arcu at magna. Pellentesque eleifend, libero quis consectetur tincidunt, orci ipsum scelerisque turpis, vulputate feugiat risus orci non odio. Integer id enim turpis. Cras et nisl quis massa ornare maximus id sit amet justo. Mauris at mi eget nisi imperdiet ullamcorper.

diagram.png

Nam tortor arcu, tincidunt ac elit et, fringilla vestibulum ante. Vestibulum odio arcu, accumsan ac consequat vel, mollis at tellus. Nam sagittis tellus egestas, scelerisque odio eu, pharetra justo. Nam tincidunt, leo at rutrum consequat, augue felis feugiat diam, ac ullamcorper nunc mauris a purus. In hac habitasse platea dictumst. Aenean mollis, nisi eu eleifend elementum, ante dolor placerat dolor, pretium gravida diam lectus ac dolor. Curabitur tempor accumsan tortor ac sodales.

Curabitur interdum vehicula fermentum. Donec in nunc ligula. Fusce id viverra tortor. Praesent vitae arcu faucibus, iaculis augue ut, lobortis lectus. Integer commodo ullamcorper ante tristique congue. Praesent lectus lectus, dapibus in orci ut, egestas finibus enim. Donec euismod dolor porttitor imperdiet feugiat. Sed euismod quis erat id pharetra. Aenean venenatis eros mauris, a porta neque imperdiet at. Vivamus ultrices sem nec velit viverra lobortis. Praesent tristique lobortis ante.

Pellentesque placerat convallis massa, volutpat volutpat elit ultricies eu. Cras lacinia, massa ac aliquet ultricies, felis massa scelerisque erat, sed sodales velit ipsum eu turpis. Praesent viverra lacinia eros et aliquam. Nullam congue diam at rutrum viverra. Donec porta venenatis orci, vel aliquet tortor commodo vel. Praesent vitae mattis orci. Cras sed nunc dapibus sapien commodo posuere. Nulla feugiat commodo lacus ut commodo. Morbi tempor sollicitudin lacus eleifend bibendum. Phasellus vitae tincidunt libero. Fusce tempus rutrum egestas. Donec sed malesuada odio. Duis cursus, dui ut suscipit vehicula, tortor nisl sagittis elit, in accumsan risus dui a velit. Vestibulum sed ante libero. Duis ac lobortis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-- Peter Thoeny - 2015-05-07

Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2015-05-08 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.