Responsive ui

Feb 20, 20150 likes765 views

How to create an application that looks good on multiple devices using HTML & CSS Slide deck from wdc.il session at Microsoft Raanana

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Responsive UI
Ran Wahle

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
One confession before I begin…
I am not a UI designer

Agenda
Our Mission
Viewports
Media Query
Font Size
LESS (Or SASS)
Bootstrap
Fluid Images

Our Mission
Create an application,
The same app for all devices

Why Not?
Redundant elements and code downloaded to the client
Redundant data may be downloaded
Sometimes mobile pages need to look entirely different

Ways to do it
Screens for each device type
The same screen, looks different for each device type

Ways to do it (contd.)
Screen for each device Same screen, looks different
On server side, parse user agent Change styling according to device properties
Direct the user to another URL / Create another screen Relate only to device properties
Client side only
Pros Pros
More organized Less screens to maintain
Less elements to render No server side code

Viewport
An HTML5 meta tag
Define the dimensions of what is being viewed
Define the initial scale
We can set the width to the device screen

Media Queries
Rules of styles depending on media types
We can show / hide areas depending on
screen width
We can change styling depending on width

Relative font size
em units
rem units
Viewport related

Viewport width related
font-size: 1vw; //1% of viewport width
font-size: 1vh; //1% of viewport height
font-size: 1vmin; //1% of the smaller dimension
font-size: 1vmax; //1% of the larger dimension

LESS
CSS pre-processor
Extends CSS
Variables
Mixings

Bootstrap
CSS & Javascript library
Mobile first design
Built in media queries
Declarative and programmatic use of plugins

Bootstrap terminology
xs – Exrta small (Phones < 768px)
sm – Small Medium (Tablets, from 768px to 992px)
md – Medium (992px to 1200px)
lg – Large ( > 1200px)

Bootstrap visibility classes (from getBootstrap.com)
Extra small
devicesPhones
(<768px)
Small
devicesTablets
(≥768px)
Medium
devicesDesktop
s (≥992px)
Large
devicesDesktop
s (≥1200px)
.visible-xs-* Visible Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden
.visible-lg-* Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden

Bootstrap grid system
Proportionally scaled grids
Up to 12 columns

Fluid image
Image width / height with percentage
Use auto to gain some performance

Picture element
HTML5 element
Contains multiple image sources
Each source can have its own media rules

<picture>
<source srcset="../content/images/lastSupper/supper.jpg" media="(min-width:
720px)">
<source srcset="../content/images/lastSupper/supper_1.jpg" media="(min-width:
672px)">
<img src="../content/images/inconceivable.jpeg"
alt="Inconceivable">
</picture>
Picture element

We’ve started with an unresponsive app
Gradually added styles made it more responsive
Using HTML standards we can make our pages responsive
The same HTML & CSS can serve multiple device types
Our app still needs a designer’s touch
Well… I am not a UI guy
So…

HTML5 (MDN) https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5
Media Queries (MDN): https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Media_queries
LESS: http://lesscss.org/
bootstrap: http://getbootstrap.com/
CSS tricks: http://css-tricks.com/
Additional Reading

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Thank you
Ran Wahle
http://blogs.Microsoft.co.il/ranw
Twitter: @ranwahle
ranw@sela.co.il

Responsive web design generates an optimal viewing experience across different devices by using fluid, proportion-based grids and flexible images. Media queries allow different CSS styles based on device characteristics like browser width. Tricon Infotech focuses on building websites that work well on any device now and in the future through responsive design using HTML5, CSS3, and Foundation frameworks. They are located in Bangalore, India and can be contacted via phone or email.

jQuery ReportPaul Ward

This document compares JavaScript libraries JQuery, Mootools, and Rialto. JQuery is the smallest at 16-94KB and supports back button navigation and rich text editing. Mootools is similar in size at 4-74KB but lacks back button support and rich text editing. Rialto is the largest at 520KB and does not support back button navigation, rich text editing, or animation. The document also notes advantages of these libraries are their extensibility and ability to quickly build interactive applications, while a disadvantage is potential browser compatibility issues.

