Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Responsive Design!
You have completed Responsive Design!
Preview
Now we’re ready to turn the mobile version of our architecture studio site into a desktop version.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up