Locked lesson.
About this lesson
Making our site mobile ready is easy with Bootstrap!
Exercise files
Download this lesson’s related exercise files.
Make the Site Mobile Ready.docx58.9 KB Make the Site Mobile Ready - Solution.docx
59.1 KB
Quick reference
Make the Site Mobile Ready
In this video we'll make our app mobile ready.
When to use
Making a Rails app mobile ready is incredibly easy with Bootstrap. You should always do so!
Instructions
To make your website mobile ready, simply add this line of code within the <head> and </head> section of app/views/layouts/application.html.erb
<meta name="viewport" content="width=device-width, initial-scale=1">
That's it!!
Hints & tips
- You can make your app mobile ready with one line of code
- Edit your application.html.erb file to add a viewport
- 00:05 We're basically done here.
- 00:06 We have everything we need.
- 00:07 The last thing we need to do is make this mobile ready.
- 00:10 These days, it's very important that your website looks good on a phones or
- 00:14 tablets or any other type of screen.
- 00:16 And Rails actually makes this really easy to do.
- 00:18 We're gonna use Bootstrap for this.
- 00:19 But it's a very common thing.
- 00:21 All we have to do is go to getbootstrap.com and click on CSS.
- 00:24 And if you scroll down here, there's this section Mobile first.
- 00:27 And you can read up on this if you want, but
- 00:29 all we need to do is add this meta HTML tag.
- 00:32 Just gonna copy this, and we're adding a viewport, and giving it some instructions,
- 00:36 this is the basic.
- 00:37 You're gonna see this tag on just about every mobile-ready site you've ever seen,
- 00:42 it's just a very common HTML tag.
- 00:43 So, let's copy this and head over to our app > views > layouts >
- 00:48 application.html file, and we just need to paste that inside the head tag.
- 00:54 Anywhere is fine.
- 00:56 Now, if we save that and come back and hit reload, and
- 00:58 there's a couple of ways you can test this.
- 01:00 For one, if you change the size to make it look like a cell phone,
- 01:06 you can see we now have this hamburger thing.
- 01:09 This is a mobile type thing.
- 01:10 So that's pretty cool.
- 01:13 And we can sort of confirm that our images scroll nicely, slightly bigger.
- 01:23 So that's one way to check.
- 01:24 Another way to check is to, at least in Chrome,
- 01:29 click this little dot button up here, and
- 01:33 come down to More tools > Developer tools.
- 01:37 And you get this, all these developer things.
- 01:40 But you can come up here and toggle between different types of devices.
- 01:49 See, this is an iPhone 5.
- 01:50 This is what our app will look like on an iPhone 5.
- 01:52 And you can, what it looks like on
- 01:57 a Galaxy S5, a Nexus, an iPad.
- 02:02 So we can just sort of come through here and
- 02:04 confirm that we have this little hamburger.
- 02:06 It looks good on mobile devices.
- 02:09 And that's pretty cool, actually.
- 02:11 And if we come back here and take this out, and then come back here and
- 02:15 hit reload, you see, look, now it looks different.
- 02:18 This looks bad on a Galaxy 5.
- 02:21 This looks bad on a Nexus.
- 02:22 All the images hang off the side, our nav bar doesn't show up correctly.
- 02:27 Even on an iPad it doesn't look great.
- 02:30 But just by adding that one line of code, it's just a viewport.
- 02:34 Viewport is the term that you use whenever you're talking about mobile devices.
- 02:38 Now, this is kinda scary,
- 02:39 because I look at job postings on websites like Indeed all the time, and
- 02:44 companies look for people, for developers who can develop mobile websites.
- 02:48 And Rails makes it so insanely, ridiculously, easy,
- 02:51 just one line of code and all of a sudden we have a completely mobile ready website.
- 02:57 Now I need to hit reload.
- 02:58 Give it a hard reload then try it again.
- 03:04 There we go.
- 03:10 Just one line of code and now it's working.
- 03:11 So I think that's awesome.
- 03:12 This is a feature of Google Chrome, the web browser, or just pull out your phone
- 03:16 and check the website on your phone and make sure it looks okay.
- 03:19 And that's all for this video.
Lesson notes are only available for subscribers.