responsive design Articles & Videos

  • Web UX: Study Guide

    Unsure where to start? Use this collection of links to our articles and videos to learn how users interact with the web and how to design effective web user experiences.

  • Breakpoints in Responsive Design

    Breakpoints determine when a webpage may adjust to different layouts. They help designers (and developers) maintain layout consistency across multiple screen sizes, orientations, and devices.

  • The Negative Impact of Mobile-First Web Design on Desktop

    Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.

  • Breadcrumbs: 11 Design Guidelines for Desktop and Mobile

    Support wayfinding by including breadcrumbs that reflect your site's information hierarchy. On mobile, avoid using breadcrumbs that are too tiny or wrap.

  • Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements

    The NN/g website homepage now incorporates variable fonts and a wide-screen layout — 2 technical adjustments which improve the user experience for a subset of users on supported devices.

  • Mobile Tables: Comparisons and Other Data Tables

    Locking headers and allowing users to select a subset of data according to their needs make large data tables usable on mobile devices.

  • Small Pictures on Big Screens: Scaling Up from Mobile to Desktop

    To transition images from mobile to desktop, consider relative screen space and information density. Pay attention to cropping, scaling, and proportions.

  • Don’t Use Split Buttons for Navigation Menus

    Menu on hover, category landing page on click: we discuss challenges and solutions for replicating this pattern on touchscreens.

  • Big Pictures on Small Screens: Remove, Resize or Reorganize

    When using large-screen images on smaller screens, remove images that don’t add information. Then, pay close attention to cropping, scaling and placement.

  • Anchors OK? Re-Assessing In-Page Links

    While jump links have caused problems in the past, they can successfully be used to move users down long pages and directly to content, on any screen size.

  • Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?

    Different approaches to implementing mobile websites have each their advantages and disadvantages. All should follow the same mobile user-experience principles.

  • Supporting Mobile Navigation in Spite of a Hamburger Menu

    Mobile sites using a hamburger or three-line menu need to support navigation activities throughout the site, in case users don't locate or use the main navigation.

  • Progress in Mobile User Experience

    Mobile usability has improved over the past 7 years due to better prioritization of content over UI elements and better understanding of the users’ needs.

  • The Fold Manifesto: Why the Page Fold Still Matters

    What appears at the top of the page vs. what’s hidden will always influence the user experience — regardless of screen size.

  • Responsive Web Design (RWD) and User Experience

    Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices to ensure usability.

  • Homepage Real Estate Allocation

    Websites spend too little homepage space on content of interest to users and fail to utilize modern screen sizes.

  • Tablet Usability

    Flat design and improperly rescaled design are the main threats to tablet usability, followed by poor gestures and workflow.