Join Ray Villalobos for an in-depth discussion in this video Adjusting for touch devices, part of Building a Responsive Single-Page Design with Sass.
Our website's working pretty well.…And we have some awesome animations in here, plus some good scrolling and…also visual effects that gives feedback to the users.…However, theres a little bit of a problem.…If we go to this room section and we scroll around,…we're going to see these animations that look pretty good and…are adjustable via the scroll of my mouse here.…However, this doesn't translate very well into mobile devices.…So let me show you what I'm talking about.…So here I have the website on my phone and it works pretty well.…
If I click here, it's going to scroll down to the next section.…And I'm going to scroll some of this thing and rotate,…you know see that it looks great.…Let me just move this back to vertical position.…However when we get to this room section,…everything kind of breaks down if we move this down.…I'm going to scroll and…you're not going to really see it as well as I'm seeing it on my phone.…But when I'm scrolling here,…it's sort of doesn't show you the animation that's based on my scrolling.…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- 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.