Strategies for building adaptive sites
Websites today are being consumed across a wide range of devices, and with all the new tablets and PCs optimized for Windows 8 coming to market, this trend will only accelerate. Websites that can gracefully adapt to different display characteristics and user input methods offer the best possible experience for the widest audience. Here we'll dive into strategies for using features in Internet Explorer that help you build sites and web apps that look great and work seamlessly across multiple Windows 8 device form factors and user input methods.
The bigger picture of adaptive design
You might already know about responsive web design (also referred to as adaptive design). Essentially, responsive web design is the practice of matching the capabilities of your website as closely as possible to the capability of the device on which a user is viewing your site—"adapting" your site to your user. Responsive design encompasses techniques such as Cascading Style Sheets (CSS) Media queries, fluid grid-based layouts, and flexible resizable images to achieve a rich but liquid design that works equally well across multiple devices and browsers. You can contrast responsive design with building targeted site experiences for specific screen sizes and user agents, which can lead to an ugly, garbled design, user frustration, or worse—an unusable website.
Since its coining by Ethan Marcotte in 2010, the term responsive design has expanded its meaning in the web community to include any method that provides graceful and deliberate site experiences regardless of users' screen dimensions, connection speeds, touch capabilities, and other device characteristics.
If you're looking for general responsive web design resources, there are many great articles and inspiring demos available, like what you'll find here:
- http://mediaqueri.es/
- Mobile First
- Mobile-first Responsive Web Design
- A Simple Device Diagram for Responsive Design Planning
The rest of this topic looks at the new features that support responsive, adaptive website building in IE and strategies for fitting IE and Windows 8 devices into your larger adaptive website design plans.
Two considerations for building adaptive sites: display and input
Your website's user experience encompasses not only what your visitors see, but also what they do. How they interact with your site plays as crucial a role in its overall usability as the layout itself. What your users ultimately see and how they interact with your website is determined in large part by the display characteristics and input capabilities of the particular device they are using to browse with.
Designing and testing for every conceivable platform of your user audience is impossible, and many site owners have been opting to create several versions of their site that are targeted around a few specific "web platform + device" combinations on the market. With so many computing devices available for using the web, what can you as web developer do to prepare for the new Windows 8 device ecosystem? The answer depends a lot on your site's content strategy, development resources, and overall goals. However, if your general objective is to offer the best possible experience for the widest audience, it's important to consider the variety of both display characteristics and user input capabilities of the devices that your user audience using to browse and use web content. Though layout and user input handling are interrelated factors in the full Windows 8 interaction design equation, touch support doesn't necessarily imply certain display characteristics and vice versa. For example, consider these disparate experiences:
- A widescreen laptop without touch support upgraded to Windows 8 might be running Internet Explorer in the new Windows UI sized to its minimal width, which displays a viewport width similar to a typical mobile device
- A netbook without touch support upgraded to Windows 8 might have a similar screen size as a popular touch tablet device
- An all-in-one Windows 8 PC with 24-inch touch screen might be used solely to run Windows 8 Windows Store apps like Internet Explorer 10 and not have a mouse and keyboard plugged in
Similarly, although IE on Windows 8 comes in two flavors—Internet Explorer in the Windows UI and Internet Explorer for the desktop—neither display characteristics nor touch support can be used to reliably indicate which IE experience your user is browsing with. Internet Explorer in the Windows UI can be resized anywhere from the 320 pixel minimum width to the entire width of the host device display, and Internet Explorer for the desktop can toggle in or out of Full Screen mode (by pressing F11); with touch-enabled hardware, touch input is supported in both. More generally, there is no programmatic way to detect if your user is running Internet Explorer in the Windows UI or Internet Explorer for the desktop.
In general, to ensure the best possible cross-browser compatibility for your site, the best practice is to detect features instead of browsers when determining which type of site experience to provide your user. The same strategy applies across the two IE browsing experiences on Windows 8. It's useful to use the different display characteristics and user input methods used by your site audience as the two main considerations with which to build your user-friendly layouts and optional touch input enhancements to work well across the range of Windows 8 devices.
Strategies for adaptive site design with Windows 8 devices
In summary, here are some general best practices for building adaptive sites with IE on Windows 8.
Use feature detection rather than making assumptions about specific browser or device capabilities. IE on Windows 8 is a single web platform with two separate UI experiences, and there is no way to detect which one your user is browsing with. Use media queries and touch detection methods to determine info about your user's display characteristics and device input capabilities.
Adapt your site experience on display characteristics and device input capabilities. Avoid design assumptions that equate specific viewport widths or width ranges with input capabilities or limitations. Instead, think about your site's layout and user input handling separately; or better yet, try to keep in mind the various screen and input method combinations that your Windows 8 user audience might have. Use media queries and media query listeners to adjust your site's layout and styles across a range of display characteristics, and don't forget to use CSS device adaptation to override automatic zoom scaling. Follow the design guidelines for touch, take advantage of IE's pointer model to easily handle mouse, pen, touch and multi-touch input, and enhance your site's touch experience with gesture events.
Test across a matrix of different widths and input methods. As you design and build your adaptive site, be sure to continually test across at least a basic set of variables and combinations, such as the test matrix suggested in the following diagram.
.png)
If your site already comes in several specific formats, serve them according to some general heuristics and offer users the option to switch. If you have already created several versions of your site targeted around specific device classes on the market, use the preceding table to help map your existing mobile, tablet, and desktop experiences to different viewport sizes and user input methods in IE on Windows 8.
If your tablet and desktop experiences are functionally equivalent, opt for the tablet experience with touch support. (Otherwise choose between tablet and desktop experiences at your discretion.) And to ensure the best possible site experience for your users, offer them an option to switch to a different format from the default experience.
Related topics
Display and layout
Flexible Box ("Flexbox") Layout
Input handling