On September 14th, 2017, we published revised versions of our Privacy Policy, Terms of Service and Website Use Policy and published a Cookie Policy. Your continued use of Lynda.com means you agree to these revised documents, so please take a few minutes to read and understand them.

Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Chris Converse |

Planning a Responsive Web Design


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.


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.


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.


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.

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.