Following a day session in March 2012 spent looking at design with different screen sizes as part of my apprenticeship.
My understanding of design on different devices
Nowadays, content must be developed to be viewed and interacted with across a range of screen sizes, from smartphones to widest flat-screens. With devices becoming increasingly abundant in our daily lives, people are shifting from one device to device, and they expect their product and services to shift with them. Regardless of what size screen your content is on, people expect a delightful experience across devices.
I understand there can be 5 different device screen groups from tiny to desktop, each with a variety of PPI (Pixels Per Inch):
| PPI – Pixels per inch have been changing dramatically following the new devices in stores to date, for example the Notebook with 133ppi, the Apple iPhone with 160ppi and the E60 Nokia with 240ppi. These are very small screens and need a lot of pixels to create an even look. Pictures are shown below: |
- Tiny:84, 96, 101, 128, 130, 132
- Small: 160, 176
- Medium: 208, 220, 240
- Large: 320, 360, 480+
- Desktop: 800+
Note: this is an arbitrary example.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Web development site 