Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

By Chris Converse | Wednesday, May 07, 2014

Planning a Responsive Web Design

figure_2_alternate_content

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.

Responsive Layout

In simple terms, responsive web design is a method of delivering the same website over different screen sizes.

Although the term adaptive design is sometimes used to describe a responsive web design, responsive design differs from adaptive design in several ways.

  • A mobile website is specifically triggered by a mobile device, but responsive design responds to the size of the screen, according to the settings you establish.
  • Whereas adaptive design will alter or even limit the content, responsive design attempts to present the same information by adjusting it for the screen size.
  • With adaptive design, it’s important to start with the mobile size and work up. Responsive web design, on the other hand, allows you to design your optimal website, which will ultimately provide a similar experience for the user regardless of device type or screen size.

When planning a responsive web design, consider what information should always be on-screen. In the following example, our navigational elements remain on the screens, but the position and style changes dramatically. This effect is achieved solely with HTML and CSS, and can be quite helpful to users.

figure_1_navigation_position

Watch a video: Learn how to redefine the display property for navigation links to support small screen devices.

Responsive (Adaptive) Experience

When working with a responsive design, UX is very important. While responsive design generally focuses on layout, the content requirements of your project can affect the UX as well. During the planning stages, carefully consider your content along with layout and ask yourself how the experience will translate onto smaller or larger screens. This can include hiding and showing alternate content, and even changing the way the site behaves for different screens.

Watch a video: Learn how jQuery can be used to quickly load alternate content onto your site based on screen size.

In the next example, alternate content is loaded onto the webpage based on the screen size being used to view it. This technique lets you optimize the balance between content and layout.

figure_2_alternate_content

Another option for balancing your navigational user experience on smaller screens is to collapse the navigation into a user-controlled menu. This allows the position of the navigation to remain at the top of the screen, and provide quick access to content within your site.

figure_3_navigation_expereince

Watch a video: Learn how to open and close the navigation menu with CSS and jQuery.

As the world of web browsing continues to expand to many different devices, your website must be able to react. Responsive design techniques let you provide an optimal user experience across a variety of screen sizes. Planning a responsive website requires decisions about content visibility, layout, imagery and user experience along the way.

Interested in learning more? Check out my lynda.com course Creating a Responsive Website Design.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , , , , ,

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.