Day 35 - Device Breakpoints and Screen Size Detection

With so many new different computing devices on the market,  there are no common screen sizes. Breakpoints are the point at which your site's content or layout breaks on a device and needs to be adjusted for clarity and usability.

By adding breakpoints and screen detection rules about width and styling in the code (media queries in the CSS) your site's layout and typography can adapt legibly to multiple devices and screen sizes.

Test your web apps and sites on as many different devices as you can get your hands on. When the layout isn't working at a particular width and needs to be adjusted, define your own breakpoints in the CSS and adapt the layout.

Breakpoint rules of thumb:

• Typically change styling of your documents so that it's best suited for the user using their device.
• Always be concerned with readability and font sizes.
• When designing for "mobile first" think "content first". It's the content and your design flow that defines the breakpoint, not the pixel width of the most popular device.
• Make your designs adaptive so that they're future friendly as widths are growing and changing.
• Horizontal scrolling is a bad idea.
• It's not probable that you can cover all device types, but try and design usable solutions for your customer segments.

Day 23 - What is Responsive Design?

People use phones, tablets, and desktop computers every day, and there are more devices on the way. With so many form factors, one strategy to display content appropriately for a device is responsive design. Responsive web design is a type of design strategy where you create once and run your content everywhere e.g. phone, tablet, desktop. The site design automatically adapts to how the site is being viewed. In other words, the website responds to the needs of users based on the devices they're using.

An advantage of responsive design is that you maintain one design system rather than building and maintaining separate apps for the various device types.

When designing for responsive:

1. Define the problem.
2. Start with the content. It's not safe to assume screen sizes, they're changing.
3. Design and develop prototypes using gird frameworks such as Foundation or Twitter Bootstrap.

Responsive techniques allow your product to be flexible and adjustable to the different device types and screen sizes while being accessible and future friendly.

Here are some responive design examples.

Take a look at websites on both your phone and a laptop to see how they respond.  Are they using responsive design? Are they using two different systems like mobile web and a desktop web design?

Day 21 - Mobile Device Fragmentation

There's dozens and dozens of smartphone and tablet manufacturers which means device diversity with large numbers of different screen sizes, densities, and resolutions.  We need to develop a basic understanding and be aware of this when designing for mobile.  Designing for the wide variety of sizes and densities can be challenging.

When designing for mobile:

1. UI needs to be able to adapt to those different devices.
2. Know the difference between responsive design, mobile web, native apps, hybrid apps.
3. Don't think that a smartphone screen is a small desktop screen. They are different experiences.
4. Understand the basic leading target platforms Apple's iOS, Android, and Windows Phone.
5. Understand why you are choosing one platform over another.
6. Understand the context of how your mobile app will be used by your target user.
7. Plan early so as to minimize the amount of time and effort required for your platform/s.
8. Have a basic understanding of the phone's built-in hardware capabilities that can enhance the experience.
9. Pay attention to device density and documentation.

Take a look at ScreenSiz.es
It's a screen size chart of common mobile devices sortable by device name, operating system, screen size, resolution, pixels per inch, density, and popularity.