- 00:00:01 welcome back to our beginners guide two
- 00:00:03 videos left for the CSS part of the
- 00:00:06 series in this video it's time to talk
- 00:00:08 about the viewport meta tag and about
- 00:00:11 media queries because we want to make
- 00:00:13 our site a little bit more responsive
- 00:00:20 before we dive into the basics of
- 00:00:23 responsive design let me fix one mistake
- 00:00:26 I did in the last video because right
- 00:00:28 here with our fallback for the font size
- 00:00:31 of our page title
- 00:00:32 I added 16 pixels well if one Ram is 16
- 00:00:37 pixels then – Ram shouldn't be 60 but 32
- 00:00:40 pixels just to make sure that this is
- 00:00:43 correct now back to our website and now
- 00:00:46 back to responsive design and before we
- 00:00:49 dive deeper
- 00:00:50 let me change one thing because at the
- 00:00:53 moment I'm viewing this website right
- 00:00:56 here with a zoom level of 200% just to
- 00:00:59 make sure that you can see all the
- 00:01:01 details the problem is that we will work
- 00:01:03 a lot with our page width in that video
- 00:01:05 and because of the zoom level of 200%
- 00:01:08 this would mean that a width of 1000
- 00:01:12 pixels right here would be a width of
- 00:01:15 500 pixels in our code and I think this
- 00:01:18 can be confusing therefore I'll reduce
- 00:01:21 the zoom level right here to 100% so
- 00:01:25 basically I won't have any zoom in here
- 00:01:28 and with that we can make sure that the
- 00:01:31 pixels we can see right here for our
- 00:01:33 page width are equal to the pixels that
- 00:01:35 we have in our code now that we talked
- 00:01:38 about that we can see that we already
- 00:01:40 have kind of a responsive design we can
- 00:01:44 see that down here in the footer right
- 00:01:46 here we see that the way the images and
- 00:01:48 the text is displayed changes that
- 00:01:50 simply due to our flex box that we
- 00:01:54 implemented because we here if our
- 00:01:56 display flex a declaration with the Flex
- 00:01:59 wrap and the wrap value applied and we
- 00:02:03 have a word 50 fine for 150 pixels for
- 00:02:06 the images and 450 pixels for the text
- 00:02:10 this means as soon as we are below these
- 00:02:13 values the way the content is displayed
- 00:02:16 changes to this part we got another well
- 00:02:19 kind of responsive design already appear
- 00:02:21 for our images also because as you can
- 00:02:24 see as soon as we are below here is 400
- 00:02:28 pixels can you see it right here so 400
- 00:02:31 right here and if we go below that
- 00:02:34 then the way these images are displayed
- 00:02:36 also changes this is you to our flex box
- 00:02:41 also which we applied right here so
- 00:02:42 display flex flex wrap and we defined a
- 00:02:45 width of 50% but additionally a minimum
- 00:02:50 width of 200 pixels therefore if we
- 00:02:53 reduce the weight of our page below 400
- 00:02:56 well there is not enough space for two
- 00:02:58 images with 200 pixels of width for each
- 00:03:01 therefore it is displayed like that with
- 00:03:04 a wrap so this is what our let's call it
- 00:03:06 responsive design looks like at the
- 00:03:09 moment in our desktop view that's really
- 00:03:13 important because at the moment we are
- 00:03:15 just playing around with the width in
- 00:03:16 our desktop browser the problem is that
- 00:03:19 well this behavior right here cannot be
- 00:03:23 observed if we have a look at our mobile
- 00:03:25 browser or at least at the simulated
- 00:03:28 mobile browser because if we increase
- 00:03:30 the size maybe and now click right here
- 00:03:32 in the chrome developer tools we can see
- 00:03:35 that we can increase that more even we
- 00:03:39 can select different devices let me
- 00:03:41 maybe select an iPhone 8 right here and
- 00:03:43 as you can see right here well although
- 00:03:46 we have a width of only 375 pixels which
- 00:03:51 would be below these 400 pixels 2 times
- 00:03:54 200 for the width of the images that we
- 00:03:57 defined the site is still squeezed into
- 00:04:01 that mobile phone screen in the desktop
- 00:04:04 view the reason for that is that our
- 00:04:07 mobile browser is not aware of the
- 00:04:10 actual device width of our device and
- 00:04:13 therefore doesn't adjust the viewport to
- 00:04:15 that size and because of that our site
- 00:04:18 looks like this and doesn't look like
- 00:04:21 that on our mobile phone because we
- 00:04:24 should actually expect that with a width
- 00:04:27 of 375 pixels it's 373 now but basically
- 00:04:32 it should look like that actually and as
- 00:04:34 I said this is you to the fact that the
- 00:04:37 mobile browser is not aware of the
- 00:04:40 device width and cannot adjust the
- 00:04:42 viewport according to that the good news
- 00:04:45 is that we can easily adjust that by
- 00:04:47 simply going
- 00:04:48 to our code at this time to the
- 00:04:50 index.html file and now add a specific
- 00:04:53 meta tag it's called meta name now it's
- 00:04:58 interesting it's viewport so that's the
- 00:05:01 first step now we need to refine one
- 00:05:04 more thing and this second thing is the
- 00:05:07 content which should be equal to width
- 00:05:11 equals device width like that now what
- 00:05:17 did we write right here
- 00:05:18 well basically what I just talked about
- 00:05:20 with that we tell our browser that the
- 00:05:24 viewport should be equal to the width
- 00:05:27 right here of the device we are using so
- 00:05:31 if we save that and go back to our page
- 00:05:33 and reload it we can now see that our
- 00:05:37 mobile browser is now able to identify
- 00:05:40 the actual device width of our iPhone 8
- 00:05:43 right here which is 375 pixels well and
- 00:05:47 then the browser knows that he should
- 00:05:49 keep a minimum width of 200 pixels for
- 00:05:53 each of these pictures well and because
- 00:05:55 of that he knows that he has to switch
- 00:05:57 the view to that view that we defined so
- 00:05:59 far in our basic responsive design this
- 00:06:02 is really important always make sure to
- 00:06:05 add this meta tag with the viewport and
- 00:06:07 content width equals device wood to your
- 00:06:11 HTML file there are more things you
- 00:06:13 could specify right here but we'll just
- 00:06:16 focus on three basics in this video well
- 00:06:19 and with that if we go back to the
- 00:06:21 desktop view we can see that we have a
- 00:06:23 really good responsive design now on our
- 00:06:26 website that's not true of course this
- 00:06:29 was just a starting point actually
- 00:06:31 because with that we now make sure that
- 00:06:33 our browser is aware of the device size
- 00:06:36 and adjust uh viewport according to that
- 00:06:39 now we have to work with this
- 00:06:41 information and think about the
- 00:06:42 consequences and this means we cannot
- 00:06:45 specify what should happen to the way
- 00:06:47 our website is displayed depending on
- 00:06:50 specific well borders we can specify we
- 00:06:53 could for example say that as soon as
- 00:06:55 our device has a width of 400 pixels or
- 00:06:58 more then the way our elements are
- 00:07:00 positioned should
- 00:07:01 change or the font size should change
- 00:07:03 for example basically you can change
- 00:07:06 almost any property now and you can
- 00:07:08 change these properties depending on the
- 00:07:11 device size by using media queries now
- 00:07:14 this can sound really complicated and
- 00:07:16 confusing now therefore as always let's
- 00:07:19 think about that step by step and before
- 00:07:22 we think about that I have to admit that
- 00:07:25 we made a mistake right here no worries
- 00:07:27 the site is totally fine no big issue
- 00:07:30 but the way we developed this website is
- 00:07:33 actually not according to the standards
- 00:07:35 nowadays because as we have a lot of
- 00:07:37 different devices on the market well one
- 00:07:39 of the most important devices is of
- 00:07:41 course the mobile phone therefore
- 00:07:43 normally developing a website should
- 00:07:45 always work with the general rule of
- 00:07:47 mobile first so you start building your
- 00:07:50 website based on the way it should look
- 00:07:52 like on the mobile phone and then you
- 00:07:55 think about how the site should adjust
- 00:07:56 as soon as you have bigger devices the
- 00:07:59 good news is that we can do this now by
- 00:08:02 working with media queries so let's dive
- 00:08:04 into that and as I just said we want to
- 00:08:06 work mobile first now to make our site
- 00:08:09 responsive and because of that we should
- 00:08:12 think about the smallest device size we
- 00:08:14 want to build our website for let's say
- 00:08:18 that this could be 300 pixels so right
- 00:08:21 here write 301 I think this is fine but
- 00:08:25 let's say 300 pixels should be the
- 00:08:28 smallest device so this is our starting
- 00:08:31 point but we want to develop our website
- 00:08:33 for and at the moment it doesn't look
- 00:08:35 good right here
- 00:08:36 so this means we have to go back to our
- 00:08:38 code because that's important keep that
- 00:08:40 in mind with the mobile first approach
- 00:08:42 this is now the code that is responsible
- 00:08:45 to make sure that this page is displayed
- 00:08:47 correctly and this means we have to
- 00:08:49 change some things the first thing we
- 00:08:52 should change is maybe the width of
- 00:08:54 these images because as we can see right
- 00:08:56 here these are too small so we can't get
- 00:08:59 rid of that minimum width right here now
- 00:09:01 and say that the width should be 100%
- 00:09:05 for our images like that yeah now this
- 00:09:09 looks better
- 00:09:10 however I still think that the home and
- 00:09:13 contact buttons right here don't
- 00:09:15 good because the font of home in contact
- 00:09:18 or the font size is a little bit too big
- 00:09:20 so we should also work on that
- 00:09:23 let's see this is the navigation so we
- 00:09:26 have to work in the or on the navigation
- 00:09:28 class so let's go back go to navigation
- 00:09:31 and to the navigation list items to be
- 00:09:34 more precise and let's maybe change the
- 00:09:37 font size to 0.9 remm something like
- 00:09:40 that and let's reload the page yeah and
- 00:09:43 with that as I said at the beginning I'm
- 00:09:46 sorry I hope you can see it now but I
- 00:09:47 have to keep it that small as you can
- 00:09:49 see now our website now has a good look
- 00:09:53 actually on this really small device the
- 00:09:56 issue still is that we have this massive
- 00:09:59 City trip and this is the California
- 00:10:01 landscape text right here and I think
- 00:10:03 this should not be displayed on such a
- 00:10:05 small device so let's say we don't want
- 00:10:07 to display this information right here
- 00:10:09 on our really small device we can also
- 00:10:13 change that by I know I forgot the part
- 00:10:15 to be honest I think it's the main part
- 00:10:18 right here and the trip text class
- 00:10:21 that's it so let's go to trip text right
- 00:10:25 here
- 00:10:25 and let's now comment out all that part
- 00:10:29 because we will need it later for the
- 00:10:31 media queries so if we now say if then
- 00:10:34 go back to our website and reload it
- 00:10:36 yeah we can see with the left that text
- 00:10:39 in here so let's add trip text right
- 00:10:44 here and now simply say display:none
- 00:10:48 therefore we now made sure if you load
- 00:10:51 the page that it is not displayed right
- 00:10:53 here so with that we now if our base set
- 00:10:57 so we have the mobile first approach for
- 00:10:59 our smallest device and I think until
- 00:11:01 right here it looks good but for example
- 00:11:05 you could now say that you would like to
- 00:11:07 change the way the website is displayed
- 00:11:09 right here at 400 pixels let's say you
- 00:11:12 want to increase the size of these home
- 00:11:14 and context buttons of the font and this
- 00:11:18 can now easily be done by using media
- 00:11:21 queries so let's go back to our code and
- 00:11:23 let's now add such a media query and I
- 00:11:26 normally add this Curie's at the bottom
- 00:11:29 of the
- 00:11:29 yes s-code because of that you can
- 00:11:32 easily see and immediately see what type
- 00:11:34 of media queries were applied and the
- 00:11:36 media query is simply written like that
- 00:11:38 so add media make sure to check out the
- 00:11:41 mdn I added a link in the video
- 00:11:44 description because you can specify well
- 00:11:46 specific media where this should only
- 00:11:48 apply to you in our case at media simply
- 00:11:51 means in general that from whatever
- 00:11:54 medium you access this website from this
- 00:11:57 media query will be applied if that's
- 00:12:00 naughty if if the min-width so the
- 00:12:05 device width is 400 pixels as we just
- 00:12:11 said we can add curly braces right here
- 00:12:13 and now we have to specify what should
- 00:12:16 happen so what happens if we have a look
- 00:12:19 at our website with a device that has a
- 00:12:21 minimum width or a width of at least 400
- 00:12:24 pixels we said that we want to change
- 00:12:27 the font size of the navigation items so
- 00:12:31 this navigation Li right here so what we
- 00:12:34 can now simply do is we cannot simply
- 00:12:36 select everything copy it now paste it
- 00:12:40 right here and now get rid of all the
- 00:12:43 properties that should not change that's
- 00:12:46 really important because we only want to
- 00:12:48 change a specific property in this media
- 00:12:50 query in our case this is the font size
- 00:12:53 now we could also adjust the fallback
- 00:12:55 for the simplicity of this tutorial I
- 00:12:58 will not adjust it now but you could
- 00:13:00 also do that of course but I will just
- 00:13:02 stick to the font size which could now
- 00:13:05 be let's say
- 00:13:07 1.2 m like that if we save that and go
- 00:13:11 back to our website and reload it can
- 00:13:14 you see it the font size now increased
- 00:13:17 because if we decrease the size it jumps
- 00:13:20 back to our initial size and as soon as
- 00:13:23 we hit that border we can see that our
- 00:13:26 font size adjusts according to the new
- 00:13:29 font size that we defined with that
- 00:13:32 media query and that's really important
- 00:13:34 to keep in mind with that media query
- 00:13:36 you can start building your website
- 00:13:37 mobile first so just as we did it now we
- 00:13:40 just had a look at the smallest device
- 00:13:42 we want to
- 00:13:43 our website for and then you specify
- 00:13:46 media queries for certain breaking
- 00:13:49 points for example in our case the min
- 00:13:51 width of 400 pixels and then only
- 00:13:54 specify the properties of specific
- 00:13:58 selectors elements classes anything like
- 00:14:00 that and define what should happen as
- 00:14:03 soon as this case is true now of course
- 00:14:06 there's not only min width available you
- 00:14:09 could also use max width for example
- 00:14:11 again have a look at the link I provide
- 00:14:13 in the below description to the MDM but
- 00:14:16 from a mobile first starting point this
- 00:14:18 is probably the easiest way to start
- 00:14:20 with just start with the smallest device
- 00:14:22 and then use min width to adjust the way
- 00:14:25 your website looks depending on the
- 00:14:27 device size however we are not done yet
- 00:14:30 because so far we can see that our
- 00:14:33 website looks fine right here but I
- 00:14:35 think as soon as we hit maybe 500 pixels
- 00:14:40 or let's maybe check it out let's have a
- 00:14:42 look at a specific device let's make it
- 00:14:44 bigger let's see what an iPad looks like
- 00:14:47 yeah I think for example on an iPad our
- 00:14:51 website could be viewed in the desktop
- 00:14:54 view so we could not also specify that
- 00:14:56 let's maybe say as soon as we have a
- 00:14:59 minimum width of 700 pixels our website
- 00:15:02 should change back to the normal desktop
- 00:15:05 view so basically to the view we had in
- 00:15:07 the beginning because right now as you
- 00:15:09 can see we only have our mobile view
- 00:15:12 right here and I don't think this looks
- 00:15:14 really good on a desktop device so let's
- 00:15:17 reduce the size and let's go back to our
- 00:15:20 code and let's now simply add another
- 00:15:24 media query so you can just copy that
- 00:15:26 right here and now say that now the main
- 00:15:30 width is 700 pixels and now really
- 00:15:34 important just take the trip images
- 00:15:38 right here so this width you can copy
- 00:15:41 everything actually copy down paste it
- 00:15:45 right here don't forget to close the
- 00:15:47 curly braces of the media aquarium and
- 00:15:49 now you want to say that well as soon as
- 00:15:52 our device has a minimum width of 7
- 00:15:54 three pixels well our we don't need to
- 00:15:57 hide by the way get rid of that our
- 00:15:59 width should not be 100% anymore but it
- 00:16:03 should be 50% like that if we go back to
- 00:16:07 our website and reload it well we can
- 00:16:11 see that as soon as we hit 700 pixels
- 00:16:14 right here the way our site is displayed
- 00:16:18 changes and again based on that media
- 00:16:20 query so you can see for our initial
- 00:16:22 site right here we have the normal
- 00:16:24 viewer then we have the 400 pixels where
- 00:16:28 the home and contact font size increases
- 00:16:31 and then we have our 700 pixels there
- 00:16:35 suddenly the entire look of our website
- 00:16:38 changes now there is one thing we forgot
- 00:16:40 right
- 00:16:40 we had these headers right here let's
- 00:16:43 also add these that's why I commented
- 00:16:45 them out right here because if we now
- 00:16:48 simply cut these out from here and now
- 00:16:53 add them to our media query as you can
- 00:16:56 see you can also combine different
- 00:16:58 selectors in here and get rid of the
- 00:17:02 commented out part like this just some
- 00:17:06 basic formatting right here and like
- 00:17:10 that maybe and also get rid of right
- 00:17:12 here and put it right there so that it
- 00:17:15 looks nice
- 00:17:16 well we add line right here well and
- 00:17:19 then with this code being added this
- 00:17:21 simply means that as soon as our device
- 00:17:24 has a width of at least 700 pixels well
- 00:17:26 this should all be true now let's see if
- 00:17:29 that happens
- 00:17:30 so we reload the page and indeed now we
- 00:17:34 can see that our massive City trip and
- 00:17:36 the California landscape text is back
- 00:17:38 again
- 00:17:38 and if we reduce the size can you see it
- 00:17:42 it switches to our mobile view and if we
- 00:17:45 reduce it further the font size
- 00:17:46 decreases and with Dada
- 00:17:49 can you see it we basically have a nice
- 00:17:53 responsive design as I would say not a
- 00:17:56 really sophisticated one of course but I
- 00:17:58 think for the basic steps we applied
- 00:18:00 this is really awesome you can also
- 00:18:02 switch to the different mobile devices
- 00:18:03 right here so the iPad has the best of
- 00:18:05 you so has the iPad pro
- 00:18:08 but on the iPhone X for example we have
- 00:18:11 the mobile view and so do we have it on
- 00:18:13 the galaxy s5 and on all the other
- 00:18:16 devices that we have right here so this
- 00:18:19 is quite cool actually as I think and as
- 00:18:22 you could see it it was really easy to
- 00:18:24 implement there are only two things that
- 00:18:27 you have to keep in mind the first thing
- 00:18:29 is always add the viewport meta tag
- 00:18:33 right here we talked about that with
- 00:18:35 that you basically explain your mobile
- 00:18:38 browser that your device has a certain
- 00:18:40 width and that if you port should be
- 00:18:43 adjusted according to that with with
- 00:18:45 that basic information in mind or stored
- 00:18:48 for the browser we can then work on the
- 00:18:50 media queries and add these curious down
- 00:18:53 here for specific device sizes
- 00:18:56 additionally keep in mind that if you
- 00:18:58 build mobile first the entire code you
- 00:19:00 have right here should refer to your
- 00:19:03 mobile so to the smallest device you
- 00:19:05 want to create your code for and in the
- 00:19:07 combination with the media queries down
- 00:19:09 here you can then tailor specific
- 00:19:11 properties according to the needs that
- 00:19:14 you have on the bigger devices that you
- 00:19:16 may have and with that we now actually
- 00:19:19 also have our first responsive design
- 00:19:22 implemented now as I said in the
- 00:19:24 beginning we have two videos left for
- 00:19:27 our CSS part of the series this was
- 00:19:30 video one in the second video so in the
- 00:19:32 next video we will then clean up our
- 00:19:35 website a little bit because we might
- 00:19:37 want to work on some foreign sizing
- 00:19:39 topics maybe or we could also work on
- 00:19:42 the contact page because right now well
- 00:19:44 I don't think this looks really cool so
- 00:19:47 as always I can only say thanks a lot
- 00:19:50 for watching and I hope to see you in
- 00:19:51 the next video bye