we've been talking a little bit about CSS or cascading stylesheets what I'd
like to do in this lecture is to talk about how we can leverage cascading
style sheets in a powerful way to reduce the amount of work that we
have to undo in order to have a presentation of our website look good on
multiple different devices that process is called responsive design and so
that's what this lecture is about my name is Professor Donald Patterson
the observation at a high level that we want to tackle is that web design should
be responsive to their environments they should respond to their environments and
bootstrap is one web framework that supports designers in achieving this so
what do I mean when I say responsive well there's a lot of different ideas
about what responsive might mean from the ubiquitous computing community or
the mobile computing community the idea about something being responsive means
that it should be very response it should change how it works based on a
rich understanding of a deep and complicated context that a user is
embedded in so perhaps what the application does changes based on which
location it's at maybe it changes based on time of day ideally it would change
with response to the user and what their intents are what their emotions are and
maybe what their capacities are in the sense of accessibility or distraction
concerns doing one thing if you're driving another thing if you're blind
another thing if you're walking another thing if you're angry another thing if
you're hungry you might also want your application to respond to the weather
and maybe respond to ambient social environment so that your application
does something different if it's in a movie theater during a movie versus a
movie theater after the movie this would be great
it would be terrific if we could have this level of responsiveness in our
applications and it was done well but for the context of this discussion when
I talk about responsive I'm scaling it way down and what I'm talking about is
simply being responsive to the screen size of the device in which a web site
is being experienced in and being responsive to its orientation as well
this seems like a drastic scaling down of the kind of context we'd like our
applications to be aware of and yet it still is quite difficult to do well
so the strategy that we're going to employ in order to tackle this is to try
and just write one set of code that's going to work on multiple different
devices so we could imagine that we would have one website that's for the
iPhone and another website that's for desktop computers and another website
that's for firefox and another website that's for Chrome and another website
that's for Android and another website that's for the Apple watch that would
really be a pain it would be difficult to maintain it would be difficult to
make sure that all the different versions were consistently presenting
the same aesthetic user experience and functionality so what we would like to
do instead is we would like to have one application that through clever design
and through good use of libraries and CSS works well on all of those different
platforms much easier to maintain the alternative is to have all these
different fragmented code bases we want this one set of code to render properly
on multiple different multiple different platforms now it's going to be a
challenge and that's that's the primary reason that's what responsive design is
about is trying to do this one set of code that works on multiple different
devices now challenged that we run into here and the reason why there's a
problem is that devices are constantly being created with new resolutions and
aspect ratios so think about the entire iPhone lineup the iPhones the iPhone 7
plus the incoming iPhone 8 the tablets the iPads and the watches all these
different resolutions and different pixels aspect ratios design a website
that looks good on all of them is challenging that's just Apple devices
what about all the different Android devices all the Kindles all the Sony
devices all the Samsung devices all the Galaxy devices all the HTC devices all
of them potentially having different orientations all been potentially having
different pixel widths and Heights and not just do we have to worry about the
portrait orientation but we also have to worry about the landscape orientation
which doubles all of them and actually creates a very
different design environment for rendering content so that's our
challenge and on top of our mobile devices we also have desktop
environments where who knows what size of what users web browser is in when the
page is being rendered they can just change the size arbitrarily maybe
maximize it to the whole window where maybe minimum minimize it and keep it
down at the bottom corner to keep it out of the way all of these cases need to
have a good rendered web application eard a well-crafted web site will render
well in all these different environments for the sake of maintainability we would
like to do that with just one set of code one set of HTML so the way we're
going to do that is we're going to use a strategy that's based on using the
design layout that uses grids and columns to organize our content this is
taken from publishing industry in the magazine publishing industry and what it
means and it means that we're going to restrict ourselves somewhat in what we
are going to be able to layout on our web pages for the sake of getting
responsiveness across many different platforms so let's think about what it
what that looks like at a magazine context so here's a screenshot of dwell
magazine and you can see that this has a pretty strong visual aesthetic of having
columns and rows in it we overlay some of the different places where the
columns and rows occur and what we're going to do is we're going to duplicate
this layout language this visual language in terms of rows and columns
and then allow the CSS to put those columns and rows in an appropriate place
based on the size of our document the size of our window which is dictated by
the different devices and environments in which our website is being viewed in
now the challenge for doing this is that it's very very difficult to get it right
in all the different web browsers and all the different rendering engines that
are out there it's very difficult to have something that works right in
Internet Explorer and in Chrome and Firefox and in Mac and Android the CSS
and the platform glitches that you run into are
numerous and very complicated you have all kinds of code like this little
screenshots that I've snipped that I've snapshotted here that have to be just
right it has to be tested on all the different platforms that's more than
what a single person really should be doing for a web application and so our
strategy for tackling this is that we're not going to run our own grid system
we're going to use another grid system by loading it as an external stylesheet
this grid system will be creating for us as a library which we can use and as
long as we conform to the conventions that that library asks us to conform to
it will do the work of laying out our web page on all these different
platforms this is a very effective way to get the ability for your website to
be responsive but it requires as designers that we work with in the
systems that these libraries define an example of such a framework it's not
the only one but it's a very common and powerful one is called bootstrap
bootstrap is a free and open-source software library it started as a project
at Twitter called blueprint and Twitter decided to release it to the community
and now it's open source and being developed independently of Twitter it's
primarily a CSS library what does that mean it's an external style sheet which
in but with a bunch of rules that have been written into it that you can
leverage but by attaching class attributes to your nodes in your HTML
tree your elements in your HTML tree there is a little bit of JavaScript as
well to help glue some of these pieces together when you use blue when you lose
when you use bootstrap it causes your webpages to have a default aesthetic
applied to them some people don't like that but fortunately bootstrap also has
the ability to reskin that aesthetic so if you don't like the way it looks when
you use it in the default mode it's possible to load different themes on top
of bootstrap so you get different visual presentations we're going to be talking
about bootstrap for bootstrap for is not quite released yet but it's coming down
the pike it's very powerful and well engineered system for being able to
manage grid layouts and also give you access to a bunch of basic website
functionality this is the logo that you'll see if you go to bootstraps
website where it says that bootstrap is the most popular HTML CSS and JavaScript
framework in the world for building responsive mobile first projects on the
web I don't know about that claim but certainly is a good framework here's an
example of what may be the very simplest bootstrap website can look like using
the version 4 template now most of this code I got from the bootstrap web page
as the template of a basic format so let's walk through some of the
components of it it looked hairy but it's actually all things that we've seen
before and if we take a moment to parse it almost everything we've seen before
if we take a moment to parse it we'll be able to read it all right so for
starters we have an additional attribute in our HT
ml2 la ng attribute and the en value that says that this website is going to
be written in English not doesn't have to be written English but that's what
that means we're going to have a title so it's a responsive webpage example and
then we're going to add some meta tags we're going to say what character set
this file is represented in will use utf-8 and then we'll see a meta line
that we haven't seen before and this is one that has the name attribute set to
viewpoint it has particular value applied to the content attribute and
what this does is it causes this website to be rendered in the way that a
bootstrap expects particularly on mobile devices so that it uses the mobile
device in a way that is consistent with the desktop experience so this is just
boilerplate you just add this to your bootstrap website your bootstrap enabled
website then the next thing that we look at is we look at the external stylesheet
now this external stylesheet we've seen examples of this before we use the rel
attribute and say stylesheet we provide an H ref ref attribute and while the URL
there is complicated it's just a URL it has a scheme HTTP and a post MaxCDN
bootstrap CDN calm this is a organization that volunteers to host the
bootstrap library and we see a file path indicating which version we're currently
using there's an additional attribute called
integrity and that integrity attribute makes sure that the code that we're
downloading or the library that we're downloading is the actual one that we
intend to download this prevents people from inserting code on external sites
and us using it and then us getting code that we didn't expect
so integrity is basically a fingerprint saying that if the code that we get from
the MaxCDN website doesn't match this fingerprint
then then it tells our browser not to use it the cross-origin attribute is
used because we are getting content from someone else's web site so this enables
us to get content from someone else's web site verify it with the integrity
attribute and download it that's details this also is just
boilerplate code but the main thing to realize here is that this is just a
request for an external CSS style sheet one that would have a bunch of selectors
and curly braces and then properties like font family and font size and color
all those things just it's going to be written for us that's in the head
section of our HTML meanwhile down in the body section we have an h1 tag with
the content hello world and then at the very end of our body section we have
three script tags now we haven't talked about script tags but scripts are
Scripture as a third component of a web application where hTML is our content
and CSS is our presentation script is our Java Script which adds interactivity
and so again you can kind of read between the lines what's happening here
we're loading three different bits of JavaScript from external locations
indicated by the source attribute and like our like our CSS external
stylesheet we're asking to make sure that it has a fingerprint that of what
we expect so that we don't run malicious code on our in our users browser so
three script tags and a CSS tag we put all this together and we run it in a web
browser we get a very simple website that says hello world and it's been
styled according to the bootstrap default style
so that's what you that's all you have to do in order to get a bootstrap
website up and running that's enough to give you access to all the functionality
of bootstrap but we haven't talked about what that functionality is or what the
conventions are for building responsive website we'll do that in another lecture
for now I just want to introduce the idea of responsive web design and the
bootstrap framework for further reading particularly if you'd like to know a
little bit about the background of responsive web design here are three
different URLs the first one is from a website and a quote from that article is
creative decisions quite literally shape a physical space defining the way in
which people move through its confines for decades or even centuries working on
the web however is a wholly different matter so this talks about responsive
web design with the context of architectural design the second one says
for many web sites creating a website version for each resolution a new device
would be impossible or at least impractical
should we just suffer the consequences of losing visitors from one device for
the benefit of gaming visitors from another or is there another option this
article is a motivation for responsive web design and then finally of course
bootstrap version 4 of the alpha release of version 4 to see more about the
details of what can be done with bootstrap so in summary responsive web
design adapts to different devices browsers and physical orientations it's
a step along the way to making much more responsive web applications doing this
manually by ourselves would be very difficult because of the variety of
devices and software configurations that are out there so instead we'll use a
framework like bootstrap whose developers have done the work of making
sure that it's going to work consistently on all the different
devices that are available to us in the next lecture we'll look at some details
for how to leverage bootstrap to make websites that we that work the way we
want them to thank you for your attention
you