1 / 9

ProtoFluid4 A Responsive Design Tool

ProtoFluid4 A Responsive Design Tool. Report by Susan Paeper. 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)

hammer
Download Presentation

ProtoFluid4 A Responsive Design Tool

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related