SilverlightTamer Elshahat

This document provides an introduction to Microsoft Silverlight, including what it is, common uses, and comparisons to other technologies. Silverlight allows developing cross-browser rich internet applications using XAML and .NET. It provides rich media capabilities and supports multiple platforms and browsers via an optional plug-in. While HTML5 has advantages of being lightweight and having wider browser support, Silverlight enables richer user interfaces and experiences similar to desktop applications.

IntroductionArnel Robles

This document discusses different types of websites including static, dynamic, content managed, e-commerce, and flash websites. It notes that static websites are the simplest form and don't use server-side processing, while dynamic websites rely on server-side scripting and databases. Content managed websites allow numerous contributors to add, edit, and remove content through a password protected interface. E-commerce websites can process online transactions like an online store. The document also discusses website content management systems and their features like templates, access control, and collaboration tools.

Angular js Classes in Puneharshclassboat

AngularJS is a structural framework for building dynamic web applications. It uses HTML as a template language and extends HTML's syntax to build application components clearly. Angular's data binding and dependency injection reduce the code needed. It works entirely in the browser, making it compatible with any server technology. AngularJS addresses HTML's limitations for dynamic views by allowing declarative programming rather than imperative DOM manipulation. It provides structure, organization, modularity and reusable components for building applications.

SeamVostrikov Arkady

Seam is more than just another web framework - it is a complete application stack. It pulls together standard Java EE APIs like EJB3, JSF, JPA and Hibernate and makes them more accessible, functional and attractive. Seam provides a full solution for building an application from start to finish, unlike web frameworks that are only focused on the user interface layer. Choosing Seam means opting for an integrated platform rather than just a framework.

HTML5 and jQuery MobileKeir Bowden

Introduction to jQueryMobileJeyakumaran Mayooresan

This document discusses a HTML5 framework optimized for mobile devices. It allows cross-platform development for Android, iPhone, tablets and more. Key features include stunning UI controls, hundreds of plugins, and the ability to access device hardware through PhoneGap. Developers need knowledge of HTML/HTML5, JavaScript, jQuery and CSS. The framework offers documentation, reusable code, built-in themes and an online UI builder. While it allows building one app to run on multiple platforms, HTML5 apps may be slower than native apps and unstable at times on lower-end devices. Resources mentioned for support include forums, tutorials and emulators.

Uniface Lectures Webinar - Extending Applications for Mobile Uniface

FRU Kathmandu: Progressive Web Apps - Write Once Run EverywhereLeapfrog Technology Inc.

WEB_Seminar_by_Prashant_WalkePrashant Walke

This document provides an overview of several topics for a seminar: 1) Responsive web design which uses CSS media queries to dynamically adjust a website for different devices like mobile, tablet and desktop. 2) Cross-browser compatibility and ensuring websites render correctly across different browsers through standards-compliant coding and validation. 3) The Firefox extension Firebug which allows editing, debugging and monitoring of CSS, HTML and JavaScript on web pages. 4) Popular payment gateways like PayPal and Authorize.Net that allow accepting payments through websites. 5) Content management systems that enable centralized publishing, editing and maintenance of website content.

Responsive_Web_DesignBalaKrishna Kolliboina

This document discusses responsive web design (RWD), which is a process that creates a single website compatible across devices with different screen sizes and orientations. RWD uses a flexible layout, media queries, and viewport meta tags to dynamically change the layout depending on screen size. Common frameworks that help with RWD include Bootstrap, Foundation, and Semantic UI. Websites can be tested for responsiveness using tools like Responsivetest.net and Responsinator.com.

Responsive DesignDheerajPachauri

