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.
Content dispersion occurs when the content of a responsive webpage appears overly large and stretched out on large laptop or desktop screens. What negative affects can it create?
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.
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.
Responsive web design adapts to various screen sizes while emphasizing developmental efficiency over device-specific designs. It's key to prioritize content based on different contexts of use across devices and create a cohesive experience for all users.
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.
Form filling and other user input on mobile devices such as smartphones can be awkward and error prone, but by taking advantage of the strengths of the phone, designers can improve the usability of these tasks substantially.
Sliding hero images that rotate through a set of promotions, news, or the like on the top of web pages are often annoying to users and are definitely error prone, unless they are designed according to usability guidelines.
Support wayfinding by including breadcrumbs that reflect your site's information hierarchy. On mobile, avoid using breadcrumbs that are too tiny or wrap.
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.
To transition images from mobile to desktop, consider relative screen space and information density. Pay attention to cropping, scaling, and proportions.
When using large-screen images on smaller screens, remove images that don’t add information. Then, pay close attention to cropping, scaling and placement.
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.
Different approaches to implementing mobile websites have each their advantages and disadvantages. All should follow the same mobile user-experience principles.
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.
