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.

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

2. Copyright 2014 eXo Platform
A presentation
by eXo UI Team

3. When UI
was not a
concern
Copyright 2014 eXo Platform

4. Many UI innovation since
Copyright 2014 eXo Platform

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

26. Disadvantage
No backward compatibility
between versions
Copyright 2014 eXo Platform

27. Competitors
Copyright 2014 eXo Platform

28. Create a responsive
WEB APPLICATION
using Bootstrap 3
Copyright 2014 eXo Platform

29. Responsive with bootstrap 3
● css3 media queries
● Grid system
● Responsive utilities
● Responsive embed and flexible image
Copyright 2014 eXo Platform

30. What is @media ?
@media rule allows website to have a
different layout for screen, mobile phone,
tablet, etc.
Copyright 2014 eXo Platform

31. Grid System
Copyright 2014 eXo Platform

32. Responsive Utilities
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