This document discusses responsive web design. It begins by defining responsive design as using HTML and CSS to automatically resize and reformat web pages to look good on different devices. It then explains why responsive design is necessary today due to the rise of mobile usage. The document outlines how to check if a site is responsive, the benefits of responsive design like improved user experience, and the major components used to build responsive sites like meta tags, CSS media queries, grid systems, and frameworks. It concludes that responsive design improves the user experience by avoiding unnecessary resizing or scrolling across devices.

Apps World London 2011PayPal

The document discusses how in-app payments work and breaks the process down into modules, including collecting user details, a payment gateway module, a payment logic module, a notification module, and a success/error interface module. It proposes using a mobile payments library to speed up engineering of a payments engine and provides links for more information on PayPal's payment products and developer tech support.

Economical, Robust Web Automation using SahiRIA RUI Society

Sahi is an open source tool for automating web application testing. It uses an easy to use recorder to create test scripts without needing XPaths or waits. Sahi scripts can be written in Sahi Script, Java, or Ruby. It handles AJAX applications and identifies objects without needing developer involvement. Sahi provides advantages over other tools like Selenium and QTP through its recorder, implicit waits, object identification, and ability to run tests across multiple browsers and machines.

Web UsabilityWilson Su

Responsive web design allows a single template to be delivered across all devices by using media queries to detect the device. It allows for longer page loads but existing websites do not need rebuilding. Adaptive web design delivers separate templates for each device through server-side detection, allowing for faster page loads but requiring alterations to existing websites. CSS media queries and breakpoints are important techniques for responsive design, along with fluid grids, modifying box size, spacing, fonts and images based on screen width. Common patterns include revealing, transforming, dividing, reflowing, expanding and positioning content. Single page applications load all necessary code at once allowing speedy secondary page loads but can increase initial load time and complexity.

Silverlight 4 - What's newmaheshs2000

Silverlight 4 includes many new features to improve the developer experience, UI/UX support, capabilities for building business applications, and out-of-browser functionality. It provides enhanced developer tools in Visual Studio 2010 and Expression Blend 4, new controls, drag and drop support, and data binding improvements. Silverlight 4 also features improved printing support, WCF RIA Services, MEF support, and internationalization features for building business applications. Additionally, it allows trusted out-of-browser applications with access to local files, the webcam, and notifications.

THE BREAK-UP - A user interface love storyconnectwebex

Mobile Websshpack

This document discusses challenges in mobile development and exploring the mobile web. It covers topics like mobile device categories, mobile knowledge, browsing experiences, and differences between mobile web sites, hybrid applications, and native applications. Graphic toolkits and debuggers/emulators are mentioned as helpful development tools. Benefits of each approach like cross-platform compatibility, installation experience, and monetization options are compared.

Websmovil 3petio909

Web Applications Are Technically Awesome!MediaFront

A web application utilizes web technologies like HTML, CSS, and JavaScript to create an application experience within a browser. Web applications allow for separation of the application from its resources, only requesting needed data to work offline. This future proofs the application because the application and its resources can be altered separately. Technologies like HTML5, AngularJS, and smart views allow developers to build rich experiences across different devices by dynamically switching templates and views based on factors like device size and user type.

Skill Session - Web Multi Devicefilirom1

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

The document discusses responsive web design and mobile web development. It recommends creating a single page web application that is optimized for all devices as a long term goal. It also discusses challenges like different screen sizes, browsers, and touch vs mouse interactions across diverse devices. The document advocates adapting the web experience according to the device using responsive design principles.

Application development frameworkEastern Software Systems

Responsive Web Design BasicsAustin Walker

Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans

Smarter HATS web application that automatically respond according to the scre...Royal Cyber Inc.

Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra

The document discusses responsive web design (RWD), which is an approach to building websites that dynamically adapt their layout to different screen sizes and devices. It covers the key features of RWD, including flexible grids, images, and using CSS3 media queries to detect screen sizes and orientations. The benefits of RWD are also summarized, such as improved performance, saving time and money. Popular RWD frameworks like Foundation and Bootstrap are also mentioned.

