Introduce Bootstrap 3 to develop RESPONSIVE. design application. Copyright 2014 exo Platform

Size: px

Start display at page:

Claud O’Connor’
5 years ago
Views:

1 Introduce Bootstrap 3 to develop RESPONSIVE design application

2 A presentation by exo UI Team

3 When UI was not a concern

4 Many UI innovation since

5 And some company success to create wonderful design for web application

6 TODAY A unique Wonderful desktop screen is not enough

7 Be ready for future screen

Part of the UI team in exo today Part of

was definitively not the good solution The

8 Part of the UI team in exo today Part of the UI team in exo if we decide to build specific site for each device Build a specific site for desktop, mobile, tablet was definitively not the good solution The first (wrong) idea Build specific site for each devices

9 One Ring Design to rule them all: THE RESPONSIVE DESIGN The good idea Ethan Marcotte forged in secret 2010 a Master Ring Design to control all others. The Dark Lord Sauron

10 Time for specialist Responsive Design Bootstrap 3 Responsive Web Application Demo Responsive exo Platform Keep question on your book note, we will answer at the end Enjoy...

11 What is exactly a RESPONSIVE DESIGN Web application?

12 What is Responsive Design? A unique site that can adapt to any screen size, today or in the future.

13 Responsive vs Adaptive Responsive Continuously resizes when change the width of your screen, no extra empty space on the sides

14 Relative units vs Static units Relative units Use relative units, like percent can adapt to any screen, instead of static units like pixels. Static units

15 Flow vs Static Flow The data content flowing smoothly when screen size change. It s what we name flow in Responsive Design. Static

16 With Breakpoints vs Without Breakpoints With Breakpoints Predict breakpoints when screen size change allow to adapt your content to the screen size Without Breakpoints

17 Vectors vs Images Vector A vector image adapts with Retina resolutions. Quality is the same whatever is the resolution of your screen Image

18 Mobile First Start by developing the CSS for the mobile device first, then have media queries for adapt to tablets, desktops Determine what is most important content

19 Why s Mobile First? Mobile website will prepare more thoroughly than was originally invested. At any size, it's always a good design Avoid overwrite code

20 A free responsive framework BOOTSTRAP 3 originally by Twitter

21 The Bootstrap history Introduce the first major release, Bootstrap 2 Bootstrap was created at Twitter Mid 2010 August 2011 Twitter released Bootstrap as open source project Shipping Bootstrap 3.0 January 2012 February 2012 Become the most starred GitHub development project August 2013

22 Main features of Bootstrap Preprocessors One framework, every devices Full of features

23 t a l F w Ne ign Mobile first Approach des Ne w Gr p o w id s y st e r f u l em What s new in Bootstrap 3 re a t p ri c s a jav tten i New components rewr SASS supp ort s n o c i ph y l G New nt fo n o c i

24 Advantage Create a web application very fast It s natively responsive framework It s fully and easily customisable

25 Disadvantage Hey! My new website looks just like everyone else s!

26 Disadvantage No backward compatibility between versions

27 Competitors

28 Create a responsive WEB APPLICATION using Bootstrap 3

29 Responsive with bootstrap 3 css3 media queries Grid system Responsive utilities Responsive embed and flexible image

30 rule allows website to have a different layout for screen, mobile phone, tablet, etc.

31 Grid System

32 Responsive Utilities

33 How to make EXO PLATFORM responsive with bootstrap 3?

34 Exo product responsive with bootstrap 3 Add the viewport <meta> tag to <head> tag Change the grid system Stop embedding Bootstrap classes in template

35 Exo product responsive with bootstrap 3 Make sure exo UI Component is responsive Update javascript system

36 It s time for THANK YOU see you soon...

Responsive Web Design. Sheri German, Instructor Montgomery College

Responsive Web Design. Sheri German, Instructor Montgomery College Responsive Web Design Sheri German, Instructor Montgomery College Responsive Web Design (RWD)! Coined by Ethan Marcotte through his awareness of what was taking place in the discipline of architecture.!