ProtoFluid4 A Responsive Design Tool - PowerPoint PPT Presentation

hammer
protofluid4 a responsive design tool n.
Skip this Video
Loading SlideShow in 5 Seconds..
ProtoFluid4 A Responsive Design Tool PowerPoint Presentation
Download Presentation
ProtoFluid4 A Responsive Design Tool

play fullscreen
1 / 9
Download Presentation
ProtoFluid4 A Responsive Design Tool
182 Views
Download Presentation

ProtoFluid4 A Responsive Design Tool

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. ProtoFluid4A Responsive Design Tool Report by Susan Paeper

  2. ProtoFluid • ProtoFluid is a tool that simplifies the development of fluid layouts and adaptive CSS. • It builds precise, dynamic viewports in which to test your website or app. • Preview Edition Released (July 2013) • Further features to be announced soon. • Yes, it is free…

  3. Feature Highlights • Viewport definitions for the iPhone, iPad, Nexus 7 and more. • Quick viewport orientation switching. • Perfect for presentations and client demos. • Use your favorite browser development tools. • Tablet support for touch testing. • Unpolluted code so that you can focus on inspecting yours. • Keyboard shortcuts for that extra lick of speed.

  4. Using ProtoFluid • Standard browser navigation buttons apply (back, forward). • The rest of ProtoFluid is controlled by the menu at the top of the screen which includes: • Display more menu options. • Refresh frame. • Toggle height clip/extension. • Switch orientation. • Previous viewport. • Next viewport. • The current location and viewport are also present in the top menu. Tapping each brings up further information and editing options.

  5. Page Rendering • ProtoFluid does not simulate mobile devices. • The gap between desktop and mobile browsers using the same rendering engine is now negligible. ProtoFluid provides an acceptable development approximation.

  6. Viewport Settings • ProtoFluid renders pages at a 1:1 viewport scale. • This is commonly specified for actual devices via the viewport meta tag or @viewport rule.

  7. Media Queries Responsive Design Testing With Media Queries • ProtoFluid takes advantage of the ‘width’, ‘height’ and ‘orientation’ Media Queries. • This lets you style pages based on the viewport containing your website/app. Why Not Device Queries? • Device queries match only the screen configuration. • ‘width’ and ‘height’ are not the same as the ‘device-width’ and ‘device-height’ queries.

  8. Media Queries How Do I Specify Media Queries? • Option 1: Specify the Media Query dependent CSS to load in the HTML. <link href='css/480.css' media='only screen and (min-width: 480px)' rel='stylesheet' /> • Option 2: Specify the Media Queries directly in the CSS itself. @media only screen and (min-width: 480px) { } Orientation Dependent Styling • The ‘orientation’ Media Query facilitates portrait and landscape dependent styling. @media (orientation: portrait) { } @media (orientation: landscape) { }

  9. The End