introduce bootstrap 3 to develop responsive design application
Post on 04-Jul-2015
30.895 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduce Bootstrap 3 to develop
RESPONSIVEdesign application
Copyright 2014 eXo Platform
Copyright 2014 eXo Platform
A presentation
by eXo UI Team
When UI was not a concern
Copyright 2014 eXo Platform
Many UI innovation since
Copyright 2014 eXo Platform
And some company success to create wonderful design for web application
Copyright 2014 eXo Platform
A uniqueWonderful desktop screen is not enough
Copyright 2014 eXo Platform
TODA
Y
Be ready for future screen
Copyright 2014 eXo Platform
Build specific site for each devices
Copyright 2014 eXo Platform
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
Copyright 2014 eXo Platform
The Dark Lord Sauron Ethan Marcotte forged in secret 2010 a Master Ring Design to control all others.
One Ring Design to rule them all:
THERESPONSIVE DESIGN
The good idea
Time for specialist
Copyright 2014 eXo Platform
Enjoy...Keep question on your book note, we will answer at the end
1. Responsive Design2. Bootstrap 33. Responsive Web Application 4. Demo5. Responsive eXo Platform
What is exactly a
RESPONSIVE DESIGNWeb application ?
Copyright 2014 eXo Platform
What is Responsive Design ?
A unique site that can adapt to any screen size, today or in the future.
Copyright 2014 eXo Platform
Responsive vs Adaptive
Copyright 2014 eXo Platform
Continuously resizes when change the width of your screen, no extra empty space on the sides
Responsive
Relative units vs Static units
Copyright 2014 eXo Platform
Use relative units, like percent can adapt to any screen, instead of static units like pixels.
Relative units Static units
Flow vs Static
Copyright 2014 eXo Platform
The data content flowing smoothly when screen size change. It’s what we name flow in Responsive Design.
Flow Static
With Breakpoints vs Without Breakpoints
Copyright 2014 eXo Platform
Predict breakpoints when screen size change allow to adapt your content to the screen size
With Breakpoints Without Breakpoints
Vectors vs Images
Copyright 2014 eXo Platform
A vector image adapts with Retina resolutions. Quality is the same whatever is the resolution of your screen
Vector Image
Mobile First
Copyright 2014 eXo Platform
● 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
Why’s Mobile First ?
Copyright 2014 eXo Platform
● Mobile website will prepare more thoroughly than was originally invested.
● At any size, it's always a good design
● Avoid overwrite code
A free responsive framework
BOOTSTRAP 3originally by Twitter
Copyright 2014 eXo Platform
The Bootstrap history
Copyright 2014 eXo Platform
Mid 2010
August 2011
February 2012
January 2012
August 2013
Bootstrap was created at Twitter
Twitter released Bootstrap as open source
project
Become the most starred GitHub development
project
Introduce the first major
release, Bootstrap 2
Shipping Bootstrap 3.0
Main features of Bootstrap
Copyright 2014 eXo Platform
Preprocessors One framework, every devices
Full of features
New components
What’s new in Bootstrap 3 SA
SS
su
pp
ort
New
Gly
phic
ons
icon
fon
t
Copyright 2014 eXo Platform
New powerful
Grid systemN
ew
Fla
t
de
sig
nMobile first
Approach
jav
as
crip
t are
re
writ
ten
● Create a web application very fast
● It’s natively responsive framework
● It’s fully and easily customisable
Advantage
Copyright 2014 eXo Platform
Disadvantage
Hey! My new website looks just like everyone else’s!
Copyright 2014 eXo Platform
Disadvantage
No backward compatibility between versions
Copyright 2014 eXo Platform
Competitors
Copyright 2014 eXo Platform
Create a responsive
WEB APPLICATIONusing Bootstrap 3
Copyright 2014 eXo Platform
Responsive with bootstrap 3
Copyright 2014 eXo Platform
● css3 media queries
● Grid system
● Responsive utilities
● Responsive embed and flexible image
What is @media ?
Copyright 2014 eXo Platform
@media rule allows website to have a different layout for screen, mobile phone, tablet, etc.
Grid System
Copyright 2014 eXo Platform
Responsive Utilities
Copyright 2014 eXo Platform
How to make
EXO PLATFORMresponsive with bootstrap 3?
Copyright 2014 eXo Platform
Exo product responsive with bootstrap 3
Copyright 2014 eXo Platform
● Add the viewport <meta> tag to <head> tag
● Change the grid system
● Stop embedding Bootstrap classes in template
Exo product responsive with bootstrap 3
Copyright 2014 eXo Platform
● Make sure eXo UI Component is responsive
● Update javascript system
It’s time for
THANK YOUsee you soon ...
Copyright 2014 eXo Platform
top related