Treble: One Page Website. Step 8 - Responsive Web Design

Transcription

1 Step 8 - Responsive Web Design 29

2 WHAT IS RESPONSIVE WEB DESIGN? Back in the earlier days of web design the only way to access the internet was using your desktop computer. Although monitor sizes changed a bit they were all roughly the same size. The world has changed with how we access the internet. We now can access the internet with smartphones, tablets, and game consoles. These devices have vastly different screen resolutions. Not only that, some are touch interface, such as smart phone and tablets, while some are not. Some have high pixel density screens, and some don t. In the old days of mobile websites, designers would maintain TWO websites, one of desktops and one for mobile devices. The mobile website typically started with the letter m. like m.sfweekly.com or m.ccsf.edu. This practice was too inefficient. If new content was added it TWO websites would have to be updated. In 2010, the website Alistpart.com began the idea of responsive web design, or design where the content reforms itself to the device. This means computers, tablets and smartphones would all receive the same content, but they would layout the content slightly different based on the characteristics of that devie. RESPONSIVE UNITS, RESPONSIVE IMAGES, RE- SPONSIVE GRIDS AND MEDIA QUERIES There are four major elements to making a website responsive. They are responsive units, responsive images, responsive grids and media queries. Responsive units means measuring elements with units that can resize themselves depending on the device. For instance, measuring font-size in points is great, but points are ALWAYS the same size. Where it is a big monitor or small smartphone screen the text size is set the same. If we use em s, the text will resize itself to the ration of the device. As for widths, paddings, margins, instead of using a finite value like pixels, we can use a responsive measurement like percentages, meaning if the page size changes, so does the value. Responsive images are images that resize themselves based on the webpage. In the old days if the webpage be- 30

