{"id":98,"date":"2020-08-01T19:37:54","date_gmt":"2020-08-01T23:37:54","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-4-%e2%80%a2-navigation-menus-and-responsive-design\/"},"modified":"2021-07-26T10:09:59","modified_gmt":"2021-07-26T14:09:59","slug":"tutorial-4-navigation-menus-and-responsive-design","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-4-navigation-menus-and-responsive-design\/","title":{"raw":"Tutorial 4 \u2022 Navigation Menus and Responsive Design","rendered":"Tutorial 4 \u2022 Navigation Menus and Responsive Design"},"content":{"raw":"<div class=\"tutorial-4-\u2022-navigation-menus-and-responsive-design\">\r\n\r\n[caption id=\"attachment_94\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-1024x578.png\" alt=\"\" width=\"1024\" height=\"578\" class=\"wp-image-94 size-large\" \/><\/a> Menu designed for screen resolutions 750px and above.[\/caption]\r\n\r\nIn this tutorial we will turn an ordinary-looking menu into a menu bar like the one shown. The menu bar is made using the unordered list &lt;ul&gt; tag, where each item is a \u201cbullet point,\u201d or list item &lt;li&gt;, with the \u201cbullet\u201d removed. The list items are styled to \u201cfloat: left,\u201d which turns them from block to inline. (Block items act as if they had paragraph returns at the end; inline items, like spaces between.) Other settings include \u201ccolor\u201d for type, \u201cbackground: color,\u201d \u201cborder-bottom,\u201d \u201cline-height,\u201d \u201cpadding,\u201d and \u201cwidth.\u201d The width is set so that all the list items fit across the page (i.e., 2 items occupy 50%, 3 would be 33%, etc.).\r\n<div style=\"background: azure;border: 1px solid lightblue;margin: 12px auto;padding: 12px\">\r\n<h2>Making the Menu Bar<\/h2>\r\n<ol>\r\n \t<li>Open the file \u201cindex_nav_START.html. Save As each file remove the \u201c_START\u201d from the name.<\/li>\r\n \t<li>Make the Menu into a Menu Bar:\r\n<ul>\r\n \t<li>Remove the bullet point from between \u201cHome\u201d and \u201cThe Grey Wolf,\u201d remove the paragraph tag &lt;p&gt;, place the items into an unordered list &lt;ul&gt;, and make each item into a list item &lt;li&gt;.<\/li>\r\n \t<li>Style the ul to be 1004px wide and also have max-width: 100%;.<\/li>\r\n \t<li>Style the li to remove the bullet points (list-style: none;), arrange horizontally (float: left;), and set width to 50%. Add padding or set height to make the menu items into rectangles.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Add a CSS &lt;style&gt; selector, li:hover, that applies when the mouse is over the item. Style the list items different so users will know they put the mouse in the right place to click a link. E.g., set a different color background, (font) color, drop shadow, and\/or other style.<\/li>\r\n<\/ol>\r\n<\/div>\r\n\r\n[caption id=\"attachment_95\" align=\"aligncenter\" width=\"512\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-784x1024.png\" alt=\"\" width=\"512\" height=\"669\" class=\"wp-image-95\" \/><\/a> Menu designed for screen resolutions 650px or less.[\/caption]\r\n<h2>Adding Responsive Design<\/h2>\r\n<p class=\"import-Normal\">Increasingly viewers are using smartphones to look at web pages. The goal of responsive design is to have a web page \u201crespond\u201d to different size viewing screens by changing styles to promote legibility. Responsive design can be implemented with media queries. \u201cResponsive\u201d could also be interpreted as improving accessibility for readers with visual challenges.<\/p>\r\nMedia queries (@media) make it possible to style something, like a menu, differently on a smartphone than on a large screen.\r\n\r\nWhen designing for cell phones, keep in mind that people want to see the images as large as possible (especially if they have a lot of detail) and want to read the text easily. Image the size of postage stamps and text that runs off the page and requires horizontal scrolling will frustrate readers.\r\n\r\n[caption id=\"attachment_252\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-1024x768.jpg\" alt=\"\" width=\"1024\" height=\"768\" class=\"size-large wp-image-252\" \/><\/a> Simple responsively designed page, shown on a 1024px-wide browser window (left) and a cell phone screen of less than 750px (right). For the large screen, the body is centered in the page with 10% margin on each side, and the image is styled with text wrap (\"float: left;\"). On the cell phone screen, the body is widened to 90% of the screen with a 5% margin, type size and leading are slightly enlarge for legibility, the text wrap is removed from the image with the style \"clear: both;\" and the image is set to 100% of the body width.[\/caption]\r\n<p class=\"import-Normal\">If you have a menu of several items across your page, it may be easy to see and select on a 21-in. monitor but difficult on a 4-in. phone screen.<\/p>\r\n&nbsp;\r\n<table style=\"margin: 0 auto\" width=\"67%\">\r\n<tbody>\r\n<tr>\r\n<th colspan=\"3\">iPhone Screen Resolutions<\/th>\r\n<\/tr>\r\n<tr>\r\n<th>Model<\/th>\r\n<th>Screen Size<\/th>\r\n<th>Resolution (px)<\/th>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><strong>iPhone 5, 5s, SE<\/strong><\/td>\r\n<td>4 in. diag.<\/td>\r\n<td>640<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>iPhone 6, 6s, 7, 8<\/strong><\/td>\r\n<td>4.7<\/td>\r\n<td>750<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><strong>iPhone X<\/strong><\/td>\r\n<td>5.8<\/td>\r\n<td>1125<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>iPhone 6Plus, 7Plus, 8Plus<\/strong><\/td>\r\n<td>5.5<\/td>\r\n<td>1282<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<div><\/div>\r\n\r\n[caption id=\"attachment_106\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus.jpg\" alt=\"\" width=\"1024\" height=\"680\" class=\"wp-image-106 size-full\" style=\"border: 1px solid gray\" \/><\/a> Menus with responsive design, styled to appear horizontally (top screen capture) on large-screen monitors and vertically (bottom) on smartphones. The @media query code makes the menu items stack vertically on screens with less than 500px resolution.[\/caption]\r\n\r\nTo make menus easier to see, web designers typically use a media query to structure menus vertically on the page for smartphones.\r\n<div style=\"background: azure;border: 1px solid lightblue;margin: 12px auto;padding: 12px\">\r\n<h3>Add responsive design to your menu<\/h3>\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>\r\n \t<li>Add a media query to your embedded\/global &lt;style&gt; or external .css:\r\n@media screen and (max-width: 750px) {}\r\nThis query will apply to screens that are 750px or less in width.<\/li>\r\n \t<li>Style the nav ul selector:\r\n<ul>\r\n \t<li>max-width: 100%;<\/li>\r\n \t<li>Style the nav li selector:\r\n<ul>\r\n \t<li>width: 100%;<\/li>\r\n \t<li>float: none;<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<\/div>\r\n<div class=\"textbox shaded\">\r\n<p class=\"import-Normal\"><strong>Checklist for Responsive Design<\/strong><\/p>\r\n<p class=\"import-Normal\"><strong>\u274f menu and buttons<\/strong><\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f menu position, e.g., horizontal on large screen, vertical on small screen<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f :hover \u2014 change style when mouse is over tag<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f :active \u2014 change style when tag is clicked<\/p>\r\n<p class=\"import-Normal\"><strong>\u274f page layout<\/strong><\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f make images occupy the full screen width by changing the image display from text wrap (float) to block<\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 \u274f make the text occupy 95% of the screen width<\/p>\r\n<p class=\"import-Normal\"><strong>\u274f change color (color, background)<\/strong><\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f change contrast<\/p>\r\n<p class=\"import-Normal\"><strong>\u274f change font<\/strong><\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f size (font-size)<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f leading (line-height)<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f bold<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f contrast<\/p>\r\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f black\/white vs. white\/black<\/p>\r\n<p class=\"import-Normal\"><strong>\u274f alt tag \u2014 use to describe images<\/strong><\/p>\r\n\r\n<\/div>\r\n<h3>Viewing Your Responsive Design<\/h3>\r\n<p class=\"import-Normal\">Most popular browsers have a \u201cresponsive design mode\u201d for viewing your page as it would appear on various smartphones and tablets.<\/p>\r\n<strong>Safari<\/strong>\r\n<ul>\r\n \t<li>Preferences &gt; Advanced &gt; check Show Developer Menu<\/li>\r\n \t<li>Developer &gt; Enter Responsive Design Mode &gt; select device<\/li>\r\n<\/ul>\r\n<strong>Chrome <\/strong>\r\n<ul>\r\n \t<li>View &gt; Developer &gt; Developer Tools &gt; click on Responsive Design button<\/li>\r\n<\/ul>\r\n<p class=\"import-Normal\" style=\"text-align: center\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari.jpg\" alt=\"\" width=\"328\" height=\"550\" class=\"size-full wp-image-162 alignnone\" \/><\/a><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome.jpg\" alt=\"\" width=\"302\" height=\"548\" class=\"size-full wp-image-161 alignnone\" \/><\/a><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 58.3pt;margin-right: 58.3pt;text-align: center\"><em>Page viewed in Safari (left) and Chrome (right) in responsive design mode with iPhone 8.<\/em><\/p>\r\n&nbsp;\r\n\r\n[caption id=\"attachment_189\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive.gif\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-1024x816.gif\" alt=\"\" width=\"1024\" height=\"816\" class=\"wp-image-189 size-large\" \/><\/a> This animated GIF shows how a responsively designed page works. (Click to play.)[\/caption]\r\n<h2>Accessibility<\/h2>\r\n<p class=\"import-Normal\">Accessibility and responsive design are interrelated because their goal is to promote universal access as much as possible to a web site. Accessibility refers to readers with visual or tactile challenges that may make it difficult to read or interact with a site. For example, visually-impaired readers may find it difficult to read small or low-contrast type, while those with tactile impairments may find it difficult to click the mouse on a small link. Accessibility and responsive design are interrelated.<\/p>\r\n<p class=\"import-Normal\">In addition to the responsive design checklist on page 1, web designers can include image information in the form of \u201calt\u201d tags that display when an image does not load, and in \u201ctitle\u201d tags that appear as popups.<\/p>\r\n<p class=\"import-Normal\">&lt;img src=\u201dimage.jpg\u201d alt=\u201dChinese paper cut\u201d title=\u201dChinese paper cut\u201d \/&gt;<\/p>\r\n<p class=\"import-Normal\"><\/p>\r\n\r\n<\/div>","rendered":"<div class=\"tutorial-4-\u2022-navigation-menus-and-responsive-design\">\n<figure id=\"attachment_94\" aria-describedby=\"caption-attachment-94\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-1024x578.png\" alt=\"\" width=\"1024\" height=\"578\" class=\"wp-image-94 size-large\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-1024x578.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-300x169.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-768x434.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-1536x868.png 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-65x37.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-225x127.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2-350x198.png 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1-2.png 2004w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-94\" class=\"wp-caption-text\">Menu designed for screen resolutions 750px and above.<\/figcaption><\/figure>\n<p>In this tutorial we will turn an ordinary-looking menu into a menu bar like the one shown. The menu bar is made using the unordered list &lt;ul&gt; tag, where each item is a \u201cbullet point,\u201d or list item &lt;li&gt;, with the \u201cbullet\u201d removed. The list items are styled to \u201cfloat: left,\u201d which turns them from block to inline. (Block items act as if they had paragraph returns at the end; inline items, like spaces between.) Other settings include \u201ccolor\u201d for type, \u201cbackground: color,\u201d \u201cborder-bottom,\u201d \u201cline-height,\u201d \u201cpadding,\u201d and \u201cwidth.\u201d The width is set so that all the list items fit across the page (i.e., 2 items occupy 50%, 3 would be 33%, etc.).<\/p>\n<div style=\"background: azure;border: 1px solid lightblue;margin: 12px auto;padding: 12px\">\n<h2>Making the Menu Bar<\/h2>\n<ol>\n<li>Open the file \u201cindex_nav_START.html. Save As each file remove the \u201c_START\u201d from the name.<\/li>\n<li>Make the Menu into a Menu Bar:\n<ul>\n<li>Remove the bullet point from between \u201cHome\u201d and \u201cThe Grey Wolf,\u201d remove the paragraph tag &lt;p&gt;, place the items into an unordered list &lt;ul&gt;, and make each item into a list item &lt;li&gt;.<\/li>\n<li>Style the ul to be 1004px wide and also have max-width: 100%;.<\/li>\n<li>Style the li to remove the bullet points (list-style: none;), arrange horizontally (float: left;), and set width to 50%. Add padding or set height to make the menu items into rectangles.<\/li>\n<\/ul>\n<\/li>\n<li>Add a CSS &lt;style&gt; selector, li:hover, that applies when the mouse is over the item. Style the list items different so users will know they put the mouse in the right place to click a link. E.g., set a different color background, (font) color, drop shadow, and\/or other style.<\/li>\n<\/ol>\n<\/div>\n<figure id=\"attachment_95\" aria-describedby=\"caption-attachment-95\" style=\"width: 512px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-784x1024.png\" alt=\"\" width=\"512\" height=\"669\" class=\"wp-image-95\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-784x1024.png 784w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-230x300.png 230w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-768x1003.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-1176x1536.png 1176w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-65x85.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-225x294.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2-350x457.png 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2-2.png 1298w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><figcaption id=\"caption-attachment-95\" class=\"wp-caption-text\">Menu designed for screen resolutions 650px or less.<\/figcaption><\/figure>\n<h2>Adding Responsive Design<\/h2>\n<p class=\"import-Normal\">Increasingly viewers are using smartphones to look at web pages. The goal of responsive design is to have a web page \u201crespond\u201d to different size viewing screens by changing styles to promote legibility. Responsive design can be implemented with media queries. \u201cResponsive\u201d could also be interpreted as improving accessibility for readers with visual challenges.<\/p>\n<p>Media queries (@media) make it possible to style something, like a menu, differently on a smartphone than on a large screen.<\/p>\n<p>When designing for cell phones, keep in mind that people want to see the images as large as possible (especially if they have a lot of detail) and want to read the text easily. Image the size of postage stamps and text that runs off the page and requires horizontal scrolling will frustrate readers.<\/p>\n<figure id=\"attachment_252\" aria-describedby=\"caption-attachment-252\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-1024x768.jpg\" alt=\"\" width=\"1024\" height=\"768\" class=\"size-large wp-image-252\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-1024x768.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-300x225.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-768x576.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-1536x1152.jpg 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-65x49.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-225x169.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2-350x263.jpg 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-2.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-252\" class=\"wp-caption-text\">Simple responsively designed page, shown on a 1024px-wide browser window (left) and a cell phone screen of less than 750px (right). For the large screen, the body is centered in the page with 10% margin on each side, and the image is styled with text wrap (&#8220;float: left;&#8221;). On the cell phone screen, the body is widened to 90% of the screen with a 5% margin, type size and leading are slightly enlarge for legibility, the text wrap is removed from the image with the style &#8220;clear: both;&#8221; and the image is set to 100% of the body width.<\/figcaption><\/figure>\n<p class=\"import-Normal\">If you have a menu of several items across your page, it may be easy to see and select on a 21-in. monitor but difficult on a 4-in. phone screen.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"margin: 0 auto; width: 67%;\">\n<tbody>\n<tr>\n<th colspan=\"3\">iPhone Screen Resolutions<\/th>\n<\/tr>\n<tr>\n<th>Model<\/th>\n<th>Screen Size<\/th>\n<th>Resolution (px)<\/th>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><strong>iPhone 5, 5s, SE<\/strong><\/td>\n<td>4 in. diag.<\/td>\n<td>640<\/td>\n<\/tr>\n<tr>\n<td><strong>iPhone 6, 6s, 7, 8<\/strong><\/td>\n<td>4.7<\/td>\n<td>750<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><strong>iPhone X<\/strong><\/td>\n<td>5.8<\/td>\n<td>1125<\/td>\n<\/tr>\n<tr>\n<td><strong>iPhone 6Plus, 7Plus, 8Plus<\/strong><\/td>\n<td>5.5<\/td>\n<td>1282<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<figure id=\"attachment_106\" aria-describedby=\"caption-attachment-106\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus.jpg\" alt=\"\" width=\"1024\" height=\"680\" class=\"wp-image-106 size-full\" style=\"border: 1px solid gray\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus-300x199.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus-768x510.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus-65x43.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus-225x149.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/menus-350x232.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-106\" class=\"wp-caption-text\">Menus with responsive design, styled to appear horizontally (top screen capture) on large-screen monitors and vertically (bottom) on smartphones. The @media query code makes the menu items stack vertically on screens with less than 500px resolution.<\/figcaption><\/figure>\n<p>To make menus easier to see, web designers typically use a media query to structure menus vertically on the page for smartphones.<\/p>\n<div style=\"background: azure;border: 1px solid lightblue;margin: 12px auto;padding: 12px\">\n<h3>Add responsive design to your menu<\/h3>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Add a media query to your embedded\/global &lt;style&gt; or external .css:<br \/>\n@media screen and (max-width: 750px) {}<br \/>\nThis query will apply to screens that are 750px or less in width.<\/li>\n<li>Style the nav ul selector:\n<ul>\n<li>max-width: 100%;<\/li>\n<li>Style the nav li selector:\n<ul>\n<li>width: 100%;<\/li>\n<li>float: none;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n<div class=\"textbox shaded\">\n<p class=\"import-Normal\"><strong>Checklist for Responsive Design<\/strong><\/p>\n<p class=\"import-Normal\"><strong>\u274f menu and buttons<\/strong><\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f menu position, e.g., horizontal on large screen, vertical on small screen<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f :hover \u2014 change style when mouse is over tag<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f :active \u2014 change style when tag is clicked<\/p>\n<p class=\"import-Normal\"><strong>\u274f page layout<\/strong><\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f make images occupy the full screen width by changing the image display from text wrap (float) to block<\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 \u274f make the text occupy 95% of the screen width<\/p>\n<p class=\"import-Normal\"><strong>\u274f change color (color, background)<\/strong><\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f change contrast<\/p>\n<p class=\"import-Normal\"><strong>\u274f change font<\/strong><\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f size (font-size)<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f leading (line-height)<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f bold<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f contrast<\/p>\n<p class=\"import-Normal\"><span style=\"margin-left: 26pt\"><\/span>\u274f black\/white vs. white\/black<\/p>\n<p class=\"import-Normal\"><strong>\u274f alt tag \u2014 use to describe images<\/strong><\/p>\n<\/div>\n<h3>Viewing Your Responsive Design<\/h3>\n<p class=\"import-Normal\">Most popular browsers have a \u201cresponsive design mode\u201d for viewing your page as it would appear on various smartphones and tablets.<\/p>\n<p><strong>Safari<\/strong><\/p>\n<ul>\n<li>Preferences &gt; Advanced &gt; check Show Developer Menu<\/li>\n<li>Developer &gt; Enter Responsive Design Mode &gt; select device<\/li>\n<\/ul>\n<p><strong>Chrome <\/strong><\/p>\n<ul>\n<li>View &gt; Developer &gt; Developer Tools &gt; click on Responsive Design button<\/li>\n<\/ul>\n<p class=\"import-Normal\" style=\"text-align: center\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari.jpg\" alt=\"\" width=\"328\" height=\"550\" class=\"size-full wp-image-162 alignnone\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari.jpg 328w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari-179x300.jpg 179w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari-65x109.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-safari-225x377.jpg 225w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome.jpg\" alt=\"\" width=\"302\" height=\"548\" class=\"size-full wp-image-161 alignnone\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome.jpg 302w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome-165x300.jpg 165w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome-65x118.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-chrome-225x408.jpg 225w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/a><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 58.3pt;margin-right: 58.3pt;text-align: center\"><em>Page viewed in Safari (left) and Chrome (right) in responsive design mode with iPhone 8.<\/em><\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_189\" aria-describedby=\"caption-attachment-189\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-1024x816.gif\" alt=\"\" width=\"1024\" height=\"816\" class=\"wp-image-189 size-large\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-1024x816.gif 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-300x239.gif 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-768x612.gif 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-65x52.gif 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-225x179.gif 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-350x279.gif 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-189\" class=\"wp-caption-text\">This animated GIF shows how a responsively designed page works. (Click to play.)<\/figcaption><\/figure>\n<h2>Accessibility<\/h2>\n<p class=\"import-Normal\">Accessibility and responsive design are interrelated because their goal is to promote universal access as much as possible to a web site. Accessibility refers to readers with visual or tactile challenges that may make it difficult to read or interact with a site. For example, visually-impaired readers may find it difficult to read small or low-contrast type, while those with tactile impairments may find it difficult to click the mouse on a small link. Accessibility and responsive design are interrelated.<\/p>\n<p class=\"import-Normal\">In addition to the responsive design checklist on page 1, web designers can include image information in the form of \u201calt\u201d tags that display when an image does not load, and in \u201ctitle\u201d tags that appear as popups.<\/p>\n<p class=\"import-Normal\">&lt;img src=\u201dimage.jpg\u201d alt=\u201dChinese paper cut\u201d title=\u201dChinese paper cut\u201d \/&gt;<\/p>\n<p class=\"import-Normal\">\n<\/div>\n","protected":false},"author":6,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-98","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":20,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/98\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/98\/revisions\/400"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/98\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapter-type?post=98"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/contributor?post=98"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/license?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}