Lessons: 19Length: 1.5 hours
- Overview
- Transcript
4.6 400px Breakpoint
At 400px, our logo no longer fits comfortably, so we reduce its size. Section one needs to collapse from three columns to a single-column layout. The section two slider will reduce to showing only two images at a time. We’ll make other text size adjustments, do some alignment changes, and rearrange the footer content into a single column.
1.Introduction
1.1Responsive Design in Adobe XD00:49
1.1
Responsive Design in Adobe XD
00:49
2.Responsive Refresher
2.1Responsive Design Is Just Two Things05:52
2.1
Responsive Design Is Just Two Things
05:52
2.2Workflow, Breakpoints, and Do We Still Do “Mobile First”?09:36
2.2
Workflow, Breakpoints, and Do We Still Do “Mobile First”?
09:36
3.Responsive Design in Adobe XD
3.1Quick Overview of What You Can Do in XD04:56
3.1
Quick Overview of What You Can Do in XD
04:56
3.2The “Responsive Resize” Function09:05
3.2
The “Responsive Resize” Function
09:05
3.3Artboards and Responsiveness04:06
3.3
Artboards and Responsiveness
04:06
3.4Emulating Flexible Width Columns09:17
3.4
Emulating Flexible Width Columns
09:17
3.5“Repeat Grid” and Responsiveness08:30
3.5
“Repeat Grid” and Responsiveness
08:30
3.6Handling Text05:05
3.6
Handling Text
05:05
3.7Create a Max-Width Artboard02:14
3.7
Create a Max-Width Artboard
02:14
4.Breakpoint Artboards
4.1Creating Breakpoint Artboards03:32
4.1
Creating Breakpoint Artboards
03:32
4.21000px Breakpoint03:21
4.2
1000px Breakpoint
03:21
4.3900px Breakpoint03:53
4.3
900px Breakpoint
03:53
4.4700px Breakpoint04:29
4.4
700px Breakpoint
04:29
4.5500px Breakpoint02:56
4.5
500px Breakpoint
02:56
4.6400px Breakpoint02:59
4.6
400px Breakpoint
02:59
4.7Smallest Breakpoint03:55
4.7
Smallest Breakpoint
03:55
5.Conclusion
5.1Device-Specific Artboards03:36
5.1
Device-Specific Artboards
03:36
5.2Wrapping Up04:29
5.2
Wrapping Up
04:29
