List of common resolutions. Computer graphics[edit] For the table below, SAR (storage aspect ratio) is based solely on pixel count.
It does not take into account PAR (pixel aspect ratio, pixels may be non-square) and thus the DAR (display aspect ratio, the aspect ratio of the actual image that is displayed) may differ. [note 1] A list of standard designated VGA display resolutions, commonly used in computing and computer monitors, can also be found at Graphics display resolution. Resolutions below HD[edit] HD and up resolutions[edit] Television[edit] For television, the display aspect ratio (DAR) is shown, not the storage aspect ratio (SAR); analog television does not have well-defined pixels, while several digital television standards have non-square pixels. Analog TV standards[edit] Digital TV standards[edit] Films[edit] Video conferencing[edit] See also[edit] Graphics display resolution Notes[edit] References[edit] Further reading[edit] Myers, Robert L. (4 October 2002). External links[edit] Creating a Mobile-First Responsive Web Design.
Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first.
This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size. View the demo Structure Style Less JS.
A Simple, Responsive, Mobile First Navigation. We're going to build a simple, responsive web site navigation.
Our solution will help us place emphasis on the content of our page, arguably the top priority when designing for mobile. There'll be no JavaScript involved, and we'll tackle it from a Mobile First approach. Mobile Navigation If you've read Luke Wroblewski's Mobile First you'll be familiar with his statement that: As a general rule, content takes precedence over navigation on mobile. What he means by this is that mobile users are often looking for immediate answers; they want the content they went searching for, not more navigation options. Many sites, even responsive ones, stick to the convention that navigation belongs at the top of any given page. Take this example from London & Partners: A perfectly decent responsive design, but at standard mobile viewport dimensions (320px x 480px) all you really see is a navigation menu.
So What are the Solutions? Big screen, little screen. Pure CSS Solution Step 1: Markup Step 3: CSS Reset.