After finishing with setting up the layout for the large screen website, the smaller screens become easier to set up. It’s not simply rescaling to make each section smaller, however. I will have to do some layout adjustments for each section.
Now keeping my Layers panel organized into section will come in handy for the next part. To start, I selected the “header” folder then option+clicked and dragged the folder to my 768 artboard.
Then I started to make my first adjustments to the header section. Earlier, I talked about how this is more than just simply rescaling everything to be smaller and fit the artboard. For instance, I don’t want to rescaled my featured image, or the background graphic. So first, I just changed the width of the Mask (that holds the featured image) to 768.
I then selected the featured image in the Layers panel and scaled it down slightly so that only three of the ornaments showed, instead of five. I then changed the height of the Mask from 430 pixels to 300.
I then adjusted the position of the featured image slightly before moving onto adjusting the layout of the nav box.
First, I adjusted the logo’s width and height to 65 after checking the proportion lock was on. I then scaled the nav box to a width of 768 and a height of 130 pixels. The nav box is actually taller than it was in the large screen layout, and this is because I’m going to place the navigation symbol underneath the logo.
Before moving onto the next section, I’ll need to make adjustments to the hero element. First, I double-clicked on the text block and pressed command+a to select all the text. In the Inspector panel I changed the font size from 48 to 34 pixels. I’ll also change the line spacing to 32 pixels, then place this text to where it fits in the negative space.
Now that I’ve finished with the header section, I’ll move onto the main.
Now the other elements in each section, is going to depend a little more on the Layout grid, so before I bring the main section to the 768 artboard, I’m going to select the whole artboard and go to the View menu and click Show Layout.
Next, I went back to the View menu, and chose Layout Settings.
Now, the settings probably has everything set to fit the larger artboard I created in Lesson 1, so I have to make some adjustments to fit this smaller artboard. To start, I set the width to 728 and set the Offset to 20 pixels. I left the number of columns at 12, but changed the Gutter Width to 12. With adjustments in place, I clicked on OK.
I moved back to the 1200 artboard and option+clicked and dragged the “main” section to the 768 artboard in the Layers panel.
Obviously, I’m going to have to make some adjustments to this section, and I’m going to start with the icons I created in the previous lesson.
Selecting the Star icon, I’m going to click and drag this item till it fits center of the first four columns of my Layout. However, I dod want to have the icons be a little smaller on the 768 artboard. Making sure the proportion lock is on, I changed the width from 80 to 60 pixels.
I’ll use the same process for the Marker icon:
and Gear icon:
In the last image with the Gear icon next to the Marker, you can see that it is optically smaller than the marker and I don’t want that. The bounding box around the Gear is 60 x 60 pixels, but the Gear itself is smaller. I’m going to have to scale the Gear myself to make sure that it is roughly the same size as the Marker.
The oval inside the Gear is slightly off center as well, so to fix that I need to select both the Oval and the Polygon in the Layers panel then go to the Inspector panel and click on “Align Horizontally” and “Align Vertically.”
After placing all three icons, I also want to make sure that all are aligned horizontally to each other. I could use the Smart Guides for this, or I could select all then click “Align Horizontally.”
Next, I adjusted the positions of each text blocks to their corresponding icon starting with the “What’s Trending” text. By selecting the “What’s Trending” text then shift+clicking on the text block below and dragged both underneath the Star. Sometimes these will snap to the columns, but if it doesn’t just use the arrow keys because I want the left side of the box to align with the first column. I then clicked and dragged the right side of the bounding box to fit the four columns under the Star. I did this to all three of the texts.
Again, to make sure that all of these are aligned horizontally, I can use the Smart Guides, or select all and click “Align Horizontally in the Inspector panel.
Before moving to the “atmosphere” section, I wanted to turn all three of these icons into symbols. The reason why I didn’t do this earlier is because any rescaling or transformation of the icon affects the icon in every artboard. By using this version of the icon, any adjustments I make to the icons in later artboards will affect this one too.
Next, I brought the “atmosphere” section to the 768 artboard in the same way I did the previous two sections.
I first focused on the lounge photo, selecting the “lounge” folder in the Layers panel then scaling the image down till it was six column widths and placing it in the upper left-hand corner. I also tried to make sure the photo was equip distance from the top and left side of the orange box.
I then selected all the text blocks and dragged them into place before adjusting the width to also be six column widths.
I had to make some adjustments, starting with the heading. I didn’t want to change the font size since I had created a style sheet for this in the previous artboard, so chaining the font size would also affect that version. Instead, I changed the line spacing to 35 which won’t affect the previous artboard since the heading is all on one line.
In my Layers panel, I selected the content text, the text for the button and the button rectangle, Then I used my arrow keys to move this down a little. After deselecting the content text, I used my arrow keys again to move the button box and button text down.
Finally, I changed the height of the “orange box” to 254 pixels before moving onto the next section.
Next I’m going to work with the “how to” section.
I first selected the “seating” folder and moved it the upper left-hand corner then scaled it to two column widths. I then selected the heading, content and “Learn more” link and moved under the seating photo. I resized all of these text blocks at once to two column lengths (same as photo). I deselected the heading and text, and used my arrow keys to move the Learn more link down a little.
Rinse and repeat for the “lighting” image and content.
Before I moved on to the pull quote, I made sure each of these elements were horizontally aligned with each other.
I then selected all the pull quote elements and resized them to fit five column widths.
I selected the Author, Title, Company and used my arrow key to move it down before adjust each of the other elements till I had the “how to” section they way I wanted.
With all these sections complete, all I needed to do was move the footer section to the 768 artboard then adjust as needed to complete the medium screen layout.