3 came smaller than the content, the webpage would simply block the content. In order for our designs to work at multiple sizes and aspect rations we need our images to resize themselves. CSS grids make it easy for content to reposition itself to the page. That means we can makes columns expand or collapse easily where a four column can become a three column as the page gets smaller. It can continue to shrink where the three column becomes a two column layout and so on as the design becomes smaller. Luckily, we have already set up CSS grids, so we are ahead of the game on this aspect! Finally we will have media queries. A media queries tells the browser when to apply certain CSS. For instance, we can have the logo of a company resize itself using CSS, but only if the browser is below a certain size. We can have rules that expand content, but only if the website is ABOVE certain widths. ADD FINISHING TOUCHES There are a few more things to add before we get to the responsive web development. You ll notice in the mockup or final website that the top artists at the top of the page are within a circular design. We can do accomplish this look very easily by using CSS border-radiuses. Create a class called.img-circle. Set the border-radius to 200px..img-circle { border-radius: 200px; Apply the class to the musician images at the top and the DJ Ex pression image in the Artist of the Week section. Save and preview 31

4 FIX GRID SPACING You ll notice that there is a tight space between the DJ Ex pression photo and the description of the artist. We can fix this by applying a bit of padding to the left side of the container. Create a class called.left-padding in your CSS helper classes. Set the padding to 25px..left-padding { padding-right: 25px; In the HTML find the <section> container holding the text about Artist of the Week. Apply the.left-padding class. RESPONSIVE TEXT As I discussed in the earlier part of the chapter responsive text is when you measure your font size to a percentage measurement like em, rather than a finite value like pixels or points. An em represents the width of a standard letter in the user browser. For instance, if the default font size for a user browser is 12pt, than 1em = 12pt. If the default font size for a user s browser is 16pt than 1em = 16pts. Using ems to measure font size/line-heights and other typographical elements ensures that text will stay in ratio when it switches between different devices. When trying to figure out what em size to set our text to, use this formula Desired Value = ems Target For instance, let s say that we would like our base text to be 16pixels. That is our desired value. Let s say that we believe that the average font size or target value is 14 pixels. 16/14 = 1.14em. 2em 1.5em 1.2em 3EM 0.75em 3em 2em 0.75em 2em 1.5em 2.5em 32

5 CONVERT OUR POINTS TO EMS In our typography CSS we already set the font size based on points. Let s convert our points to ems. For this exercise I will assume that the average font size or target font size is 14pt. Let s begin with the body text. Currently the body text is set to 14/18pt. Let s convert that to ems. 14/14 = 1em and 18/14 = 1.3 ems. Go through the rest of the CSS and begin converting your points to ems based on the formula provided. RESPONSIVE IMAGES One issues with responiveness is having images that remain in ratio to the size of a webpage. We can set grids to percentages and fonts measurements to percentages, but images by defauly have a finite width and height. The answer is that we can apply a class to images to make their width grow or shrink as the page grows and shrinks. Create a class called.img-responsive. Set the max-width to 100%.img-responsive { max-width: 100%; Apply this class to all of the images within the HTML page. Let s think about what this will do. This class will require the image become 100% of the container it is inside of. If we are using a percentage CSS grid, then that container will grow and shrink as the page grows and shrinks. Thus, the image will shrink to be smaller for smaller devices and larger for large devices. CSS GRIDS An important aspect of a responsive web layout is to use fluid grids. Fluid grids are grids that use percentages to define the width of content. Luckily we have already done this! Fluid grids make it easy for columns to grow and shrink as the page expands and collapses. 33

6 MEDIA QUERIES Finally, the last major step is adding media queries. As expained media queries are new to CSS3. They allow developers to apply certain CSS rules when a webpage is a certain size. For instance, if the web browser is wide than we can have four columns. When the webpage gets smaller we can have the design break into two columns. We could use CSS to have certain elements be visible and invisible depending on the size of the web browser. For instance, we could have the navigation bar be visible for when the browser is larger and then disappear when the browser is smaller since there will not be room for it. Responsive Layouts have what are referred to as breakpoints or points where the design changes. In this project we will have four breaks points Small Devices: devices smaller than 480px (smartphones) Medium Devices: devices between 481px to 768px (tablets) Large Devices: devices between 769px to 954px (laptops) Exlarge Large Devices (computers): devices more than 954pxs CREATE A RESPONSIVE.CSS DOCUMENT To keep our CSS organized we ll put all of our responsive media query CSS on a separate CSS document. This will make it easier for to create and edit the CSS. Create a new stylesheet called responsive.css. Add it into the <head> part of the webpage. A webpage can attach as many stylesheets as we would like. There is no limit. CREATE A MEDIA QUERY FOR WEBPAGES WIDER THAN 992PX In your responsive.css add the only screen and (min-width: 954px) { Between the brackets you will only put CSS that is intended for the page design when it is above 954px. 34

7 As a designer I have two kinds of CSS global CSS and responsive. Global CSS are css rules that affect the design at ANY size. These usually include font declaration, colors, background images and such as those do not normally change from larger to smaller devices. Responsive would be CSS rules that affect width, displaying and other elements that might change depending on the size of the web browser. For now let s keep the screens above 954px empty. Target Large Devices Let s now target larger devices like laptops. Write a media querie above your original one /* == For Laptops == only screen and (min-width: 778px) and (maxwidth:954px) { This media query will target devices screens that are MORE than 778 pixels and LESS than 954 pixels. TEST YOUR PAGE IN FIREFOX RESPONSIVE DESIGN MODE Open your index.html page into Mozilla Firefox. Go to Tools > Developer > Responsive Design View. This is a built-in Firefox tool to allow us to resize the webpage to see where errors may come in. At the top left of the Responsive Design View it is showing us the dimensions. The right ajdustment tool allows us to make the webpage wider and shorter. Make sure the page is ABOVE 955px. View the site by scrolling up and down using the up/down arrow key. Everything should look pretty good. Using the dimensions tool on the upper left, set the webpage to have a width of 900px. Scroll up and down using the up/ down arrow key. You ll see that our design begins to break down. Some of the text and images get cut off on the right. This is because of the.container class we added to center our text with a fixed width. It looked good when the screen was large, but at a smaller size it begins to get in the way. 35

8 Let s use for laptops to fix this. We can t to remove the.container class from the HTML, but we can to redefine what.container means. Let s change it so instead of.container having a width of 955px, we set it to inherit. That means the.container will just be as large as the width of the only screen and (min-width: 778px) and (max-width:954px) {.container { TARGET MEDIUM DEVICES Let s now target devices that are between 480 pixels and 777 pixels. These devices are usually tablets and hand held game systems. Write only screen and (min-width: 481px) and (max-width:776px) { Make sure to copy our new.container rule to apply in these version of as only screen and (min-width: 481px) and (max-width:776px) {.container { Test your webpage in Firefox Responsive Design View and set the width to 600 pixels. If we scroll down we can that the shopping clothes and the events feels a bit crowded. Our design is not quite working at this size. The four columns is too much at such a small size. 36

9 So let s rework the design to have the design go from four columns to two columns when screens are below 776 pixels and above 481px. Add the following to your only screen and (min-width: 481px) and (max-width:776px) {.container {.one-fourth { width: 50%; What we just did is reset our existing columns where columns they USED to be labelled at 25% are now 50%. Save and preview. You should notice that the clothing area and events are that the columns become 2 x 2, rather than 1 x 4 making the design much more accessible REMOVE THE.SECTION-INFO At large sizes we used a class called section-info to make the section header text center to the middle of the page. That made sense in a design where it was wider than it was tall. In a tablet type scenario we have layout that are taller than wide. Thus, the.section-info is forcing our text to be too skinny and making the design break. Let s fix this by removing the.section-info width of 50% and replacing it with only screen and (min-width: 481px) and (max-width:776px) {.container {.one-fourth { width: 50%;.section-info { Save and Preview 37

10 Now that we have removed the width property the section headers feel quite sqeezed against the edge of the section headers. Let s fix this by adding padding of 2% but only for devices that are tablet and smaller..section-info { padding: 2%; Let s make the button a bit easier to access by aligning it to the center of the section header. We can do this by adding a text-align:center to the.section-info.section-info { padding: 2%; text-align: center; RESIZE THE ARTIST OF THE WEEK TEXT AND IMAGE If we view the Artist of the Week section it feels a bit broken. The image WAS in a column that was 25%, but with the resizing is not in a column that is 50%. The text about the artist of the week is still three fourths or 75%. 50% + 75% is more than 100% so the text falls to the next line. Everything is just a mess! Let s set it up that the Artist of the Week image is on its own line and the image is centered, and the article about the Artist of the Week is on it s own line and is 100% rather than 75%. Let s make a new class called.artist-week. Apply this to the grid div holding the Artist of the Week image. Since 75% is ALMOST most of the page, let s set it up that at smaller device screen..three-fourths will actually be only screen and (min-width: 481px) and (max-width:776px) {.container { 38

11 .one-fourth { width: 50%;.three-fourth { width: 100%;.section-info { Save and Preview. The text is starting to look a bit better. Now let s put our.artist-week class to good use. Set it up that.artist-week aligns to center. Save and preview You ll notice that the image is not centering to middle of the page. That is because the image is inside a.one-fourth column, which in responsive for tablets is actually 50% of the page or one-half. We can change that by setting the width of.artist-week to 100% width in CSS.....three-fourth { width: 100%;.artist-week { width: 100%; text-align: center;.section-info { Save and Preview TARGET SMALL DEVICES Small devices are IMPORTANT these days. Many designers have a mobile first approach meaning they try to create designs that work well for mobile devices and then expand their designs to work for other platforms like tablets and traditional desktop computers. 39

12 Preview out webpage into the Firefox responsive design viewport. You ll notice that as we to thin widths such as 500 pixels and below that our design REALLY suffers. Each having two column layouts are not cutting it at small smartphone type displays Let s fix that with the help of media queries. Let s set up our final media query to target smartphones or devices that are LESS than 480 pixels. /* == CSS for Smartphones == only screen and (max-width: 480px) { Let s begin by copying all of the CSS from our tablet media query and pasting into our smartphone media query. Remember when we redefined.one-fourth as 50%? Well, let s take the.one-fourth for smartphones and make it 100%. In fact, let s take all of our widths less than 100% and define them as 100%.one-fourth,.one-third,.one-half,.three-fourths,.one-whole { width: 100%; Save and Preview Your design should now fit nicely as a one column design at small device widths. FIX THE TOP ROW IN MOBILE VIEW The problem with redefining our sections to go 100% is that now our logo and navigation bar are on separate lines. In our design we would like to keep them in the same row. To fix this fix the row containing the logo and navigation bar. Add a class of.mobile-top top to it. Now that we have this new class let s use it, but only when device sizes are small. 40

13 .mobile-top.one-half { width: 50%; This CSS rule will keep the original.one-half columns as one half, but only for the top row. CENTER THE FOOTER CONTENT At smaller size since the design compacts to a single column rather than multiple columns we can change the alignment of the content to match the design. Let s center the social media bar and the legal information at the bottom. For small devices make the footer content align to the center. footer { text-align: center; MAKE DESIGN ELEMENTS APPEAR AND DISAPPER As the size of the screen changes some elements just do not work for our design. As the screen gets smaller the horizontal nagivation bar just isn t cutting it. What we would like to do is have the navigation appear for wider screens like large computers and laptop computers, and then for tablet devices and smaller devices be replaced by the mobile stacked symbol. This symbol is using connected to javascript/jquery that when touched by the user s finger it will spring load a menu to appear vertically. Although we are not going to be able to setup the spring loaded menu in this class, we can set up the element that when screen shrinks the navigation bar disappears and mobile stacked icon appears. To do this we will use the CSS property referred as display: 41

14 none, display: inherit. When you use display:none it not only makes the element invisible, but in fact removes the element from the browser rendering, as if it had never been a part of the design. Right now in our navigation we have it set to three columns with the logo in the first column, the navigation bar in the second and the stacked mobile icon in the third. Let s reset the column widths in the HTML page from onethird to one-half. If you have not already, make sure there is a way to select the mobile icon. You can have it inside a <section> tag with an id or class. Another possibility is creating a.mobile class and applying it to the Font Awesome class CSS. In this example I have created the.mobile class and applied it to the Font Awesome code. Save and Preview You notice that the stacked mobile icon falls to the next line since 50% + 50% + 50% = 150% and they all can not fit on the same line. That is okay, since we are going to hide the mobile icon. Go to your responsive.css file. Inside your extra large css (the media query for sizes LARGER than 954px) add the following.mobile { display: none; Save and Preview. Make sure your browser is ABOVE 954 pixels. You should notice that your mobile stacked icon is invisible. Add the same.mobile class you our large devices, or laptop devices. MAKE THE <NAV> BAR DISAPPEAR Let s make the navigation bar, or <nav> tag disappear when the width gets smaller. 42

15 Set it for the tablet and mobile sizes that nav { display: none; For tablet and smartphone sizes let s set our mobile class from display: none to display: inherit, or visiable. Save and preview REMOVE CLUTTER Not everything works for all size designs. For instance if you view the design at a small smartphone size the musician photos in the row after the header are just ackward and make the design feel out of place. REMOVE ARTIST PHOTOS Let s remove these photos for the small smartphone designs. Begin by adding a class to the row containing the musicians. Call it.top-artists. In your responsive CSS set.top-artists to none for small devices sizes. Save and Preview REMOVE THE MUSIC PLAYER The idea of the music player by the client is a good idea, but the music player just is not feisible in this design. Let s remove the music-player for smaller size sizes. Set the #music-player to display:none for small devices. You can view step 8 on the class blog as a reference source 43