Responsive Web Design | Website DesigningMSA Technosoft

This tutorial will explain Responsive Website Designing. Key Concepts: Responsive Web Design, Website Designing, Mobile is the Future, What is Responsive Web Designs?, Why do we need responsive web design?, Adoptive vs Responsive web designs, Key benefits of Responsive web designs, How does it work?, How you can implement Responsive Websites?, Frameworks, Demo For more detail visit Tech Blog: https://msatechnosoft.in/blog/

Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nlJoomla!Days Netherlands

The document discusses building mobile websites with Joomla and mobile web development in general. It notes that mobile internet usage is growing rapidly and introduces some solutions for creating mobile-optimized websites using Joomla extensions like Mobile Joomla, Mobilebot, and WAFL. It also describes the OSMOBI service which uses transcoding techniques to mobilize existing Joomla and other CMS-driven sites without coding.

More Related Content

What's hot (12)

Uniface Lectures Webinar - Extending Applications for Mobile Uniface

FRU Kathmandu: Progressive Web Apps - Write Once Run EverywhereLeapfrog Technology Inc.

WEB_Seminar_by_Prashant_WalkePrashant Walke

Responsive_Web_DesignBalaKrishna Kolliboina

Responsive DesignDheerajPachauri

Apps World London 2011PayPal

Economical, Robust Web Automation using SahiRIA RUI Society

Web UsabilityWilson Su

Silverlight 4 - What's newmaheshs2000

THE BREAK-UP - A user interface love storyconnectwebex

Mobile Websshpack

Websmovil 3petio909

Uniface Lectures Webinar - Extending Applications for Mobile Uniface

FRU Kathmandu: Progressive Web Apps - Write Once Run EverywhereLeapfrog Technology Inc.

WEB_Seminar_by_Prashant_WalkePrashant Walke

Responsive_Web_DesignBalaKrishna Kolliboina

Responsive DesignDheerajPachauri

Apps World London 2011PayPal

Economical, Robust Web Automation using SahiRIA RUI Society

Web UsabilityWilson Su

Silverlight 4 - What's newmaheshs2000

THE BREAK-UP - A user interface love storyconnectwebex

Mobile Websshpack

Websmovil 3petio909

Similar to Responsive ui (20)

Web Applications Are Technically Awesome!MediaFront

Skill Session - Web Multi Devicefilirom1

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

Application development frameworkEastern Software Systems

Responsive Web Design BasicsAustin Walker

Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans

Smarter HATS web application that automatically respond according to the scre...Royal Cyber Inc.

Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra

Responsive Web Design | Website DesigningMSA Technosoft

Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nlJoomla!Days Netherlands

Adobe 30iun2011Agora Group

This document provides best practices for developing websites and applications for multiple screen sizes. It discusses challenges like varying device sizes and browsers. It recommends a mobile-first approach, exploiting device capabilities, optimizing images, and using techniques like responsive design with media queries or server-side delivery of customized content. Media queries allow attaching different stylesheets based on screen properties, while server-side delivery fully customizes content for each device. The document also provides tips for navigation, interactions, and structuring content adaptably across devices.

Developing Exceptional Mobile ApplicationVincent Perrin

IBM Web Experience Factory is a tool that automates the creation of mobile web applications using standard technologies like HTML, CSS, and JavaScript. It generates native-looking UIs for smartphones and tablets. The tool's dynamic profiling feature allows building multi-channel applications from a single code base that can be tailored for different device types. Web Experience Factory also supports creating hybrid applications that combine web and native features through tools like PhoneGap.

Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio

Uncovering Windows - Silverlight SeminarAbram John Limpin

Responsive DesignCindy Royal

Responsive design aims to provide optimal viewing experiences for websites across different devices by adapting the layout. It uses fluid layouts with relative sizing, media queries to apply different CSS styles based on screen size, and viewport meta tags to control layout on mobile. Ethan Marcotte first described the challenges of responsive design. Now all websites should be developed with responsive characteristics to accommodate varying screen sizes and input types.

Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...RIA RUI Society

