{"id":41,"date":"2020-08-01T14:55:07","date_gmt":"2020-08-01T18:55:07","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-2-%e2%80%a2-designagility-and-page-layout\/"},"modified":"2021-07-23T15:11:24","modified_gmt":"2021-07-23T19:11:24","slug":"tutorial-2-designagility-and-page-layout","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-2-designagility-and-page-layout\/","title":{"raw":"Tutorial 2 \u2022 Planning Your Site","rendered":"Tutorial 2 \u2022 Planning Your Site"},"content":{"raw":"This tutorial is about designing your web site, including planning for the user experience, laying out the pages, designing for different devices with responsive design, doing a design critique, and implementing analytics.\r\n<h1>The 4 \u201cWs\u201d of Web Design<\/h1>\r\nA work-in-progress, someone with a sense of humor determined that there are four \u201cWs\u201d of web design, a reference to \u201cwww\u201d or \u201cW3\u201d:\r\n<ul>\r\n \t<li>Width\u2014Design for width, let scrolling handle the height.<\/li>\r\n \t<li>Who\u2014We do not know who will visit our site, but we want everyone to feel welcome and be able to use it, even with any sensory challenges they may face.<\/li>\r\n \t<li>What\u2014We don't know what equipment and software our users have, such as the computer platform or device, monitor or screen, operating system, browser, browser window size, color settings, and installed fonts. However we try to design for the common scenarios, such as large-screen monitors and cell phones, and give the fonts to users whenever possible.<\/li>\r\n \t<li>Where\u2014We don't know where our audience comes from, but we would like to keep them on our site as much as possible.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<table style=\"width: 100%;margin: 0px auto\">\r\n<tbody>\r\n<tr style=\"background: whitesmoke\">\r\n<th colspan=\"3\">Four \u201cWs\u201d of Web Design<\/th>\r\n<\/tr>\r\n<tr>\r\n<th width=\"10%\">\u201cW\u201d<\/th>\r\n<th width=\"50%\">Description<\/th>\r\n<th width=\"40%\">Example(s)<\/th>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><strong>Width<\/strong><\/td>\r\n<td>Design for width, let scrolling handle the height<\/td>\r\n<td>\r\n<ul style=\"font-size: 12pt\">\r\n \t<li>Define page width in px, %, or vw (viewport widths)<\/li>\r\n<\/ul>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Who<\/strong><\/td>\r\n<td>We do not know who will visit our site, but we want everyone to feel welcome and be able to use it, even with any sensory challenges they may face.<\/td>\r\n<td>\r\n<ul style=\"font-size: 12pt\">\r\n \t<li>Design for accessibility<\/li>\r\n \t<li>Provide user feedback, e.g., color links differently when mouse is over them and\/or when clicked.<\/li>\r\n<\/ul>\r\n<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><strong>What<\/strong><\/td>\r\n<td>We don't know what equipment and software our users have, such as the computer platform or device, monitor or screen, operating system, browser, or browser window size. However we try to design for the common scenarios, such as large-screen monitors and cell phones.<\/td>\r\n<td>\r\n<ul style=\"font-size: 12pt\">\r\n \t<li>@media device queries to set styles for specific resolutions<\/li>\r\n \t<li>Inclusion of multiple fonts in styles<\/li>\r\n \t<li>Quality checks on different browsers and platforms<\/li>\r\n<\/ul>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Where<\/strong><\/td>\r\n<td>We don't know where our audience comes from, but we would like to keep them on our site as much as possible.<\/td>\r\n<td>\r\n<ul style=\"font-size: 12pt\">\r\n \t<li>Google Analytics<\/li>\r\n \t<li>Use of new tab for links (target=\"_blank\")<\/li>\r\n<\/ul>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h1>User Experience Design (UXD) and \u201cDesignAgility\u201d<\/h1>\r\nSteve Jobs of Apple Computer once said something like, \"We must always think about the customers first and develop technology to meet their needs; we cannot start by inventing cool tech and then look for a way to sell it.\"\r\n\r\nLikewise, when designing web pages, designers have to think about the purpose of the site, the audience, and the readers\u2019 experience as they use it \u2014 a process commonly called \u201cuser experience design\u201d (UXD). \u201cDesignAgility,\u201d a systematic approach to UXD for media, was created by Okke Schl\u00fcter from HdM-Stuttgart and Stefanie Quade (reference: Quade, Stefanie, and Okke Schl\u00fcter, <em>DesignAgility\u2014Toolbox Media Prototyping<\/em>. Amazon Kindle Direct Publishing, 2019). DesignAgility combines \u201cdesign thinking\u201d with \u201cagile manufacturing.\u201d\r\n\r\nThe first step in DesignAgility, \u201cDiscovery,\u201d is to think of a challenge or problem that people want to solve. For a web site, this could include questions like: What is the site\u2019s purpose\u2014to inform, persuade, entertain, or receive a product or service? What is the dominant media\u2014text, photos, videos, animation? Who will the audience be, and what are their interests and possible sensory challenges they may face in reading and\/or listening to the site?\r\n\r\nThe second step, \u201cInterpretation,\u201d means to develop an understanding of how people will meet their challenge by using your site. A valuable step in understanding users is to define several \u201cpersonas,\u201d who form a representative sampling of presumed users of the site, and their characteristics.\r\n\r\nThe third step, \u201cIdeation,\u201d means thinking of solutions to the design challenge. The personas\u2019 perception and use of a site can be expressed in \u201cuser stories.\u201d\r\n\r\nSome additional DesignAgility steps are described in the table below.\r\n\r\n&nbsp;\r\n<table style=\"border-collapse: collapse;margin: 0px auto;width: 1002px;height: 210px\" border=\"0\">\r\n<tbody>\r\n<tr style=\"background: whitesmoke\">\r\n<th>DesignAgility Step<\/th>\r\n<th>What to Do<\/th>\r\n<\/tr>\r\n<tr>\r\n<td><em>Discovery<\/em><\/td>\r\n<td>Define the purpose of your web site:\r\n\u2022 inform, persuade, entertain, receive product or service?\r\n\u2022 dominant media\u2014text, photos, videos, animations?<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><em>Interpretation<\/em><\/td>\r\n<td>Define several \u201cpersonas,\u201d or presumed users, their ages, occupations, interests, any sensory challenges they face.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><em>Ideation<\/em><\/td>\r\n<td>Write \u201cuser stories\u201d about why each persona will be interested in the site and how they will interact with it.<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><em>Specification<\/em><\/td>\r\n<td>Sketch out a sample page layout for your site:\r\n\u2022 fixed-width page for text-heavy documents\r\n\u2022 variable-width page where photos are the most important elements<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><em>Implementation<\/em><\/td>\r\n<td>Design the site in HTML &amp; CSS.<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td><em>Evaluation<\/em><\/td>\r\n<td>Design Critique\r\n\u2022 show your design to another class member and ask for their feedback.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><em>Deployment<\/em><\/td>\r\n<td>Make the site public and assess impact\r\n\u2022 Google Analytics\u2014Enables tracking of users to your site<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>DesignAgility Example<\/h3>\r\n<strong>Discovery and Challenge Identification.<\/strong>\u00a0Define a challenge or problem that people want to solve.\u00a0<span style=\"text-align: initial;font-size: 1em\">For this example I plan to make a site about Russian fairytale boxes. These are small, hand-painted boxes with illustrations of little-known fairytale characters like \u201cThe Grey Wolf\u201d and \u201cThe Firebird\u201d that date back to the time of the Russian Czars. On a trip to Ukraine I bought several of the boxes and plan to photograph them so I will own the rights to the photos.\u00a0<\/span> The photos and text are equally important. The site should to appeal to readers \u201cfrom 6 to 106.\u201d\r\n\r\n<strong>Interpretation and Personas.<\/strong>\u00a0In planning the site I developed 2 \u201cpersonas\u201d of presumed users:\r\n<div class=\"page\" title=\"Page 1\">\r\n<div class=\"layoutArea\">\r\n<div class=\"column\">\r\n<ul>\r\n \t<li><span>Sergei Soldier is a 65-year-old grandfather who emigrated from Russia to Canada to be with his children. His interests include reading, home remodeling, and arts and crafts. Ever active, he works as a security officer at the art museum in his city. His grandchildren bought him an Android tablet so he could read eBooks and browse the web.<\/span><\/li>\r\n \t<li><span style=\"text-align: initial;font-size: 1em\">Sweetie Smith is a precocious 6-year-old girl who is an avid reader and is interested in all kinds of arts and crafts. At home she has an iMac and when traveling she takes an iPad.<\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<strong>Ideation and User Stories.<\/strong>\u00a0On this site the pictures and text are equally important. The photos should look good in color and when rendered in black-and-white. The text should be high-contrast and enlargeable and be readable with a screen reader or included audio. The pages should be designed responsively so they look good on both desktop computers and tablets and cell phones.\r\n<div class=\"page\" title=\"Page 2\">\r\n<div class=\"layoutArea\">\r\n<div class=\"column\">\r\n<ul>\r\n \t<li><span>Sergei may be interested in this eBook because of his Russian heritage and interest in arts &amp; crafts. At his age of 65, it will be important that the site be easy to read for someone who uses reading glasses. The type should have good contrast and exhibit responsive design so it looks good and remains legible on computers and tablets. The linked quarter-page pictures that expand to full-size upon click or touch will make it easier for Sergei to examine the photos in great detail.<\/span><\/li>\r\n \t<li><span>Sweetie may also be interested in this site because of her interest in arts &amp; crafts. Since she is just learning to read, it would be appealing for her if at least parts of the book included audio channels that would read portions aloud to her.<\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div style=\"width: 80%;margin: 24px auto 0 auto;padding: 24px;background: azure;border: 1px solid lightblue\">\r\n<h3 style=\"margin-top: 12px;padding-top: 0\">Writing Your Web Site Proposal<\/h3>\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>\r\n \t<li>Think about a challenge that you could address with a web site. What will be more important\u2014text or photos? Describe how you will build the site.<\/li>\r\n \t<li>Define some personas of prospective site users and their characteristics.<\/li>\r\n \t<li>Write a user story for each persona, describing what will bring them to your site and how they will use it.<\/li>\r\n \t<li>Draw a basic layout of one of your content pages, including (if present) banner, menu, photos, text, and other information. Will the site use a fixed or variable layout?<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<\/div>\r\n<h1>Page Layout<\/h1>\r\nA web site\u2019s purpose and audience are important to know before designing pages. As discussed in Tutorial 1, page layout for the web is different than it is for print because the designer never knows what type of computer, device, operating system, monitor, screen, browser, or window size the readers will use. Regardless, we want everyone to feel included and be able to use the site.\r\n\r\nWeb pages can be designed with fixed or variable sizes. Fixed size is easiest for text-heavy pages, such as news stories, while variable sizes are good when photos are the dominant media.\r\n\r\nBelow are examples of fixed-width and variable-width pages.\r\n<table style=\"border-collapse: collapse;width: 100%\" border=\"0\">\r\n<tbody>\r\n<tr style=\"height: 457px\">\r\n<td style=\"width: 50%;vertical-align: top\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_FixedWidthPage.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_FixedWidthPage-1011x1024.png\" alt=\"\" class=\"aligncenter wp-image-44\" width=\"512\" height=\"519\" \/><\/a><\/td>\r\n<td style=\"width: 50%;vertical-align: top\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-1024x743.png\" alt=\"\" class=\"aligncenter wp-image-45\" width=\"512\" height=\"372\" \/><\/a><\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50%;vertical-align: top\"><em>Example of a fixed-width page for a text-heavy document, designed to look like a U.S. Letter or A4 page. The \u201cpage\u201d centers itself in the browser window and remains the same size. Sizes were defined in px (pixels).<\/em><\/td>\r\n<td style=\"width: 50%;vertical-align: top\"><em>Example of a variable-width page used because the photo is the dominant medium. The photo and text expand as the browser window is enlarged. Sizes were defined in \u201cvw\u201d (viewport width) and \u201cvh\u201d (viewport height).<\/em><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Responsive Design<\/h2>\r\nDoes your web page need to be readable and look good on a large-screen monitor, cell phone, and iPad or tablet? If so then it should be designed to be \u201cresponsive,\u201d or adaptable to different screen sizes.\r\n\r\nStyles for responsive design include \u201cwidth\u201d set in percent instead of pixels, and limiting the width to that of the browser window by using the \u201cmax-width\u201d style in percent.\r\n\r\nIn the two examples below, the widths of the page elements in the responsive page are set as 100%, 20%, and 80%, respectively; while in the fixed-width page they are set in pixels (px).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_47\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page.jpg\" alt=\"\" class=\"wp-image-47 size-full\" width=\"1024\" height=\"768\" \/><\/a> Examples of responsive and non-responsive pages. The responsive page expands and contracts to fit the browser window, while the non-responsive page remains the same size regardless of the browser window size.[\/caption]\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=\"\" class=\"size-large wp-image-189\" width=\"1024\" height=\"816\" \/><\/a> This brief video shows responsive design in action. (Click to play.)[\/caption]\r\n\r\nFurther refinements to responsive design can be made using the media query rule (@media), in which the resolution of the applicable styles is defined. Example: @media only screen and (max-width: 750px) {}. Inside the braces would go the styles applicable to screen resolutions of 750px or less. Details in Tutorial 4.\r\n<h2>Design Critique<\/h2>\r\nThis section is based on a design critique contributed to class by Prof. Bettina Tabel, HdM-Stuttgart. When designing a web page, it can be useful to get a design critique from an objective third party.\u00a0 Following is a list of questions to consider:\r\n<h3>Home Page<\/h3>\r\n<ol>\r\n \t<li>What is the purpose of the site? Audience? Is this clear from the title and design?<\/li>\r\n \t<li>From the title and main photo (if any), are the subject and theme of the site clear?<\/li>\r\n \t<li>Does the site's color scheme fit the target group and the subject? Should the color scheme be neutral, pastel, bright, complementary, analogous, or other theme?<\/li>\r\n \t<li>Is the font selection appropriate to the site's subject and audience?<\/li>\r\n \t<li>Are the fonts legible (size, contrast)? Could they benefit from a drop shadow, complimentary-colored or lighter or darker background?<\/li>\r\n \t<li>If the site has one or more photos, have the image rights been clarified?<\/li>\r\n \t<li>Are photos sized appropriately to the pages and for viewing on different devices?<\/li>\r\n<\/ol>\r\n<h3>Other Pages<\/h3>\r\n<ol>\r\n \t<li>Do special effects (drop caps, callouts, sidebars) contribute to the theme of the site without being distracting?<\/li>\r\n \t<li>Are photos large enough for readers to see detail? If the reader clicks on or touches a photo, does it link to a larger version that can be viewed in more detail?<\/li>\r\n \t<li>Are sections (if present) separated clearly?<\/li>\r\n<\/ol>\r\n<table style=\"border-collapse: collapse;width: 100%\" border=\"0\">\r\n<tbody>\r\n<tr>\r\n<td style=\"vertical-align: top;width: 99.95187680461983%\" colspan=\"2\">\r\n<h4 style=\"text-align: center;margin: 0;padding: 0\">Sample Design Critique<strong>\u00a0<\/strong><\/h4>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"vertical-align: top;width: 49.95187680461983%\">\r\n<p style=\"text-align: center\"><strong>Original Site<\/strong><\/p>\r\n<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-1024x781.jpg\" alt=\"\" class=\"size-large wp-image-210\" width=\"1024\" height=\"781\" \/><\/a><\/td>\r\n<td style=\"width: 50%;vertical-align: top\">\r\n<p style=\"text-align: center\"><strong>Redesigned Site<\/strong><\/p>\r\n<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-1024x896.jpg\" alt=\"\" class=\"aligncenter size-large wp-image-211\" width=\"1024\" height=\"896\" \/><\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>Sample Critique \u2022 Questions<\/h3>\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>\r\n \t<li>Why are the top and bottom borders not the same height?<\/li>\r\n \t<li>Why are the links not vertically aligned in the menu bar<\/li>\r\n \t<li>Why are the links set in all caps?<\/li>\r\n \t<li>Why is a serif font used for the links?<\/li>\r\n \t<li>Why are the line lengths so long?<\/li>\r\n \t<li>Why was a script cap initial used when it's difficult to read?<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<h3>Common Design Flaws\u2014Don\u2019t Do It!<\/h3>\r\nThe graphic below shows several examples of common web design flaws, which are listed below and corrected in the second graphic.\r\n\r\n[caption id=\"attachment_261\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws.jpg\" alt=\"\" class=\"size-full wp-image-261\" width=\"1024\" height=\"406\" \/><\/a> Poorly designed page showing common design flaws.[\/caption]\r\n<ol>\r\n \t<li>Itty-bitty images\u2014can't see! Make \u2019em bigger because people want to see!<\/li>\r\n \t<li>Excessively large image files (&gt;1 MB) reduced in width in CSS. They take too long to download. Size appropriately in Photoshop or Preview.<\/li>\r\n \t<li>Use of bold paragraph &lt;p&gt; for headings. Instead use heading tags &lt;h1&gt;, &lt;h2&gt;, \u2026, &lt;h6&gt;.<\/li>\r\n \t<li>Use of underline for headings, reminiscent of typewriter days. Use a heading tag and a complimentary font.<\/li>\r\n \t<li>Use of default Times Roman font (boring!).<\/li>\r\n \t<li>Itty-bitty font size (can\u2019t read!). Make it 14pt or bigger and 1.4em line leading (line-height).<\/li>\r\n \t<li>Insufficient vertical space between elements. Use padding and\/or margin to adjust vertical height, not carriage returns &lt;br\/&gt;.<\/li>\r\n \t<li>Type lines too wide (can\u2019t read!), set paragraph width to be 70 characters or less and center on the page.<\/li>\r\n<\/ol>\r\n[caption id=\"attachment_268\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign.png\"><img style=\"border: 1px solid gray\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-1024x739.png\" alt=\"\" class=\"wp-image-268 size-large\" width=\"1024\" height=\"739\" \/><\/a> Redesigned page: &lt;h1&gt; tag with Zapfino font; text 16pt Georgia with 1.5em line height, paragraph width 768px and centered on page; image width 512px and float left and with 12px right margin and 6px bottom margin to separate it from text.[\/caption]","rendered":"<p>This tutorial is about designing your web site, including planning for the user experience, laying out the pages, designing for different devices with responsive design, doing a design critique, and implementing analytics.<\/p>\n<h1>The 4 \u201cWs\u201d of Web Design<\/h1>\n<p>A work-in-progress, someone with a sense of humor determined that there are four \u201cWs\u201d of web design, a reference to \u201cwww\u201d or \u201cW3\u201d:<\/p>\n<ul>\n<li>Width\u2014Design for width, let scrolling handle the height.<\/li>\n<li>Who\u2014We do not know who will visit our site, but we want everyone to feel welcome and be able to use it, even with any sensory challenges they may face.<\/li>\n<li>What\u2014We don&#8217;t know what equipment and software our users have, such as the computer platform or device, monitor or screen, operating system, browser, browser window size, color settings, and installed fonts. However we try to design for the common scenarios, such as large-screen monitors and cell phones, and give the fonts to users whenever possible.<\/li>\n<li>Where\u2014We don&#8217;t know where our audience comes from, but we would like to keep them on our site as much as possible.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<table style=\"width: 100%;margin: 0px auto\">\n<tbody>\n<tr style=\"background: whitesmoke\">\n<th colspan=\"3\">Four \u201cWs\u201d of Web Design<\/th>\n<\/tr>\n<tr>\n<th style=\"width: 10%;\">\u201cW\u201d<\/th>\n<th style=\"width: 50%;\">Description<\/th>\n<th style=\"width: 40%;\">Example(s)<\/th>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><strong>Width<\/strong><\/td>\n<td>Design for width, let scrolling handle the height<\/td>\n<td>\n<ul style=\"font-size: 12pt\">\n<li>Define page width in px, %, or vw (viewport widths)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Who<\/strong><\/td>\n<td>We do not know who will visit our site, but we want everyone to feel welcome and be able to use it, even with any sensory challenges they may face.<\/td>\n<td>\n<ul style=\"font-size: 12pt\">\n<li>Design for accessibility<\/li>\n<li>Provide user feedback, e.g., color links differently when mouse is over them and\/or when clicked.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><strong>What<\/strong><\/td>\n<td>We don&#8217;t know what equipment and software our users have, such as the computer platform or device, monitor or screen, operating system, browser, or browser window size. However we try to design for the common scenarios, such as large-screen monitors and cell phones.<\/td>\n<td>\n<ul style=\"font-size: 12pt\">\n<li>@media device queries to set styles for specific resolutions<\/li>\n<li>Inclusion of multiple fonts in styles<\/li>\n<li>Quality checks on different browsers and platforms<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Where<\/strong><\/td>\n<td>We don&#8217;t know where our audience comes from, but we would like to keep them on our site as much as possible.<\/td>\n<td>\n<ul style=\"font-size: 12pt\">\n<li>Google Analytics<\/li>\n<li>Use of new tab for links (target=&#8221;_blank&#8221;)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1>User Experience Design (UXD) and \u201cDesignAgility\u201d<\/h1>\n<p>Steve Jobs of Apple Computer once said something like, &#8220;We must always think about the customers first and develop technology to meet their needs; we cannot start by inventing cool tech and then look for a way to sell it.&#8221;<\/p>\n<p>Likewise, when designing web pages, designers have to think about the purpose of the site, the audience, and the readers\u2019 experience as they use it \u2014 a process commonly called \u201cuser experience design\u201d (UXD). \u201cDesignAgility,\u201d a systematic approach to UXD for media, was created by Okke Schl\u00fcter from HdM-Stuttgart and Stefanie Quade (reference: Quade, Stefanie, and Okke Schl\u00fcter, <em>DesignAgility\u2014Toolbox Media Prototyping<\/em>. Amazon Kindle Direct Publishing, 2019). DesignAgility combines \u201cdesign thinking\u201d with \u201cagile manufacturing.\u201d<\/p>\n<p>The first step in DesignAgility, \u201cDiscovery,\u201d is to think of a challenge or problem that people want to solve. For a web site, this could include questions like: What is the site\u2019s purpose\u2014to inform, persuade, entertain, or receive a product or service? What is the dominant media\u2014text, photos, videos, animation? Who will the audience be, and what are their interests and possible sensory challenges they may face in reading and\/or listening to the site?<\/p>\n<p>The second step, \u201cInterpretation,\u201d means to develop an understanding of how people will meet their challenge by using your site. A valuable step in understanding users is to define several \u201cpersonas,\u201d who form a representative sampling of presumed users of the site, and their characteristics.<\/p>\n<p>The third step, \u201cIdeation,\u201d means thinking of solutions to the design challenge. The personas\u2019 perception and use of a site can be expressed in \u201cuser stories.\u201d<\/p>\n<p>Some additional DesignAgility steps are described in the table below.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"border-collapse: collapse;margin: 0px auto;width: 1002px;height: 210px\">\n<tbody>\n<tr style=\"background: whitesmoke\">\n<th>DesignAgility Step<\/th>\n<th>What to Do<\/th>\n<\/tr>\n<tr>\n<td><em>Discovery<\/em><\/td>\n<td>Define the purpose of your web site:<br \/>\n\u2022 inform, persuade, entertain, receive product or service?<br \/>\n\u2022 dominant media\u2014text, photos, videos, animations?<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><em>Interpretation<\/em><\/td>\n<td>Define several \u201cpersonas,\u201d or presumed users, their ages, occupations, interests, any sensory challenges they face.<\/td>\n<\/tr>\n<tr>\n<td><em>Ideation<\/em><\/td>\n<td>Write \u201cuser stories\u201d about why each persona will be interested in the site and how they will interact with it.<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><em>Specification<\/em><\/td>\n<td>Sketch out a sample page layout for your site:<br \/>\n\u2022 fixed-width page for text-heavy documents<br \/>\n\u2022 variable-width page where photos are the most important elements<\/td>\n<\/tr>\n<tr>\n<td><em>Implementation<\/em><\/td>\n<td>Design the site in HTML &amp; CSS.<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td><em>Evaluation<\/em><\/td>\n<td>Design Critique<br \/>\n\u2022 show your design to another class member and ask for their feedback.<\/td>\n<\/tr>\n<tr>\n<td><em>Deployment<\/em><\/td>\n<td>Make the site public and assess impact<br \/>\n\u2022 Google Analytics\u2014Enables tracking of users to your site<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>DesignAgility Example<\/h3>\n<p><strong>Discovery and Challenge Identification.<\/strong>\u00a0Define a challenge or problem that people want to solve.\u00a0<span style=\"text-align: initial;font-size: 1em\">For this example I plan to make a site about Russian fairytale boxes. These are small, hand-painted boxes with illustrations of little-known fairytale characters like \u201cThe Grey Wolf\u201d and \u201cThe Firebird\u201d that date back to the time of the Russian Czars. On a trip to Ukraine I bought several of the boxes and plan to photograph them so I will own the rights to the photos.\u00a0<\/span> The photos and text are equally important. The site should to appeal to readers \u201cfrom 6 to 106.\u201d<\/p>\n<p><strong>Interpretation and Personas.<\/strong>\u00a0In planning the site I developed 2 \u201cpersonas\u201d of presumed users:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li><span>Sergei Soldier is a 65-year-old grandfather who emigrated from Russia to Canada to be with his children. His interests include reading, home remodeling, and arts and crafts. Ever active, he works as a security officer at the art museum in his city. His grandchildren bought him an Android tablet so he could read eBooks and browse the web.<\/span><\/li>\n<li><span style=\"text-align: initial;font-size: 1em\">Sweetie Smith is a precocious 6-year-old girl who is an avid reader and is interested in all kinds of arts and crafts. At home she has an iMac and when traveling she takes an iPad.<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>Ideation and User Stories.<\/strong>\u00a0On this site the pictures and text are equally important. The photos should look good in color and when rendered in black-and-white. The text should be high-contrast and enlargeable and be readable with a screen reader or included audio. The pages should be designed responsively so they look good on both desktop computers and tablets and cell phones.<\/p>\n<div class=\"page\" title=\"Page 2\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li><span>Sergei may be interested in this eBook because of his Russian heritage and interest in arts &amp; crafts. At his age of 65, it will be important that the site be easy to read for someone who uses reading glasses. The type should have good contrast and exhibit responsive design so it looks good and remains legible on computers and tablets. The linked quarter-page pictures that expand to full-size upon click or touch will make it easier for Sergei to examine the photos in great detail.<\/span><\/li>\n<li><span>Sweetie may also be interested in this site because of her interest in arts &amp; crafts. Since she is just learning to read, it would be appealing for her if at least parts of the book included audio channels that would read portions aloud to her.<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"width: 80%;margin: 24px auto 0 auto;padding: 24px;background: azure;border: 1px solid lightblue\">\n<h3 style=\"margin-top: 12px;padding-top: 0\">Writing Your Web Site Proposal<\/h3>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Think about a challenge that you could address with a web site. What will be more important\u2014text or photos? Describe how you will build the site.<\/li>\n<li>Define some personas of prospective site users and their characteristics.<\/li>\n<li>Write a user story for each persona, describing what will bring them to your site and how they will use it.<\/li>\n<li>Draw a basic layout of one of your content pages, including (if present) banner, menu, photos, text, and other information. Will the site use a fixed or variable layout?<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n<h1>Page Layout<\/h1>\n<p>A web site\u2019s purpose and audience are important to know before designing pages. As discussed in Tutorial 1, page layout for the web is different than it is for print because the designer never knows what type of computer, device, operating system, monitor, screen, browser, or window size the readers will use. Regardless, we want everyone to feel included and be able to use the site.<\/p>\n<p>Web pages can be designed with fixed or variable sizes. Fixed size is easiest for text-heavy pages, such as news stories, while variable sizes are good when photos are the dominant media.<\/p>\n<p>Below are examples of fixed-width and variable-width pages.<\/p>\n<table style=\"border-collapse: collapse;width: 100%\">\n<tbody>\n<tr style=\"height: 457px\">\n<td style=\"width: 50%;vertical-align: top\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_FixedWidthPage.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_FixedWidthPage-1011x1024.png\" alt=\"\" class=\"aligncenter wp-image-44\" width=\"512\" height=\"519\" \/><\/a><\/td>\n<td style=\"width: 50%;vertical-align: top\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-1024x743.png\" alt=\"\" class=\"aligncenter wp-image-45\" width=\"512\" height=\"372\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-1024x743.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-300x218.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-768x557.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-1536x1115.png 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-2048x1486.png 2048w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-65x47.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-225x163.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_VariableWidthPage-350x254.png 350w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%;vertical-align: top\"><em>Example of a fixed-width page for a text-heavy document, designed to look like a U.S. Letter or A4 page. The \u201cpage\u201d centers itself in the browser window and remains the same size. Sizes were defined in px (pixels).<\/em><\/td>\n<td style=\"width: 50%;vertical-align: top\"><em>Example of a variable-width page used because the photo is the dominant medium. The photo and text expand as the browser window is enlarged. Sizes were defined in \u201cvw\u201d (viewport width) and \u201cvh\u201d (viewport height).<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Responsive Design<\/h2>\n<p>Does your web page need to be readable and look good on a large-screen monitor, cell phone, and iPad or tablet? If so then it should be designed to be \u201cresponsive,\u201d or adaptable to different screen sizes.<\/p>\n<p>Styles for responsive design include \u201cwidth\u201d set in percent instead of pixels, and limiting the width to that of the browser window by using the \u201cmax-width\u201d style in percent.<\/p>\n<p>In the two examples below, the widths of the page elements in the responsive page are set as 100%, 20%, and 80%, respectively; while in the fixed-width page they are set in pixels (px).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_47\" aria-describedby=\"caption-attachment-47\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page.jpg\" alt=\"\" class=\"wp-image-47 size-full\" width=\"1024\" height=\"768\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-300x225.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-768x576.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-65x49.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-225x169.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/responsive-page-350x263.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-47\" class=\"wp-caption-text\">Examples of responsive and non-responsive pages. The responsive page expands and contracts to fit the browser window, while the non-responsive page remains the same size regardless of the browser window size.<\/figcaption><\/figure>\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=\"\" class=\"size-large wp-image-189\" width=\"1024\" height=\"816\" 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 brief video shows responsive design in action. (Click to play.)<\/figcaption><\/figure>\n<p>Further refinements to responsive design can be made using the media query rule (@media), in which the resolution of the applicable styles is defined. Example: @media only screen and (max-width: 750px) {}. Inside the braces would go the styles applicable to screen resolutions of 750px or less. Details in Tutorial 4.<\/p>\n<h2>Design Critique<\/h2>\n<p>This section is based on a design critique contributed to class by Prof. Bettina Tabel, HdM-Stuttgart. When designing a web page, it can be useful to get a design critique from an objective third party.\u00a0 Following is a list of questions to consider:<\/p>\n<h3>Home Page<\/h3>\n<ol>\n<li>What is the purpose of the site? Audience? Is this clear from the title and design?<\/li>\n<li>From the title and main photo (if any), are the subject and theme of the site clear?<\/li>\n<li>Does the site&#8217;s color scheme fit the target group and the subject? Should the color scheme be neutral, pastel, bright, complementary, analogous, or other theme?<\/li>\n<li>Is the font selection appropriate to the site&#8217;s subject and audience?<\/li>\n<li>Are the fonts legible (size, contrast)? Could they benefit from a drop shadow, complimentary-colored or lighter or darker background?<\/li>\n<li>If the site has one or more photos, have the image rights been clarified?<\/li>\n<li>Are photos sized appropriately to the pages and for viewing on different devices?<\/li>\n<\/ol>\n<h3>Other Pages<\/h3>\n<ol>\n<li>Do special effects (drop caps, callouts, sidebars) contribute to the theme of the site without being distracting?<\/li>\n<li>Are photos large enough for readers to see detail? If the reader clicks on or touches a photo, does it link to a larger version that can be viewed in more detail?<\/li>\n<li>Are sections (if present) separated clearly?<\/li>\n<\/ol>\n<table style=\"border-collapse: collapse;width: 100%\">\n<tbody>\n<tr>\n<td style=\"vertical-align: top;width: 99.95187680461983%\" colspan=\"2\">\n<h4 style=\"text-align: center;margin: 0;padding: 0\">Sample Design Critique<strong>\u00a0<\/strong><\/h4>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;width: 49.95187680461983%\">\n<p style=\"text-align: center\"><strong>Original Site<\/strong><\/p>\n<p><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-1024x781.jpg\" alt=\"\" class=\"size-large wp-image-210\" width=\"1024\" height=\"781\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-1024x781.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-300x229.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-768x586.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-1536x1171.jpg 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-2048x1561.jpg 2048w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-65x50.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-225x172.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_OriginalSite-350x267.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/td>\n<td style=\"width: 50%;vertical-align: top\">\n<p style=\"text-align: center\"><strong>Redesigned Site<\/strong><\/p>\n<p><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-1024x896.jpg\" alt=\"\" class=\"aligncenter size-large wp-image-211\" width=\"1024\" height=\"896\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-1024x896.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-300x263.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-768x672.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-1536x1344.jpg 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-2048x1792.jpg 2048w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-65x57.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-225x197.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/SF-W_RedesignedSite-350x306.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Sample Critique \u2022 Questions<\/h3>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Why are the top and bottom borders not the same height?<\/li>\n<li>Why are the links not vertically aligned in the menu bar<\/li>\n<li>Why are the links set in all caps?<\/li>\n<li>Why is a serif font used for the links?<\/li>\n<li>Why are the line lengths so long?<\/li>\n<li>Why was a script cap initial used when it&#8217;s difficult to read?<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Common Design Flaws\u2014Don\u2019t Do It!<\/h3>\n<p>The graphic below shows several examples of common web design flaws, which are listed below and corrected in the second graphic.<\/p>\n<figure id=\"attachment_261\" aria-describedby=\"caption-attachment-261\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws.jpg\" alt=\"\" class=\"size-full wp-image-261\" width=\"1024\" height=\"406\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-300x119.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-768x305.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-65x26.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-225x89.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-350x139.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-261\" class=\"wp-caption-text\">Poorly designed page showing common design flaws.<\/figcaption><\/figure>\n<ol>\n<li>Itty-bitty images\u2014can&#8217;t see! Make \u2019em bigger because people want to see!<\/li>\n<li>Excessively large image files (&gt;1 MB) reduced in width in CSS. They take too long to download. Size appropriately in Photoshop or Preview.<\/li>\n<li>Use of bold paragraph &lt;p&gt; for headings. Instead use heading tags &lt;h1&gt;, &lt;h2&gt;, \u2026, &lt;h6&gt;.<\/li>\n<li>Use of underline for headings, reminiscent of typewriter days. Use a heading tag and a complimentary font.<\/li>\n<li>Use of default Times Roman font (boring!).<\/li>\n<li>Itty-bitty font size (can\u2019t read!). Make it 14pt or bigger and 1.4em line leading (line-height).<\/li>\n<li>Insufficient vertical space between elements. Use padding and\/or margin to adjust vertical height, not carriage returns &lt;br\/&gt;.<\/li>\n<li>Type lines too wide (can\u2019t read!), set paragraph width to be 70 characters or less and center on the page.<\/li>\n<\/ol>\n<figure id=\"attachment_268\" aria-describedby=\"caption-attachment-268\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid gray\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-1024x739.png\" alt=\"\" class=\"wp-image-268 size-large\" width=\"1024\" height=\"739\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-1024x739.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-300x216.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-768x554.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-1536x1108.png 1536w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-2048x1477.png 2048w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-65x47.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-225x162.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_design-flaws-redesign-350x252.png 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-268\" class=\"wp-caption-text\">Redesigned page: &lt;h1&gt; tag with Zapfino font; text 16pt Georgia with 1.5em line height, paragraph width 768px and centered on page; image width 512px and float left and with 12px right margin and 6px bottom margin to separate it from text.<\/figcaption><\/figure>\n","protected":false},"author":6,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-41","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/41","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":60,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions\/394"}],"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\/41\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapter-type?post=41"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/contributor?post=41"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/license?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}