Join James Williamson for an in-depth discussion in this video Controlling the viewport, part of Applied Responsive Design.
In this chapter we are going to explore the basics of creating responsive layouts.…Making sure that you have a solid layout across multiple screen sizes is one of the core foundational…aspects of any responsive site.…Before we get too deep into the techniques involved with creating multiple layouts, we…first need to explore how to control the viewport on mobile devices.…Now, mobile devices have a default viewport size that determines how websites are displayed…within their browsers.…For the most part, this default viewport is set to actually a much higher value than the…actual screen size. This allows users to see the entire site, although at a dramatically scaled-down size…so then they can zoom and pinch and move around where they want to go.…
Now by controlling the viewport, we can also override those defaults and make sure that…the site is being displayed at the size that we want.…So in order to do this, I am going to open up the index.htm file in the 02_01 folder…found in the Chapter2 folder within the exercise files. And this is extremely simple to do. Very, very easy.…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.