Leading frameworks to power your front end developmentBenish Balakrishnan

Cross platform mobile application architecture for enterpriseVenkat Alagarsamy

The document discusses cross-platform mobile application architecture for enterprises. It covers the need for enterprise mobile apps due to workforce mobility trends. It compares native, web, and hybrid approaches and recommends hybrid for supporting multiple platforms. Key elements of hybrid apps include device and screen agnosticism, offline storage, security, and access to device capabilities. Frameworks like Phonegap and technologies like HTML5, CSS, and JavaScript enable hybrid development.

Device aware web frameworks for better programmingSuntae Kim

Responsive Web DesignTung Dang

This document discusses how to create a responsive website. It recommends starting with a mobile-first approach and using relative typography, a flexible grid, and flexible images and video. It also recommends using viewport settings, media queries, and compressing content to make the site responsive across different screens. The key aspects are a mobile-first strategy, relative sizing with em and percent units, a fluid grid layout, responsive images and video, and media queries to adapt the design at different breakpoints.

Web Applications Are Technically Awesome!MediaFront

Skill Session - Web Multi Devicefilirom1

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

Application development frameworkEastern Software Systems

Responsive Web Design BasicsAustin Walker

Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans

Smarter HATS web application that automatically respond according to the scre...Royal Cyber Inc.

Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra

Responsive Web Design | Website DesigningMSA Technosoft

Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nlJoomla!Days Netherlands

Adobe 30iun2011Agora Group

Developing Exceptional Mobile ApplicationVincent Perrin

Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio

Uncovering Windows - Silverlight SeminarAbram John Limpin

Responsive DesignCindy Royal

Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...RIA RUI Society

Leading frameworks to power your front end developmentBenish Balakrishnan

Cross platform mobile application architecture for enterpriseVenkat Alagarsamy

Device aware web frameworks for better programmingSuntae Kim

Responsive Web DesignTung Dang

More from Ran Wahle (20)

Implementing promises with typescripts, step by stepRan Wahle

HTML dialog element demonstration sessionRan Wahle

MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle

Into React-DOM.pptxRan Wahle

Lets go to the backgroundRan Wahle

This document discusses background operations in web applications including background sync, periodic background sync, and background fetch. Background sync allows sending data whenever the network is available, periodic background sync gives the feeling of constant connection to the server even when offline, and background fetch allows downloading content from the network without stopping when the network throttles or stops. These background operations help make the user experience less dependent on the network status.

Permissions apiRan Wahle

The document discusses the new Permission API which provides a unified way for websites to query, request, and revoke user permissions and handle changes. It allows developers to know the permission status without asking, and be notified of changes. Some permissions like camera and accelerometer may not work the same way yet as it is still an experimental API. Links are provided for the specification, MDN documentation, a polyfill, and demo code.

Lets go vanillaRan Wahle

The presentation discusses the evolution of browsers, JavaScript, and frameworks. It argues that while frameworks provide useful features like data binding and routing, they can also lock developers into certain approaches. Reinventing the wheel with vanilla JavaScript is possible using browser APIs and standards like custom elements, attributes, events, and the History API. Programming directly with vanilla JavaScript ensures familiarity with underlying capabilities and flexibility to choose the best tools.

Custom elements Ran Wahle

Web workers Ran Wahle

Web workers allow JavaScript to run in background threads to optimize performance. A worker runs in a separate global context and can communicate with the main thread via messaging. A shared worker can serve multiple browsing contexts and uses ports to send and receive messages between contexts. Workers parallelize work to speed up tasks while shared workers facilitate sharing state across contexts by using a single worker instance.

Using legacy code with micro frontendsRan Wahle

