Tdf responsive design101_v1
Post on 01-Jul-2015
179 Views
Preview:
DESCRIPTION
Transcript
ResponsiveDesign101
August 2014
Breakpoints
Rely on media queries
Set at specific pixel widths
Common size / width patterns for mobile, tablet and desktop
Responsive and Adaptive Design both rely on the idea of “breakpoints,” which alter layout, structure, font sizes, UI elements and generally hide / show content differently based on device screen sizes (using media queries).
Breakpoints are set at specific browser width points and can be defined using minimum width, maximum width, or both (page height should never be fixed).
Typically, breakpoints are set based on most common device / screen sizes, which are: 320 pixels (phone portrait)490 pixels (phone landscape)768 pixels (tablet portrait)
1024 pixels (tablet landscape / small desktop)1280 pixels (most common desktop)1600 pixels (large desktop / TVs)
2 / 17 v1
Responsive vs. Adaptive
Responsive is fluid
Adaptive “snaps”
You can mix and match
Responsive Design: a design that will fluidly change and respond to fit any screen or device size, and is coded using percentages.
Adaptive Design: A design that will change to fit a predetermined set of screen sizes based on fixed widths, coded using pixels.
The two approaches can be mixed by creating a site that is fluidly responsive until a certain breakpoint, at which point it switches to adaptive (or vice versa).
90%1280px
3 / 17 v1
Responsive or Adaptive?
Responsive = content focused
Adaptive = design focused
Consider budget, responsive is less in the long run
If content is most important to the site, choose responsive to ensure the widest possible range of device / screen resolution support.
If design is more important, choose adaptive to ensure that layout, type, and spacing are precisely respected.
Budget is also a consideration. As responsive focuses on a pattern design / development, it takes less time and is more “universal.” In contrast, adaptive focuses on precision design, taking more time to ensure correct display at different breakpoints.
4 / 17 v1
What are some practical implications?
Adaptive may be more optimized
Responsive uses pattern design
Adaptive is easier to understand for traditional designers
Adaptive uses server side technologies to deliver only required content, including images, that have been optimized specifically for a device type (i.e. mobile, tablet, desktop). This also means that you can deliver an entirely different experience based on device type.
Adaptive is often easier to understand and design, because you can create different experiences for different platforms. However, this can be confusing for users accessing the same site from multiple devices as the experience is not necessarily universal.
Responsive requires more planning upon implementation. Conceptual planning up front is needed in order to correctly apply responsive patterns. Pattern design has to be thoroughly understood by the designer (this means letting go of fixed widths and precise spacial relationships).
5 / 17 v1
Steps to take for high quality design
Think mobile first
Pattern design vs. precision design
Understand variations in device and screen size
Approach concepts from the mobile first perspective, as it is the top choice for user browsing. Mobile first forces design to focus on important content and functionality.
Understand that there are huge variations in screen sizes and new devices are being released all the time. To prepare for this, keep your design as fluid as possible to accommodate for the old and the new.
Think pattern design vs precision design. In most cases not only does the screen size change, but also the content.
6 / 17 v1
Layout and Content
Don’t design for best case only
Defend against “no content” state
Don’t forget responsive means pattern design vs. precision design
Take into account the possible lengths of content and design with flexible length in mind. This could mean preparing a text field that can fit the longest possible names, different language names, etc.
Don’t forget to account for “no content” state. What if there are no users registered or no comments posted?
Remember that responsive sites rely on percentages. It is not possible to take a precision level approach when designing these layouts.
7 / 17 v1
Usability
Interaction means many states
Sizing should be context relative
Capabilities and interaction should change with context
Websites or web applications components usually have more than one state. These states include but are not limited to:
When thinking about breakpoints take into account how the user interacts. For example, “touch points” usually have to be larger (at least 40x40 pixels).
Take into account different interactive capabilities of touch devices. Can the same clicking interaction be done using a swipe motion on mobile? or two fingered tap?
disabled buttons controls vs. selected buttons touched vs. clicked on buttons
8 / 17 v1
Graphics and Images
Choose vectors over pixels
Cropping, like content, can be dynamic
Always try to use vector graphics (SVG) for buttons, elements and logos as newer devices have higher resolution capabilities and graphics can look pixilated.
In a fluid layout where dimensions of elements can change, don’t always count on images be-ing cropped exactly as you want them. In addition, text and content on top of the image will not always remain in the same relative position.
9 / 17 v1
Style Guide Concepts
You don’t have to design every page
Remember to keep rules universal
Use pixels for adaptive, and percentages for responsive
It’s not required to design every page and every state of an application. For example, an ap-plication or site with multiple forms only needs one form designed. The rest can be pat-terned from the single design with accompanying style guide notes.
In all cases, rules should be as universal as possible. This avoids errors, increases usability of the application, and allows the solution to be more optimized all while decreasing design and development work. For example, primary headers should always be the same distance from content, or the distance between input fields should always be the same.
Use the right type of measurement depending on the approach you take - pixels for adaptive and percentages for responsive (in the case of adaptive each breakpoint should have notes).
10 / 17 v1
Style Guide Examples - Overall
Provide global styles for fonts and colours
Identify font families and ensure each heading type is included Identify font weights / types used and outlined usage for specific elements or patterns (i.e. paragraph, vs pull quote, vs twitter feed) Use type kit if possible
Provide Global colour chart
Each colour should have HEX equivalent
Provide global layout rules
Adaptive or Responsive? What are the breakpoints?
What are universal behaviors for menus / footers / galleries?
11 / 17 v1
Style Guide Examples - Pages
Distance relationships between elements
In pixels for adaptive In percentage as responsive
If layout is adaptive, provide outline for each breakpoint (i.e. what is the distance between menu items at a lower or higher breakpoint?)
Layouts that are responsive down to the mobile level usu-ally reflow content, and in such cases a separate design should be included with a similar guideline Clearly identify elements that reflow, and the relationship to the larger breakpoint Remember that elements fall below from left to right; if you have element A to the left of element B in desktop, and they stack on mobile, element B will always go below element A
For free tips on preparing style guides and design files go to tdfcreative.com/psd
12 / 17 v1
Elements change as the browser width changes, removing or adding content and repositioning appropriately for the use case.
www.foodsense.is
13 / 17 v1
14 / 17 v1
Completely fluid layout ensures content is legible on any screen size, andunique architecture means it’s also fully accessible and SEO compatible.
www.thedevelopmentfactory.com #devfactorybuilt
15 / 17 v1
Totally fluid layout is combined with transitioning and resizing elements to give the site a truly dynamic feel - elements open and close inline as well.
www.theneedforspeedmovie.com #devfactorybuilt
16 / 17 v1
A completely fluid layout is combined with transitions and animations - elements change depending on context (mobile vs. desktop).
www.futureshopgrants.ca #devfactorybuilt
Los Angeles
126 E. Alameda Ave, Suite 203
Burbank, CA, 91502
213.814.5520
Toronto
67 Mowat Avenue, Suite 545
Toronto, ON, M6K 3E3
416.922.0706
Krakow
ul. Dielta 93/7
31-031 Kraków
+48.128.811.964
www.thedevelopmentfactory.com
top related