Responsive Web Designs

,Responsive Web Sites

Illustration of Responsive Web Design by Rafizeldi, CC3.0 via Wikimedia Commons

Responsive and Adaptive web designs share a common goal. To display the same web content to both large screens on desktop computers and small screens on mobile devices. The goal is achieved by creating web sites which structure the content in ways that will respond and adapt to the user's behavior and screen size. Various design techniques can be used to accomplish this goal. The latest specification for Cascading Style Sheets (CSS3) introduced media queries which enable designers to create stylesheet conditionals based on screen dimensions and many additional characteristics of the user's environment. Media queries are being used to create new and modify old design methods to respond and adapt to the user's environment. Some designers use a combination of these methods to create websites that can be viewed on a range of screen sizes from tiny to huge.

Fixed-width Layouts

Fixed-width layouts are the most common type used by existing websites. These layouts use absolute units of measurement (pixels). Some mobile browsers will render fixed-width layouts into a virtual window (viewport) which is usually bigger than the screen. Users can then pan and zoom to see different areas of the page. However this causes usability and readability problems on many websites.

Fluid Layouts

Fluid (or Liquid) layouts are based on relative units of measurements such as percentages. Fluid layouts have been used for several years. They adapt well on large screens, but become difficult to read on smaller screens.


,Adaptive Layout

Illustration of Adaptive Layout by Tomáš Procházka, CC1.0 via Wikimedia Commons

Adaptive Web Design

Adaptive web design and development represent a stepping-stone approach where the website changes to fit a predetermined set of screen sizes. When the user's screen dimensions fall within a certain range, it triggers a particular version of the site to be delivered. Adaptive web design switches fixed-width layouts based on screen sizes. Adaptive designs tend to rely on server-side technology. It is the server that determines which version of the website to send to the browser. One adaptive design method is to put content into screen blocks. The blocks represent "break points" for the content. The content blocks are placed in different areas of the screen based on where the user's screen dimensions fall within the predetermined set of screen sizes. This improves readability but tends to make the web pages very tall on small screens. One of the debated questions with adaptive design is the number of screen sized to include in the set. Some designers prefer a large set of minimum and maximum sizes while other prefer a small set.


,Homepage Responsive Design

Homepage Responsive Design

Responsive Web Design

Responsive web design responds more fluidly to changes in the user's screen dimensions. Responsive design tends to rely more on client-side technology. It is the browser that determines how to respond to differences in the user's environment. Responsive web design optimizes a fluid layout with breakpoints to create a highly flexible site. On my homepage site, I used a media query in the CSS to check for portrait screen orientation. In portrait orientation the horizontal navigation menu changes to a vertical navigation menu with much larger buttons.

/*** Screen Orientation Media Query Override ***/
@media screen and (orientation: portrait)
{
    nav a
   {
       width: 93%;
       text-align:left;
       font: bold 2.8em/1 Arial, Helvetica , sans-serif
    }
    nav li { width: 100% }
    nav li a
   {
       margin: 0 0 2px 0;
       padding: 20px 18px 0 17px;
       font-size: 300%
    }
    nav ul
   {
       margin: 2px 0 16px 0;
       text-align:center
   }


,Drupal Skeleton Theme

Drupal Skeleton Theme

Drupal Responsive Theme

I created the Drupal website your are currently viewing using the Skeleton theme which was designed to be responsive and mobile-friendly. The theme has content blocks that reposition at different screen widths. The theme also contains a jQuery Responsive Menu Plugin that turns the site's navigation into a dropdown selection list when the browser width is less than 768px. The screen capture above shows the wide-screen version of this web site on the left. The narrow-screen version is on the right.



Tags: