www.exoplatform.com - The second session of "eXoers on the grill" presentation in Vietnam. After a very good start last month about the Git Rebase Functionality presented by Trong from the Portal team the subject of this session was the Responsive Design.
This presentation was prepared and presented by all members of UI Team: Giang, Hoa, Trung and Thibault.
eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.
5. And some company
success to create
wonderful design
for web application
Copyright 2014 eXo Platform
6. A unique
Wonderful
desktop
screen is
not enough
Copyright 2014 eXo Platform TODAY
7. Be ready for future screen
Copyright 2014 eXo Platform
8. 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
9. 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:
THE
RESPONSIVE DESIGN
Copyright 2014 eXo Platform
The good idea
10. Time for specialist
1. Responsive Design
2. Bootstrap 3
3. Responsive Web Application
4. Demo
5. Responsive eXo Platform
Enjoy... Keep question on your book note, we will answer at the end
Copyright 2014 eXo Platform
11. What is exactly a
RESPONSIVE DESIGN
Web application ?
Copyright 2014 eXo Platform
12. What is Responsive Design ?
A unique site that
can adapt to any
screen size, today
or in the future.
Copyright 2014 eXo Platform
13. Responsive vs Adaptive
Copyright 2014 eXo Platform
Continuously
resizes when
change the
width of your
screen, no
extra empty
space on the
sides
Responsive
14. 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
15. 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
16. 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
17. 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
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
Copyright 2014 eXo Platform
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
Copyright 2014 eXo Platform
20. A free responsive framework
BOOTSTRAP 3
originally by Twitter
Copyright 2014 eXo Platform
21. 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
22. Main features of Bootstrap
Preprocessors One framework,
every devices
Copyright 2014 eXo Platform
Full of
features
23. New Flat
design Mobile first
Approach
What’s new in Bootstrap 3
Grid system
New components
New powerful
SASS support
New Glyphicons
icon font
Copyright 2014 eXo Platform
javascript are
rewritten
24. Advantage
● Create a web application very fast
● It’s natively responsive framework
● It’s fully and easily customisable
Copyright 2014 eXo Platform
25. Disadvantage
Hey! My new
website looks just
like everyone else’s!
Copyright 2014 eXo Platform
33. How to make
EXO PLATFORM
responsive with bootstrap 3?
Copyright 2014 eXo Platform
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
Copyright 2014 eXo Platform
35. Exo product responsive with bootstrap 3
● Make sure eXo UI Component is responsive
● Update javascript system
Copyright 2014 eXo Platform
36. It’s time for
THANK YOU
see you soon ...
Copyright 2014 eXo Platform
Notes de l'éditeur
I will introduce you Bootstrap 3, the best free framework to develop Responsive Design web application
Let's talk a little bit about the history of Bootstrap, Bootstrap was created....
Bootstrap is a very useful framework to develop UI of web application. It include preprocessor features for Less and Saas. It allows you to manage design for any device: Yes it's a responsive desgin framework! And it's full of nice features.
Most of you alredy know Bootstrap 2 because we use it in PLF today. But the latest version of Boostrap is the version 3 and contains many new features compare to Boostrap 2 like: Flat design, ....
Develop with Bootstrap have many advantages, for instance you can easily develop a website with a nice UI fastly with Bootstrap. Also...
Of course like any other framework, Bootstrap have also some disadvantages. One of the big reproach you can heard about Boostrap is that is killing original design: All websites looks the same.
Also and this is a concern for us in eXo to migrate to Bootstrap 3 is that they are no backward compatibility between version. So it's not trivial to change from Bootstrap 2 to Bootstrap 3
Bootstrap is not the only Responsive Design framework today. If you are interested I invite you to check Skeleton and Foundation that are other frameworks
You know what is responsive design and you know what is Bootstrap 3. Now it's time to learn how to develop responsive web applications using Bootstrap 3.
I will present you quickly in coming slide these technical feature of Bootstrap that Giang will demonstrate to you just after.
http://jsbin.com/xihuco/latest
In this last section I would like to introduce what we have to do upgrade eXo to Bootstrap 3.
I remember you that Bootstrap 3 has no backward compatibility with Bootstrap 2.
But for your future development there are some rules to follow for facilitate the migration in future of eXo to Responsive Design and maybe Bootstrap 3