{"id":100,"date":"2020-07-23T16:40:14","date_gmt":"2020-07-23T16:40:14","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/?post_type=chapter&#038;p=100"},"modified":"2020-11-13T13:59:04","modified_gmt":"2020-11-13T13:59:04","slug":"websites-web-pages","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/chapter\/websites-web-pages\/","title":{"raw":"Web Pages: Content &amp; Design","rendered":"Web Pages: Content &amp; Design"},"content":{"raw":"<div>\r\n<div>\r\n<div id=\"block-system-main\" class=\"block block-system\">\r\n<div class=\"content\"><article>\r\n<div>\r\n<div class=\"field field-name-body field-type-text-with-summary field-label-hidden\">\r\n<div class=\"field-items\">\r\n<div class=\"field-item even\">\r\n\r\nAs a technical writer, your duties may range from writing copy to be posted online to actually designing a web page or website. No matter what the scope of the technical writing project is, you need to create user-friendly content and user-friendly design.\r\n<h2>Initial Usability Testing<\/h2>\r\nUsability testing always occurs at the end of web page development. However, starting to test a site before it is built will help avoid some problems before you put a lot of effort into the site. You may want to use focus groups for initial usability testing or, if you do not have access to a focus group, share your ideas with people who might be potential users and ask for their insight. Find out what people expect from your site. Users may need something different than what you were preparing to create. Potential users can give you additional ideas; for example, you can find out what words best resonate with your audience. Testing is key to building a web page. If you can, get input from potential users so you\u2019ll have a better site from the start.\r\n<h2>User-Friendly Content<\/h2>\r\n<img class=\"size-medium wp-image-1293 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04164057\/114-300x239.jpg\" alt=\"\" width=\"300\" height=\"239\" \/>People read differently online than they do when they read print materials\u2014web users\u00a0typically scan for\u00a0 information. In a\u00a0study of online reading behavior, \"<a href=\"https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/\" target=\"_blank\" rel=\"noopener\">How Little Do Users Read?<\/a>,\" Jakob Nielsen found that \u201con the average webpage, users have time to read at most 28% of the words during an average visit; 20% is more likely.\u201d<sup>[1]<\/sup> So it's your job to create content that readers can find quickly and understand easily. There are two aspects to user-friendly content: 1) the content itself, and 2) the language used to present that content.\r\n<h3>Content<\/h3>\r\nDeveloping usable online content requires a strategic approach. Content not only includes the words on the page but also the images and multimedia that are used. It\u2019s important to understand how what you are creating fits into the overall\u00a0content strategy of the web page or web site, what the content life cycle entails, and who is involved in the process.\r\n\r\nYour first step in developing information is always research. You need to consult to determine the content strategy for the web page. Who is the intended audience? What's the intended purpose of the web page? To inform? To persuade? To sell? What particular concept should be emphasized, the one idea that the organization wants all users who visit the web page to understand? Consulting about key words that users might use as search terms is one way of identifying important concepts. Determine the stakeholders involved with the web page. You may need to consult with various departments in the organization in order to get a sense of the information that's needed to meet the page's purpose.\r\n\r\n<img class=\"size-medium wp-image-1295 alignleft\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04170326\/115-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>\r\n\r\nYou also need to ask about the web page's upkeep. Who will maintain the content after you create it\u2014you or others? How often will the content be reviewed and updated? Maintenance, review, and updating are important aspects that let you know whether you should put time-sensitive information on the page.\r\n\r\nAnd, you need to consult about the page's style. Should you rely more heavily or more equally on images or language in order to present content that addresses the web page's purpose and audience? For example, The Sierra Club's main page relies on photographs and headings that offer main concepts, while the U.S. Environmental Protection Agency places more language and links on its main page. Each approach is consistent with its organization's purpose and content strategy.\r\n\r\nPeople come to your website with a specific task in mind. When developing your site\u2019s content, keep your users\u2019 tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn\u2019t help them complete that task, they\u2019ll leave. Conduct market research, perform a task analysis\u00a0and analyze metrics\u00a0to better understand what users are looking to accomplish. Knowing your users\u2019 top tasks can help you identify:\r\n<ul>\r\n \t<li>Content to feature on your homepage or landing pages<\/li>\r\n \t<li>Page headers and sub headers<\/li>\r\n \t<li>A logical structure to each page\u2019s content<\/li>\r\n<\/ul>\r\nMake sure to read usability.gov's pages on\u00a0<a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/task-analysis.html\" target=\"_blank\" rel=\"noopener\">Task Analysis<\/a>\u00a0and <a href=\"https:\/\/www.usability.gov\/what-and-why\/web-analytics.html\" target=\"_blank\" rel=\"noopener\">Web Analytics Basics<\/a> for fuller information on the important process of task analysis.\r\n\r\nOverall, each piece of content should:\r\n<ul>\r\n \t<li><strong>Reflect the organization\u2019s goals and user\u2019s needs<\/strong>. You can discover your user\u2019s needs through conducting market research,\u00a0user research, and\u00a0analyzing web metrics.<\/li>\r\n \t<li><strong>Understand how users think and speak about a subject.\u00a0<\/strong>Content should ideally be created and structured based on user testing. Doing this will also help you with search engine optimization (SEO).<\/li>\r\n \t<li><strong>Be useful<\/strong>. Each piece of content should have a purpose; omit needless content.<\/li>\r\n \t<li><strong>Be factual and ethical.<\/strong> Information should be valid and should not intentionally mislead or in any way skew the facts being presented.<\/li>\r\n \t<li><strong>Be up to date.<\/strong>\u00a0When new information becomes available, update your content or archive it.<\/li>\r\n<\/ul>\r\n<h3>Language<\/h3>\r\nUser-friendly content also depends on the language in which that content is presented. When writing for the web, use plain language to allows users to find what they need, understand what they have found, and then use it to meet their needs. Language should also be actionable, findable, and shareable.\r\n\r\n<img class=\"size-medium wp-image-1296 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04171405\/116-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>\r\n<ul>\r\n \t<li style=\"text-align: left\"><strong>Use the words your users use.\u00a0<\/strong>By using keywords that your users use, you will help them understand the copy and will help optimize your page for search engines.<\/li>\r\n \t<li style=\"text-align: left\"><strong>Use pronouns<\/strong>. The user is \u201cyou.\u201d The organization or government agency is \u201cwe.\u201d This creates cleaner sentence structure and more approachable content.<\/li>\r\n \t<li style=\"text-align: left\"><strong>Use active voice<\/strong>. Present the \"actor\" performing the action, e.g., \u201cThe board proposed the regulation,\u201d not \u201cThe regulation was proposed by the board.\u201d<\/li>\r\n \t<li style=\"text-align: left\"><strong>Use short sentences and paragraphs<\/strong>. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It's OK to start a sentence with \u201cand,\u201d \u201cbut,\u201d or \u201cor\u201d if it makes things clear and brief.<\/li>\r\n \t<li><strong>Use bullets and numbered lists<\/strong>. Don\u2019t limit using a list to just long lists. One sentence with two bullets is easier to read than three sentences.<\/li>\r\n \t<li><strong>Use clear headlines and subheads<\/strong>. Questions, especially those with pronouns, are particularly effective.<\/li>\r\n<\/ul>\r\nRemember that developing web copy in plain language in the federal government is the law. There's a <a href=\"https:\/\/plainlanguage.gov\/resources\/checklists\/web-checklist\/\" target=\"_blank\" rel=\"noopener\">Checklist for Plain Language on the Web<\/a> along with some federal department style guides offer information about the government\u2019s plain language standard.\r\n<h2>User-Friendly Design<\/h2>\r\nDesign deals with the layout and placement of information on the page. Good design is crucial to creating an effective web page, since you need to anticipate and guide how users will read.\u00a0 Users generally scan and navigate a web page in all different directions, not necessarily left to right or top to bottom. There are a few design basics to keep in mind as you're developing content, basics that will help you when you consider your content's placement on the page:\r\n<div class=\"field-item even\">\r\n<ul>\r\n \t<li><strong>Chunk your content.<\/strong>\u00a0Chunking makes your content more scannable by breaking it into manageable sections.<\/li>\r\n \t<li><strong>Front-load the important information<\/strong>. Use the journalism model of the \u201cinverted pyramid.\u201d Start with the content that is most important to your audience, and then provide additional details.<\/li>\r\n \t<li><strong>Use images, diagrams, or multimedia<\/strong>\u00a0to visually represent ideas in the content and to direct users' eyes to important information.<\/li>\r\n<\/ul>\r\n<\/div>\r\nOnce you have content, consider how to place it on the page. Wireframing, creating a mock-up, and testing your page on different devices will help you create user-friendly design.\r\n<h3>Wireframing<\/h3>\r\nFiguring out the page design is called \"wireframing.\" The following video explains one person's process of wireframing\u2014in this case, seeing the process illustrates the process more than about it (and that's the kind of decision you need to make about web page content and how it's presented).\r\n\r\nNote that while a lot of specialized software exists, you can create a wireframe in Word or simply by drawing. The important thing is to optimize the placement of content on the page to address both your purpose and your users' needs.\r\n\r\nAs you start considering how to place your content, keep in mind that tasks (what the user has come to the page looking for) that are most important and\/or most commonly sought should be the main focal points of the page. The least important information, usually consisting of contacts, site map, terms of use, etc., usually goes at the bottom, because if some users need that information, they'll specifically search for it.\r\n\r\n<img class=\"size-medium wp-image-1426 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/20192943\/131-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>\r\n\r\nConsider as well whether you want columns in which to place content, or text across the page. Many web pages use columns of some sort based on readability studies such as <a href=\"https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability\" target=\"_blank\" rel=\"noopener\">Design Guidelines for Web Readability<\/a> that say to \"avoid horizontal scrolling.\"<sup>[2]<\/sup>\u00a0Whether or not you use columns, don't create content that consists of large blocks of text extending the width of the screen. Offer succinct content in small units.\r\n\r\n<\/div>\r\nAlso remember that you'll need to create spaces in your wireframe for headings, navigation, images, and media as well as text. Wireframing is useful because the basic layout helps you see white space as well as content placement; you can determine if you have enough white space to emphasize and separate information. An overriding concept is to keep the design as clean, simple, and easy to use as possible.\r\n<div class=\"field-item even\">\r\n<h3>Mock-up<\/h3>\r\nOnce you have your basic design, you can do a mock-up of the page, which includes the actual content, colors, and type fonts, to see if they present the information to effectively address your purpose and your audience's needs. At the mock-up stage, consider the design message or brand, the image the organization wants to portray to the reader. When creating the look of the web page you must use logos, colors, fonts, and images that support the personality of the organization. After you complete your mock-up, move to the actual web page creation.\r\n<h3>Web Page Test<\/h3>\r\n<img class=\"size-medium wp-image-1302 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04181507\/120-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>Once you've created your page, test the design on many different browsers and devices to deal with any design issues. Professional web design firms run their sites through an intense quality assurance phase. If this is not a feasible task, you can make your site available on private test sites. Web pages will appear different depending on the environment in which they are viewed. The overall idea of this final phase of user-friendly design is to make sure that the information is being presented clearly and there are not any overt problems.\r\n<h2>Final Usability Testing<\/h2>\r\nOnce you think you have user-friendly content and design, move into usability testing with as many potential users as you have available.\u00a0 Again, you may want to use focus groups or observation strategies. Refer to the page on <a href=\"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/chapter\/usability-2\/\" target=\"_blank\" rel=\"noopener\">Usability<\/a> for fuller information.\r\n<div class=\"textbox\">Colorado State University's WAC Clearinghouse has a page on <a href=\"https:\/\/wac.colostate.edu\/resources\/writing\/guides\/webdev\/\" target=\"_blank\" rel=\"noopener\">Writing for the Web<\/a> which contains a discussion, illustrations, and links relating to web page content and design.<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div><sup>[1]<\/sup> Nielsen, Jakob. \"How Little Do Users Read?\" Nn\/g Nielsen Norman Group Website, May 5, 2008. <a href=\"https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/<\/a><\/div>\r\n<div><sup>\r\n[2]<\/sup> Miniukovich, Aliaksei., De Angeli, A., Sulpizio, S., and Venuti,P. \"Design Guides for Web Readability.\" Proceedings of the Designing Interactive Systems (DIS) Conference, June 10-14, 2014. <a href=\"https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability\" target=\"_blank\" rel=\"noopener\">https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability<\/a><\/div>\r\n<\/article><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>","rendered":"<div>\n<div>\n<div id=\"block-system-main\" class=\"block block-system\">\n<div class=\"content\">\n<article>\n<div>\n<div class=\"field field-name-body field-type-text-with-summary field-label-hidden\">\n<div class=\"field-items\">\n<div class=\"field-item even\">\n<p>As a technical writer, your duties may range from writing copy to be posted online to actually designing a web page or website. No matter what the scope of the technical writing project is, you need to create user-friendly content and user-friendly design.<\/p>\n<h2>Initial Usability Testing<\/h2>\n<p>Usability testing always occurs at the end of web page development. However, starting to test a site before it is built will help avoid some problems before you put a lot of effort into the site. You may want to use focus groups for initial usability testing or, if you do not have access to a focus group, share your ideas with people who might be potential users and ask for their insight. Find out what people expect from your site. Users may need something different than what you were preparing to create. Potential users can give you additional ideas; for example, you can find out what words best resonate with your audience. Testing is key to building a web page. If you can, get input from potential users so you\u2019ll have a better site from the start.<\/p>\n<h2>User-Friendly Content<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1293 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04164057\/114-300x239.jpg\" alt=\"\" width=\"300\" height=\"239\" \/>People read differently online than they do when they read print materials\u2014web users\u00a0typically scan for\u00a0 information. In a\u00a0study of online reading behavior, &#8220;<a href=\"https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/\" target=\"_blank\" rel=\"noopener\">How Little Do Users Read?<\/a>,&#8221; Jakob Nielsen found that \u201con the average webpage, users have time to read at most 28% of the words during an average visit; 20% is more likely.\u201d<sup>[1]<\/sup> So it&#8217;s your job to create content that readers can find quickly and understand easily. There are two aspects to user-friendly content: 1) the content itself, and 2) the language used to present that content.<\/p>\n<h3>Content<\/h3>\n<p>Developing usable online content requires a strategic approach. Content not only includes the words on the page but also the images and multimedia that are used. It\u2019s important to understand how what you are creating fits into the overall\u00a0content strategy of the web page or web site, what the content life cycle entails, and who is involved in the process.<\/p>\n<p>Your first step in developing information is always research. You need to consult to determine the content strategy for the web page. Who is the intended audience? What&#8217;s the intended purpose of the web page? To inform? To persuade? To sell? What particular concept should be emphasized, the one idea that the organization wants all users who visit the web page to understand? Consulting about key words that users might use as search terms is one way of identifying important concepts. Determine the stakeholders involved with the web page. You may need to consult with various departments in the organization in order to get a sense of the information that&#8217;s needed to meet the page&#8217;s purpose.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1295 alignleft\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04170326\/115-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/><\/p>\n<p>You also need to ask about the web page&#8217;s upkeep. Who will maintain the content after you create it\u2014you or others? How often will the content be reviewed and updated? Maintenance, review, and updating are important aspects that let you know whether you should put time-sensitive information on the page.<\/p>\n<p>And, you need to consult about the page&#8217;s style. Should you rely more heavily or more equally on images or language in order to present content that addresses the web page&#8217;s purpose and audience? For example, The Sierra Club&#8217;s main page relies on photographs and headings that offer main concepts, while the U.S. Environmental Protection Agency places more language and links on its main page. Each approach is consistent with its organization&#8217;s purpose and content strategy.<\/p>\n<p>People come to your website with a specific task in mind. When developing your site\u2019s content, keep your users\u2019 tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn\u2019t help them complete that task, they\u2019ll leave. Conduct market research, perform a task analysis\u00a0and analyze metrics\u00a0to better understand what users are looking to accomplish. Knowing your users\u2019 top tasks can help you identify:<\/p>\n<ul>\n<li>Content to feature on your homepage or landing pages<\/li>\n<li>Page headers and sub headers<\/li>\n<li>A logical structure to each page\u2019s content<\/li>\n<\/ul>\n<p>Make sure to read usability.gov&#8217;s pages on\u00a0<a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/task-analysis.html\" target=\"_blank\" rel=\"noopener\">Task Analysis<\/a>\u00a0and <a href=\"https:\/\/www.usability.gov\/what-and-why\/web-analytics.html\" target=\"_blank\" rel=\"noopener\">Web Analytics Basics<\/a> for fuller information on the important process of task analysis.<\/p>\n<p>Overall, each piece of content should:<\/p>\n<ul>\n<li><strong>Reflect the organization\u2019s goals and user\u2019s needs<\/strong>. You can discover your user\u2019s needs through conducting market research,\u00a0user research, and\u00a0analyzing web metrics.<\/li>\n<li><strong>Understand how users think and speak about a subject.\u00a0<\/strong>Content should ideally be created and structured based on user testing. Doing this will also help you with search engine optimization (SEO).<\/li>\n<li><strong>Be useful<\/strong>. Each piece of content should have a purpose; omit needless content.<\/li>\n<li><strong>Be factual and ethical.<\/strong> Information should be valid and should not intentionally mislead or in any way skew the facts being presented.<\/li>\n<li><strong>Be up to date.<\/strong>\u00a0When new information becomes available, update your content or archive it.<\/li>\n<\/ul>\n<h3>Language<\/h3>\n<p>User-friendly content also depends on the language in which that content is presented. When writing for the web, use plain language to allows users to find what they need, understand what they have found, and then use it to meet their needs. Language should also be actionable, findable, and shareable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1296 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04171405\/116-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/><\/p>\n<ul>\n<li style=\"text-align: left\"><strong>Use the words your users use.\u00a0<\/strong>By using keywords that your users use, you will help them understand the copy and will help optimize your page for search engines.<\/li>\n<li style=\"text-align: left\"><strong>Use pronouns<\/strong>. The user is \u201cyou.\u201d The organization or government agency is \u201cwe.\u201d This creates cleaner sentence structure and more approachable content.<\/li>\n<li style=\"text-align: left\"><strong>Use active voice<\/strong>. Present the &#8220;actor&#8221; performing the action, e.g., \u201cThe board proposed the regulation,\u201d not \u201cThe regulation was proposed by the board.\u201d<\/li>\n<li style=\"text-align: left\"><strong>Use short sentences and paragraphs<\/strong>. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It&#8217;s OK to start a sentence with \u201cand,\u201d \u201cbut,\u201d or \u201cor\u201d if it makes things clear and brief.<\/li>\n<li><strong>Use bullets and numbered lists<\/strong>. Don\u2019t limit using a list to just long lists. One sentence with two bullets is easier to read than three sentences.<\/li>\n<li><strong>Use clear headlines and subheads<\/strong>. Questions, especially those with pronouns, are particularly effective.<\/li>\n<\/ul>\n<p>Remember that developing web copy in plain language in the federal government is the law. There&#8217;s a <a href=\"https:\/\/plainlanguage.gov\/resources\/checklists\/web-checklist\/\" target=\"_blank\" rel=\"noopener\">Checklist for Plain Language on the Web<\/a> along with some federal department style guides offer information about the government\u2019s plain language standard.<\/p>\n<h2>User-Friendly Design<\/h2>\n<p>Design deals with the layout and placement of information on the page. Good design is crucial to creating an effective web page, since you need to anticipate and guide how users will read.\u00a0 Users generally scan and navigate a web page in all different directions, not necessarily left to right or top to bottom. There are a few design basics to keep in mind as you&#8217;re developing content, basics that will help you when you consider your content&#8217;s placement on the page:<\/p>\n<div class=\"field-item even\">\n<ul>\n<li><strong>Chunk your content.<\/strong>\u00a0Chunking makes your content more scannable by breaking it into manageable sections.<\/li>\n<li><strong>Front-load the important information<\/strong>. Use the journalism model of the \u201cinverted pyramid.\u201d Start with the content that is most important to your audience, and then provide additional details.<\/li>\n<li><strong>Use images, diagrams, or multimedia<\/strong>\u00a0to visually represent ideas in the content and to direct users&#8217; eyes to important information.<\/li>\n<\/ul>\n<\/div>\n<p>Once you have content, consider how to place it on the page. Wireframing, creating a mock-up, and testing your page on different devices will help you create user-friendly design.<\/p>\n<h3>Wireframing<\/h3>\n<p>Figuring out the page design is called &#8220;wireframing.&#8221; The following video explains one person&#8217;s process of wireframing\u2014in this case, seeing the process illustrates the process more than about it (and that&#8217;s the kind of decision you need to make about web page content and how it&#8217;s presented).<\/p>\n<p>Note that while a lot of specialized software exists, you can create a wireframe in Word or simply by drawing. The important thing is to optimize the placement of content on the page to address both your purpose and your users&#8217; needs.<\/p>\n<p>As you start considering how to place your content, keep in mind that tasks (what the user has come to the page looking for) that are most important and\/or most commonly sought should be the main focal points of the page. The least important information, usually consisting of contacts, site map, terms of use, etc., usually goes at the bottom, because if some users need that information, they&#8217;ll specifically search for it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1426 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/20192943\/131-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/><\/p>\n<p>Consider as well whether you want columns in which to place content, or text across the page. Many web pages use columns of some sort based on readability studies such as <a href=\"https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability\" target=\"_blank\" rel=\"noopener\">Design Guidelines for Web Readability<\/a> that say to &#8220;avoid horizontal scrolling.&#8221;<sup>[2]<\/sup>\u00a0Whether or not you use columns, don&#8217;t create content that consists of large blocks of text extending the width of the screen. Offer succinct content in small units.<\/p>\n<\/div>\n<p>Also remember that you&#8217;ll need to create spaces in your wireframe for headings, navigation, images, and media as well as text. Wireframing is useful because the basic layout helps you see white space as well as content placement; you can determine if you have enough white space to emphasize and separate information. An overriding concept is to keep the design as clean, simple, and easy to use as possible.<\/p>\n<div class=\"field-item even\">\n<h3>Mock-up<\/h3>\n<p>Once you have your basic design, you can do a mock-up of the page, which includes the actual content, colors, and type fonts, to see if they present the information to effectively address your purpose and your audience&#8217;s needs. At the mock-up stage, consider the design message or brand, the image the organization wants to portray to the reader. When creating the look of the web page you must use logos, colors, fonts, and images that support the personality of the organization. After you complete your mock-up, move to the actual web page creation.<\/p>\n<h3>Web Page Test<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1302 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/04181507\/120-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>Once you&#8217;ve created your page, test the design on many different browsers and devices to deal with any design issues. Professional web design firms run their sites through an intense quality assurance phase. If this is not a feasible task, you can make your site available on private test sites. Web pages will appear different depending on the environment in which they are viewed. The overall idea of this final phase of user-friendly design is to make sure that the information is being presented clearly and there are not any overt problems.<\/p>\n<h2>Final Usability Testing<\/h2>\n<p>Once you think you have user-friendly content and design, move into usability testing with as many potential users as you have available.\u00a0 Again, you may want to use focus groups or observation strategies. Refer to the page on <a href=\"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/chapter\/usability-2\/\" target=\"_blank\" rel=\"noopener\">Usability<\/a> for fuller information.<\/p>\n<div class=\"textbox\">Colorado State University&#8217;s WAC Clearinghouse has a page on <a href=\"https:\/\/wac.colostate.edu\/resources\/writing\/guides\/webdev\/\" target=\"_blank\" rel=\"noopener\">Writing for the Web<\/a> which contains a discussion, illustrations, and links relating to web page content and design.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><sup>[1]<\/sup> Nielsen, Jakob. &#8220;How Little Do Users Read?&#8221; Nn\/g Nielsen Norman Group Website, May 5, 2008. <a href=\"https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/<\/a><\/div>\n<div><sup><br \/>\n[2]<\/sup> Miniukovich, Aliaksei., De Angeli, A., Sulpizio, S., and Venuti,P. &#8220;Design Guides for Web Readability.&#8221; Proceedings of the Designing Interactive Systems (DIS) Conference, June 10-14, 2014. <a href=\"https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability\" target=\"_blank\" rel=\"noopener\">https:\/\/www.researchgate.net\/publication\/317420534_Design_Guidelines_for_Web_Readability<\/a><\/div>\n<\/article>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\t\t\t <section class=\"citations-section\" role=\"contentinfo\">\n\t\t\t <h3>Candela Citations<\/h3>\n\t\t\t\t\t <div>\n\t\t\t\t\t\t <div id=\"citation-list-100\">\n\t\t\t\t\t\t\t <div class=\"licensing\"><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Original<\/div><ul class=\"citation-list\"><li>Web Pages, adapted from usability.gov, OER Commons, Technical Writing, and WikiBooks; attributions below. <strong>Authored by<\/strong>: Susan Oaks. <strong>Provided by<\/strong>: Empire State College, SUNY. <strong>Project<\/strong>: Technical Writing. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/\">CC BY-NC: Attribution-NonCommercial<\/a><\/em><\/li><\/ul><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Shared previously<\/div><ul class=\"citation-list\"><li>Writing for the Web. <strong>Provided by<\/strong>: usability.gov, U.S. General Services Administration. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/writing-for-the-web.html\">https:\/\/www.usability.gov\/how-to-and-tools\/methods\/writing-for-the-web.html<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/pdm\">Public Domain: No Known Copyright<\/a><\/em><\/li><li>Content Strategy Basics. <strong>Provided by<\/strong>: usability.gov, U.S. General Services Administration . <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/www.usability.gov\/what-and-why\/content-strategy.html\">https:\/\/www.usability.gov\/what-and-why\/content-strategy.html<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/pdm\">Public Domain: No Known Copyright<\/a><\/em><\/li><li>Create a Website. <strong>Provided by<\/strong>: OER Commons. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/www.oercommons.org\/courseware\/lesson\/21588\/overview\">https:\/\/www.oercommons.org\/courseware\/lesson\/21588\/overview<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/\">CC BY-NC-SA: Attribution-NonCommercial-ShareAlike<\/a><\/em><\/li><li>Considerations for Website Writing. <strong>Authored by<\/strong>: Elizabeth Lohman. <strong>Provided by<\/strong>: Lumen Learning. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1-web-sites_lecture-2\/\">https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1-web-sites_lecture-2\/<\/a>. <strong>Project<\/strong>: Technical Writing. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY: Attribution<\/a><\/em><\/li><li>Website Design. <strong>Authored by<\/strong>: WikiBooks. <strong>Provided by<\/strong>: Lumen Learning. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1_websites_readings-2\/\">https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1_websites_readings-2\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\">CC BY-SA: Attribution-ShareAlike<\/a><\/em><\/li><li>image of computer screen showing a web page . <strong>Authored by<\/strong>: Coffee Bean. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/web-design-facebook-facebook-page-1953128\/\">https:\/\/pixabay.com\/photos\/web-design-facebook-facebook-page-1953128\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>image of people bent over a table discussing what&#039;s on a laptop screen. <strong>Authored by<\/strong>: Sanu A S. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/people-discussion-meeting-discussion-5069845\/\">https:\/\/pixabay.com\/photos\/people-discussion-meeting-discussion-5069845\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>image of people seated at a table, looking at a laptop screen. <strong>Authored by<\/strong>: jamesoladujoye. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/meeting-informal-business-team-1702638\/\">https:\/\/pixabay.com\/photos\/meeting-informal-business-team-1702638\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>video How to wireframe a website. <strong>Provided by<\/strong>: CharliMarieTV. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/youtu.be\/PmmQjLqJQlY\">https:\/\/youtu.be\/PmmQjLqJQlY<\/a>. <strong>License<\/strong>: <em>Other<\/em>. <strong>License Terms<\/strong>: YouTube video<\/li><li>image of a wireframe. <strong>Authored by<\/strong>: Pexels. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/plans-design-web-design-designer-1867745\/\">https:\/\/pixabay.com\/photos\/plans-design-web-design-designer-1867745\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>image of the same photograph in hard copy, on a web page, and on an iphone screen. <strong>Authored by<\/strong>: ptra. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/communication-mockup-design-device-2824850\/\">https:\/\/pixabay.com\/photos\/communication-mockup-design-device-2824850\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><\/ul><\/div>\n\t\t\t\t\t\t <\/div>\n\t\t\t\t\t <\/div>\n\t\t\t <\/section>","protected":false},"author":81366,"menu_order":15,"template":"","meta":{"_candela_citation":"[{\"type\":\"original\",\"description\":\"Web Pages, adapted from usability.gov, OER Commons, Technical Writing, and WikiBooks; attributions below\",\"author\":\"Susan Oaks\",\"organization\":\"Empire State College, SUNY\",\"url\":\"\",\"project\":\"Technical Writing\",\"license\":\"cc-by-nc\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Writing for the Web\",\"author\":\"\",\"organization\":\"usability.gov, U.S. General Services Administration\",\"url\":\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/writing-for-the-web.html\",\"project\":\"\",\"license\":\"pd\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Content Strategy Basics\",\"author\":\"\",\"organization\":\"usability.gov, U.S. General Services Administration \",\"url\":\"https:\/\/www.usability.gov\/what-and-why\/content-strategy.html\",\"project\":\"\",\"license\":\"pd\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Create a Website\",\"author\":\"\",\"organization\":\"OER Commons\",\"url\":\"https:\/\/www.oercommons.org\/courseware\/lesson\/21588\/overview\",\"project\":\"\",\"license\":\"cc-by-nc-sa\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Considerations for Website Writing\",\"author\":\"Elizabeth Lohman\",\"organization\":\"Lumen Learning\",\"url\":\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1-web-sites_lecture-2\/\",\"project\":\"Technical Writing\",\"license\":\"cc-by\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Website Design\",\"author\":\"WikiBooks\",\"organization\":\"Lumen Learning\",\"url\":\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/unit-1_websites_readings-2\/\",\"project\":\"\",\"license\":\"cc-by-sa\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of computer screen showing a web page \",\"author\":\"Coffee Bean\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/web-design-facebook-facebook-page-1953128\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of people bent over a table discussing what\\'s on a laptop screen\",\"author\":\"Sanu A S\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/people-discussion-meeting-discussion-5069845\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of people seated at a table, looking at a laptop screen\",\"author\":\"jamesoladujoye\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/meeting-informal-business-team-1702638\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"video How to wireframe a website\",\"author\":\"\",\"organization\":\"CharliMarieTV\",\"url\":\"https:\/\/youtu.be\/PmmQjLqJQlY\",\"project\":\"\",\"license\":\"other\",\"license_terms\":\"YouTube video\"},{\"type\":\"cc\",\"description\":\"image of a wireframe\",\"author\":\"Pexels\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/plans-design-web-design-designer-1867745\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of the same photograph in hard copy, on a web page, and on an iphone screen\",\"author\":\"ptra\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/communication-mockup-design-device-2824850\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"}]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-100","chapter","type-chapter","status-publish","hentry"],"part":84,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/users\/81366"}],"version-history":[{"count":32,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/100\/revisions"}],"predecessor-version":[{"id":1663,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/100\/revisions\/1663"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/parts\/84"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/100\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapter-type?post=100"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/contributor?post=100"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/license?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}