in the last couple of lessons we have been improving the user experience of
our application
but all of this isn't enough when you need to go mobile
let's see how the application looks like
in a tablet device and to do this
I'm going to use these buttons here on the toolbar
the device preview buttons and these allow you to test
how your application is going to look like
in different form factors so for instance in
tablet portrait mode and as you can see here
our application in a tablet would already have
some horizontal scrolling and
if we go into a smartphone mode
you notice that now we have
even more horizontal scrolling and some of the content
some of the content of the page is already hidden
from the user site and
and I want to fix this and to fix this I am
actually going to change the theme of my application
to use the London theme the London theme
is a responsive theme which makes it easier for developers to design an
application
that looks and behaves grate on desktop
and mobile devices without having to implement different screens
for different form factors so to do this
let me go here to the theme and change here
the base theme of my application from Chicago
to London and you'll notice that
well first of all the change is smooth your application is still
you're still able to publish there are no errors so
everything
changed smoothly and one other thing you notice and this is
the important part is that now now your content
the content of your page adapted
to this form factor you no longer have an horizontal scroll on this page
and you notice that the action
the action that we have for instance the action that we have to create a new
employee
is also adapted to this form factor
while on a smartphone we have this
icon to create a new employee if we go into
tablet portrait mode you notice that
now we have space here
in this form factor to have also the
text of the link visible as well and another thing you'll notice is that
on both of these form factors you
you see no menu here there's no menu here and this is because
the menu is actually hidden under this
option here and it slides when you press here
it slides from the right and it shows the options on the menu
now let me just change here
let me just change here the size of this container
that we change in the previous lesson it doesn't work now
well on this London theme so let me just
resize these to the twelve columns of our grid
and let's see this in the browser now
first thing you'll notice is that actually when you are previewing this
application
on a tablet device
when you go to the browser you are also
on this preview mode this is not actually your application
okay your position is just what what's inside this
this tablet frame here but this allows you to test on the browser
again the same form factors you tested
when you changed the application so here it is our application
on a tablet portrait mode you notice that everything
everything is visible there's no horizontal scrolling we have
big buttons and this is to promote the usage
of our hand on touch devices
and let's see how this looks in a smartphone
you notice that on a smartphone now the buttons
stack and the inputs they stack on top of each other to make it
easier to input data here
the link adapted to this form factor so we no longer have
we no longer have the text of the link and
and everything fits in place beautifully
and you notice that the options on the menu as I said they slide
from the right and tou have them here
and if we go back to the desktop mode
you notice that everything is still there
now we improved the usability of our application
we took it a step further by
creating a responsive application so know our application is also
able to adapt to different form factors
there's one final thing that we usually do
in our application which is to customize
is to customize the look and feel of our application
to match our branding of our company
so let's go back and change our application to do this
and to customize the London theme
I'm going to show you
how you can do this here on the theme let me open the
style sheet
you noticed that the style sheet for our application
has a link here and this link let me
click on it this will lead you to a tool
that helps you customize the London theme
and all you need to do here all we need to do to create
this customization is to choose the logo
of our application so let me choose our directly logo
and you notice that
this tool already adapted to
have here the logo that I just selected and you can further customize this you
can
you can change the main color: for instance
so let's say that we have blue and you can change
the background so I want a blue background on the header
and can also change the font and so on and all you need to do
all you need to do to have this customization
in your application is to select
the CSS here on this input
let me just copy it and get back to change my application
I'm going to paste it here so you have here the instructions so
go there to that link customize
the theme and then paste the CSS here
okay so there we have our application with
working on a tablet device working
also on a smartphone
and also on desktop and now with the customization
that we have so let me just publish this and see our vacation again
okay so here we have our application now with our branding
image and again
everything fits in place so the inputs now stack on top of each other
and if you go to tablet we still have
the customizations that we did on this page and if we go to desktop
there we have it now one final thing that I would like to leave you with
in this lesson is where you can get
more information about this London theme
and how to use it so let me get back here to the application
and show you again here on the theme
when you select the London tab so this is the the base theme tab
again you have here another link let me click
on it and this link will
lead you again to the same tool and
to the documentation of the London theme so this is comprehensive documentation
about
the London theme it includes how it works
how you fine-tune the experience in different form factors
by applying existing styles that you have on this theme
and also and let me show you that that's the final thing I want to show
you
a list of patterns
that you commonly use in your applications
and that you can get more information on how to implement them
you can even get you can even get the source
of this application for you
to see how to implement these patterns
and that's it!