Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Design

Well done!

You have completed Responsive Design!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Desktop Screen

9:36 with Anwar Montasir

Now we’re ready to turn the mobile version of our architecture studio site into a desktop version.

Now we're ready to turn the mobile version of our architecture 0:00
studio site into a desktop version. 0:03
I'm mostly planning to respect the layout grid we established earlier. 0:06
But with header bars and hero images 0:11
it can be visually striking to make use of the entire screen. 0:15
So I'll try that first. 0:21
I'm positioning the logo 16 pixels from my upper left and 0:23
top edge and I'll distribute my five nav links toward the right edge. 0:29
With Our Team, once again, this our current page. 0:58
So I'm going to make the link bold as well as underline it. 1:04
Now you might be wondering, How about a breakpoint? 2:08
Where is that place that the mobile version of the navigation 2:12
can switch to the expanded version? 2:16
I can test this out by moving elements around. 2:19
It looks like somewhere around 670 pixels, the logo and 2:28
horizontal navigation still fit comfortably side by side. 2:34
Any smaller and the two elements start colliding. 2:39
So a breakpoint might be used around 670 pixels 2:43
to switch from the burger nav icon to the full menu. 2:48
But, this isn't something you need to specify in your Figma file 2:53
since the breakpoint is usually implemented by the developer. 2:57
My hero image, I'll make full screen to match my header bar. 3:04
Starting with the body copy I'll follow the grid. 4:02
I can create a bit of visual interest and keep my columns of body 4:15
copy from getting too wide by not using all 12 columns at once. 4:20
For my heading, I'll use only the nine grid columns on the left, 4:25
leaving the remaining three columns blank. 4:29
And I have room to make my text as large as 48 pixels. 4:32
While this gives me around 50 characters per line, 4:39
and I have room to go smaller, I think the 4:43
large text will make an impression on a large monitor. 4:45
For my introductory copy, I'll leave three columns blank 4:56
on the left side. And increase the font to 32. 5:01
I'll hyphenate the word materials to improve the text flow a bit. 5:12
And looks like I forgot to change the word 5:20
Careers to blue as it's a hyperlink. 5:25
For my images of employees I have room 5:44
for two columns side by side. 5:49
I will increase my body copy size slightly. 6:06
Going with 28 for the person's 6:20
name and 24 for her title. 6:26
As well as 20 for my body copy. 6:40
Which means the line height needs to be increased to 30. 6:52
As I finish this section, I should zoom in to 100% 7:24
to make sure the gutter between columns is sufficient. 7:28
As I want it to be visually obvious that these are separate blocks of copy. 7:31
The footer is less challenging on the desktop since I have more room. 8:00
I'll start with the social navigation on the left. 8:07
Then, after allowing some space, 8:14
I'll include the address and phone on the right. 8:18
As well as About Us, which I might consider stacking vertically 8:30
rather than horizontally, given the amount of space I have. 8:35
And that concludes the desktop view. 9:01
My next step, once I've created a prototype 9:06
and tested on some users, would be communication 9:10
with the development team to make sure 9:12
the body copy remains legible at a variety of screen widths. 9:15
I hope you've enjoyed this workshop on responsive design. 9:21
Considering multiple screen widths in your design 9:24
isn't always easy. But it's a fun challenge 9:28
and an important skill to demonstrate in your portfolio. 9:31