Creating a Responsive Web Experience

Published by | Wednesday, December 18th, 2013

Simply rearranging your web design across screen sizes isn’t enough to assure a smooth, natural experience for all the devices that will view it. In order to truly optimize the user experience, we must alter the content and behavior as well. This means loading alternate HTML content, suppressing animations, and collapsing navigation for small screens.

FIgure 1
Navigation on small screens is collapsed into a single button, which expands into the global navigation when clicked or tapped, providing an optimal experience for small screens.

In this course, we’ll explore altering the user experience based on screen size. This approach will allow us to increase the user experience and download speed for larger screens, while delivering smaller-sized files and targeted experiences for smaller screens. Learn how to combine jQuery with your HTML and CSS to alter experiences across screen sizes.

Loading alternate content
When we change layout based on screen size, the content must also be modified to match the new imagery and layout. Using JavaScript and jQuery, we can dynamically load HTML content into our web page based on screen size. This allows us to match the content with the user experience.

Figure 2
This example shows different HTML content loaded into a web page based on screen size.

Adding some relatively simple JavaScript and jQuery into your responsive web design can dramatically enhance the user experience of your website. Learn a step-by-step approach to adapting your web experience for multiple screen sizes with my new course, Creating a Responsive Web Experience.

Share this:Share on Facebook170Tweet about this on Twitter8Share on Google+0Pin on Pinterest1Share on LinkedIn1 - start learning today

Tags: , , , ,

Leave a Reply