Ran Wahle discusses using micro frontends to integrate legacy code into a modern single page application (SPA) in a peaceful way. A demo is shown integrating three sample applications - one using jQuery, one using Angular 6, and one using Angular 5 and Firebase. Micro frontends allow each application to have its own URL routing and inner routing while reusing backend services. Wrapping applications as custom elements is also discussed as an alternative to iframes for less isolation while still maintaining independence. The talk concludes that micro frontends can help extend legacy code and blend applications together to achieve "world peace" between new and old approaches.

Ngrx one-effectRan Wahle

Angular migrationRan Wahle

Javascript async / await Frontend-ILRan Wahle

Boost js state managementRan Wahle

The document discusses state management in web applications using Redux and MobX. It presents a call center management app to demonstrate both approaches. Redux uses actions, reducers, and middleware for state management with a defined data flow. MobX uses decorators to automatically manage state with less code but less testability. Best practices include connecting only smart components to the store and using the store for reusable data. While Redux is more complex and testable, MobX is more automatic but "magical".

Angular 2.0 change detectionRan Wahle

The document discusses Angular 2.0 change detection. It describes how Angular 2.0 change detection is more efficient and predictable compared to Angular 1.x by using a component-based approach rather than a graph. Each component has its own change detector that is generated at compile time. Change detection occurs top-down via the change detection tree. The document also discusses strategies like OnPush, immutable objects, observables, and manually controlling change detection.

Code migration from Angular 1.x to Angular 2.0Ran Wahle

Async patterns in javascriptRan Wahle

The document discusses various asynchronous patterns in JavaScript, including using events, callbacks with Socket.IO, promises, observables, iterators, generators, and async/await. It provides code examples for promise creation, using the Fetch API, ES2015 iterators, and TypeScript's async/await syntax. The presentation aims to demonstrate asynchronous patterns for event handling, promises, iterators/generators, and async/await in TypeScript and Angular 2.

Angular js 2Ran Wahle

AngularJs 2.0 introduces components as the fundamental building blocks, replacing directives. The presentation covers getting started with AngularJs 2.0, including dependencies, configuration, components, data binding, services, routing and migration from Angular 1. It emphasizes that Angular 2 is a rewrite built on newer standards to improve performance and reduce opinionation. Migration involves componentizing the application and using an upgrade adapter to support a hybrid Angular 1 and 2 app.

Asyncawait in typescriptRan Wahle

The document summarizes a presentation about using async/await to write asynchronous JavaScript code in a synchronous style. It begins with an introduction to promises as the standard pattern for asynchronous programming. It then demonstrates how async/await allows writing asynchronous code that looks synchronous using async functions and the await keyword. Under the hood, async/await uses generators produced by the TypeScript compiler. The presentation includes code examples and demos of geolocation and reverse geocoding using promises and async/await. It concludes with additional resources for learning more about iterators, generators, and async/await.

Angular%201%20to%20angular%202Ran Wahle

Angular 2.0 introduces significant changes from Angular 1.x including a new component-based architecture, use of TypeScript for static typing, and improved performance. The document discusses how to prepare Angular 1.x applications for migration by refactoring into components and using TypeScript. It also provides an overview of key differences in Angular 2.0 like bootstrapping, data binding, dependency injection and services.

Implementing promises with typescripts, step by stepRan Wahle

HTML dialog element demonstration sessionRan Wahle

MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle

Into React-DOM.pptxRan Wahle

Lets go to the backgroundRan Wahle

Permissions apiRan Wahle

Lets go vanillaRan Wahle

Custom elements Ran Wahle

Web workers Ran Wahle

Using legacy code with micro frontendsRan Wahle

Ngrx one-effectRan Wahle

Angular migrationRan Wahle

Javascript async / await Frontend-ILRan Wahle

Boost js state managementRan Wahle

Angular 2.0 change detectionRan Wahle

Code migration from Angular 1.x to Angular 2.0Ran Wahle

Async patterns in javascriptRan Wahle

Angular js 2Ran Wahle

Asyncawait in typescriptRan Wahle

Angular%201%20to%20angular%202Ran Wahle

