Ci logo

User Experience

Responsive Design

As we move forward in designing for CustomInk mobile devices are becoming an important part of our eco-system and with that designing for multiple screen sizes. In some cases, we may still decide to have certain experiences that are optimized for screen size because it will yield to better usability and visual aesthetic. However the in the majority of cases will want to take advantage of the benefits of uniting one code base and one content set across multiple devices. Where possible, we should take a content first, mobile second approach to our architecture and designs. Further more, our designs will employ best practices per breakpoint which should be considered when creating optimized designs.

A few great resources for learning more about design for content and multi-screen experiences are.

Responsive Grid

CustomInk will utilize four breakpoints for our responsive grid. A breakpoint is merely the point in which the design changes to accommodate a different screen-size. Between each breakpoint the page is to be fluid, in this way the breakpoint will accommodate a range of devices. The breakpoints that were chosen for our grid are suggestions for where designs seem to most commonly need to have the most adjustment.

It should be noted that our breakpoints are suggested breakpoints. However, with a content first approach, the breaks should actually occur where the content or design breaks. Our development environment has been built in away that breakpoints can, in fact, vary per page if needed. Also, our global elements (header, footer, menus) have been designed for consistency regardless of the dictates of the page. This means that as a person moves from page to page on their device that should expect to have a consistent experience, while at the same time enjoy content that fits properly and not forced into an artificial frame.

At this point, don’t worry too much if you notice that the initial breakpoints on your breakpoint graph simply won’t do. Those were just a starting point, and you’re free to revise your estimate based on your sketches. You might even decide that you need an extra breakpoint for a given design

-Stephen Hay, Designing for Breakpoints

The Break Points

...

Default (a.k.a small)

Having an approach that starts design from the small screen size up, the default size is small screen size. Loosely speaking, the default range is sized from the Galaxy Note Portrait and smaller. This covers most smart phones.

Medium

The medium break ranges loosely from Galaxy Note Landscape to iPad Portrait.

Large

The large break ranges loosely iPad landscape to Desktop.

X-Large

The x-large is reserved for full screen experiences large desktops such as the iMac 21.5. This range is reserved for special use. In most cases, these screens will be served a large breakpoint experience that has been centered within the browser.

TIP: File-naming

When naming flat files, make them clear through a strong file-naming conventions {filename}.{ext} | {filename}_md.{ext} | {filename}_lg.{ext}.

For example: home.png | home_md.png | home_lg.png

Responsive Typography

16 pixels (aka 1rem)

Across the web 16px is being adopted as the default base font size. For most fonts, this size is comfortable for reading and looks lovely across devices. Modern browsers, both desktop and devices, use 16px as the default size. This means that using 16px as our base font size will make our body text clear and readable regardless of the device the device that users choose to use. Since we are working are creating a typography system to be responsive across screen sizes, we want to start using rem instead of px. 1rem is equivalent to 16px, when using the browser default of 16px.

Modular Scale

An interest effect of using smaller screen sizes is that the relative scale between font sizes becomes exaggerated. The further away the font is from that 1rem base the larger or smaller it appears on the small screen. 48px or 3rem looks incredibly large on a small screen, although that is a common H1 size for large screens. Anything below 12px (0.75rem) is barely legible. However, establishing a nice range of sizes is preferable on the large screen where text blogs need a much stronger hierarchy established for the amount of real estate the screen affords. The best approach to solving for this problem is to have a system of responsive typography.

Just as elements of a page are adjusted for the screen size, type face adjust along with the breakpoints.