By Chris Converse | Wednesday, May 07, 2014
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.
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.
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.
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.
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.
Share this article:
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.