Responsive ui

1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Responsive UI Ran Wahle

2. How many applications do we need?

3. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com One confession before I begin… I am not a UI designer

4. Agenda Our Mission Viewports Media Query Font Size LESS (Or SASS) Bootstrap Fluid Images

5. Our Mission Create an application, The same app for all devices

6. Why Not? Redundant elements and code downloaded to the client Redundant data may be downloaded Sometimes mobile pages need to look entirely different

7. Why? Maintainability

8. Ways to do it Screens for each device type The same screen, looks different for each device type

9. Ways to do it (contd.) Screen for each device Same screen, looks different On server side, parse user agent Change styling according to device properties Direct the user to another URL / Create another screen Relate only to device properties Client side only Pros Pros More organized Less screens to maintain Less elements to render No server side code

10. Tools

11. Demo Getting started

12. Viewport An HTML5 meta tag Define the dimensions of what is being viewed Define the initial scale We can set the width to the device screen

13. Demo Adding Viewport

14. Media Queries Rules of styles depending on media types We can show / hide areas depending on screen width We can change styling depending on width

15. Demo Adding media queries

16. Relative font size em units rem units Viewport related

17. Viewport width related font-size: 1vw; //1% of viewport width font-size: 1vh; //1% of viewport height font-size: 1vmin; //1% of the smaller dimension font-size: 1vmax; //1% of the larger dimension

18. Demo Relative fonts

19. LESS CSS pre-processor Extends CSS Variables Mixings

20. Demo LESS

21. Bootstrap CSS & Javascript library Mobile first design Built in media queries Declarative and programmatic use of plugins

22. Bootstrap terminology xs – Exrta small (Phones < 768px) sm – Small Medium (Tablets, from 768px to 992px) md – Medium (992px to 1200px) lg – Large ( > 1200px)

23. Bootstrap visibility classes (from getBootstrap.com) Extra small devicesPhones (<768px) Small devicesTablets (≥768px) Medium devicesDesktop s (≥992px) Large devicesDesktop s (≥1200px) .visible-xs-* Visible Hidden Hidden Hidden .visible-sm-* Hidden Visible Hidden Hidden .visible-md-* Hidden Hidden Visible Hidden .visible-lg-* Hidden Hidden Hidden Visible .hidden-xs Hidden Visible Visible Visible .hidden-sm Visible Hidden Visible Visible .hidden-md Visible Visible Hidden Visible .hidden-lg Visible Visible Visible Hidden

24. Demo Using bootstrap

25. Bootstrap grid system Proportionally scaled grids Up to 12 columns

26. Demo Bootstrap grid system

27. Fluid image Image width / height with percentage Use auto to gain some performance

28. Demo Fluid images

29. Picture element HTML5 element Contains multiple image sources Each source can have its own media rules

30. <picture> <source srcset="../content/images/lastSupper/supper.jpg" media="(min-width: 720px)"> <source srcset="../content/images/lastSupper/supper_1.jpg" media="(min-width: 672px)"> <img src="../content/images/inconceivable.jpeg" alt="Inconceivable"> </picture> Picture element

31. Demo Picture element

32. Questions

33. We’ve started with an unresponsive app Gradually added styles made it more responsive Using HTML standards we can make our pages responsive The same HTML & CSS can serve multiple device types Our app still needs a designer’s touch Well… I am not a UI guy So…

34. HTML5 (MDN) https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5 Media Queries (MDN): https://developer.mozilla.org/en- US/docs/Web/Guide/CSS/Media_queries LESS: http://lesscss.org/ bootstrap: http://getbootstrap.com/ CSS tricks: http://css-tricks.com/ Additional Reading

35. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Thank you Ran Wahle http://blogs.Microsoft.co.il/ranw Twitter: @ranwahle [email protected]

Responsive ui

Recommended

More Related Content

What's hot (12)

Similar to Responsive ui (20)

More from Ran Wahle (20)

Responsive ui