{"id":314,"date":"2014-07-15T20:20:40","date_gmt":"2014-07-15T20:20:40","guid":{"rendered":"http:\/\/www.trich.me\/blog\/?p=314"},"modified":"2014-07-16T00:35:18","modified_gmt":"2014-07-16T00:35:18","slug":"web-design-tips","status":"publish","type":"post","link":"http:\/\/www.trich.me\/blog\/web-design-tips\/","title":{"rendered":"Web Design Tips from a Designer to Non-Designers"},"content":{"rendered":"<p><span style=\"color: #645c5c;\">Every week or so I am reminded\u00a0that not every start-up company has the finances to hire a graphic or web designer. When that happens, small business owners or non-designer web developers have to take matters into their own hands.\u00a0As a designer (<a href=\"http:\/\/www.trich.me\/\">here is some of my work<\/a>) I get asked questions like &#8220;How do you do that?&#8221; or &#8220;How do you know what\u00a0looks good?&#8221; Rather than replying, &#8220;I just know,&#8221; I have decided to give a couple of basic web design tips to help the definite non-designers out there.\u00a0<\/span><\/p>\n<p>Here are some general guidelines to ponder before spending money to hire someone like me or\u00a0a\u00a0web designer to create or change something in your website design.<\/p>\n<h1>1. Alignment and Symmetry<\/h1>\n<p>In my opinion, good\u00a0alignment and spacing is the base\u00a0of good web design. Friends often ask me how I produce my design work, and honestly, I just line things up and make sure the padding (space around elements) is symmetrical and relative to that particular object&#8217;s\u00a0size. Here are some rules regarding alignment on the web:<\/p>\n<ul style=\"color: #333333;\">\n<li>Try not to mix text alignment. Either left-align, or right-align text, but don\u2019t do both. For example, on a normal blog layout\u00a0right-aligned text in a right sidebar creates rivers of white space between the two columns and looks horrible. If you left-align your body copy, then left-align your sidebar text as well.<\/li>\n<li>Centered headlines are classy, centered body copy is a definite no-no.<\/li>\n<li>Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise with it too, in design\u00a05px is definitely not 7px. Remember, good design is all about the details.<\/li>\n<li>Use balance. What is balance? Balance is the equal distribution of visual elements in a design. Visual balance occurs around a vertical axis\u00a0and good design\u00a0needs visual weight to be equal on the two sides. When elements are not balanced, the effect is disturbing and makes users uncomfortable.<\/li>\n<\/ul>\n<p><em>Web Design Tips &#8211; Bad Examples:<\/em><\/p>\n<div id=\"attachment_361\" style=\"width: 582px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-361\" class=\"size-full wp-image-361\" src=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\" alt=\"This website is horribly aligned. Notice the left side of the page is much heavier than the right. The fonts are not all aligned correctly and the picture is has no padding (white space) around it like the paragraphs do. The logo in the navbar seems to be floating randomly and would be much better being aligned in the middle and to the left. The information box and button seems to have no alignment with any other element on the page. The footer at the bottom of the page is even mis-aligned because it is too far to the left when it should be align with the left side of the containing div above it.\" width=\"572\" height=\"569\" srcset=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png 572w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment-150x150.png 150w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment-300x298.png 300w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment-144x144.png 144w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment-301x300.png 301w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/a><p id=\"caption-attachment-361\" class=\"wp-caption-text\">This website is horribly aligned. Notice the left side of the page is much heavier than the right. The fonts are not all aligned correctly and the picture is has no padding (white space) around it like the paragraphs do. The logo in the navbar seems to be floating randomly and would be much better being aligned in the middle and to the left. The information box and button seems to have no alignment with any other element on the page. The footer at the bottom of the page is even aligned incorrectly because it is too far to the left when it should be align with the left side of the containing div above it.<\/p><\/div>\n<h1>2. Use Amazing Pictures<\/h1>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\"><span style=\"color: #000000;\">The right photo can take a good design, and make it even better. The right photo can be the solution to the often used, &#8220;<\/span>Something\u2019s just missing.&#8221;<span style=\"color: #000000;\">\u00a0<\/span><\/p>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\">So what makes a good photo? I&#8217;ll tell you:<\/p>\n<ul style=\"color: #333333;\">\n<li><em>Relevance<\/em> &#8211; The picture has to have something to do with whatever you\u2019re selling or doing on your website. For example, for a\u00a0restaurant you\u2019ll want to use photos of the actual business, or your\u00a0actual food. Bad stock photos will not do you any good, ever. When I have to use stock photos,\u00a0I use\u00a0<a href=\"http:\/\/www.stocksy.com\/\">Stocksy<\/a>\u00a0because they are stock photos that aren&#8217;t really stock photos.\u00a0When you\u2019re website content is a little less tangible than a restaurant,\u00a0like babysitting\u00a0for example, you can get away with using photos that are more symbolically relevant. But if you are selling internationally, symbols vary from country to country, and culture to culture.<\/li>\n<li><em>Contrast<\/em> &#8211; Because usability comes first, make sure that the photo you integrate into your design has the right kind of contrast. That means dark background with light text and light backgrounds with dark texts. In web design\u00a0you\u00a0are always\u00a0putting things like text, buttons, or other divs on top of pictures, and there is nothing more irritating than text you can barely read. Using a subtle drop shadow is usually acceptable.<\/li>\n<li><em>Attention Drawing<\/em> &#8211; <span style=\"color: #000000;\">Photos can break up the visual boringness of a site (full of text), and help users to identify an article, link, story, or what-have-you that they might be interested in. If you remember anything from this article, remember this: pictures\u00a0make people stop and pay attention.\u00a0This seems almost a little obvious if you think about it but bigger images will have a bigger visual impact.<\/span><\/li>\n<\/ul>\n<p><em><em>Web Design Tips &#8211; Bad Examples:<\/em><br \/>\n<\/em><\/p>\n<div id=\"attachment_358\" style=\"width: 641px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/badpictures.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-358\" class=\"size-full wp-image-358\" src=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/badpictures.png\" alt=\"This is an example of bad contrast and pictures. The photos are not even viewable with the big bulky text in the way. There is hardly any contrast between background and text on the main navbar. The titles are not aligned symmetrically and the 3 columns are not giving my eyes a place to focus on. Not to mention the horrible stock photos. This website is a wreck. \" width=\"631\" height=\"420\" srcset=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/badpictures.png 631w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/badpictures-300x199.png 300w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/badpictures-450x300.png 450w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/a><p id=\"caption-attachment-358\" class=\"wp-caption-text\">This is an example of bad contrast and pictures. The photos are not even viewable with the big bulky text in the way. There is hardly any contrast between background and text on the main navbar. The titles are not aligned symmetrically and the 3 columns are not giving my eyes a place to focus on. Not to mention the horrible stock photos. This website is a wreck.<\/p><\/div>\n<h1>3. Whitespace Saves Ugliness<\/h1>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\"><span style=\"color: #000000;\">When I\u00a0talk about whitespace, I\u00a0mean negative space. Space between screen elements. Space with nothing in it. Whitespace\u00a0is not always literally \u2018white\u2019 as the title infers. This space may be a color or texture, but either way it is space within a design that does not include screen elements.\u00a0<\/span><\/p>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\"><span style=\"color: #000000;\">Whitespace is a crucial element of design for good reason. If you implement it\u00a0well it can transform a design and provide many aesthetic or\u00a0tangible benefits\u00a0like improved legibility, comprehension, attention, and organization.<\/span><\/p>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\"><em><em style=\"color: #333333;\">Web Design Tips &#8211; Bad Examples:<\/em><br \/>\n<\/em><\/p>\n<div id=\"attachment_355\" style=\"width: 836px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/toomuch.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-355\" class=\"size-full wp-image-355\" src=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/toomuch.png\" alt=\"This literally gives me a headache. The quantity of information is unbearable, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Do not do it! Give web elements enough room on the page to deliver the message they are intended to.\" width=\"826\" height=\"772\" srcset=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/toomuch.png 826w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/toomuch-300x280.png 300w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/toomuch-320x300.png 320w\" sizes=\"auto, (max-width: 826px) 100vw, 826px\" \/><\/a><p id=\"caption-attachment-355\" class=\"wp-caption-text\">This literally gives me a headache. The quantity of information is unbearable, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Do not do it! Give each web\u00a0element enough room on the page to deliver the message they are intended to. If this website was to divide each call to action into vertical sections with enough white space in between, the website would be completely transformed.<\/p><\/div>\n<h1>4. Standardize Understanding, But Be Creative in Style, Brand, &amp; Voice<\/h1>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\">Your users\u00a0shouldn\u2019t have to read, watch a video, or be taught how to use\u00a0your website. If they need assistance before they can use it, you are doing something wrong and frankly, they just won\u2019t use it. Instead, they will leave.<\/p>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\">While your style, brand and voice should\u00a0be unique, don\u2019t ever sacrifice understanding for something that may be too hip or too trendy\u00a0looking. The understanding of your website should be standardized.\u00a0That is not good design. What I mean by standardized is using clear language, visuals, and structure so your website\u00a0make sense to everyone. Use familiar actions and interface. Keep items that appear on every page (like the logo and navigation) in the same place on each page so they\u2019re easier to find. Label pages and sections with words that make sense.\u00a0It\u2019s more important that visitors know how to do something than be wowed with your creative naming.<\/p>\n<p class=\"post-p\" style=\"color: rgba(0, 0, 0, 0.8);\"><em><em style=\"color: #333333;\">Web Design Tips &#8211; Bad Examples:<\/em><\/em><\/p>\n<div id=\"attachment_324\" style=\"width: 594px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-324\" class=\"size-large wp-image-324\" src=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM-1024x593.png\" alt=\"Remember that good design is intuitive. Bad design is confusing. This webpage is so confusing that I do not even know where to go when landing on their homepage.\" width=\"584\" height=\"338\" srcset=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM-1024x593.png 1024w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM-300x173.png 300w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM-500x289.png 500w, http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-07-at-3.28.23-PM.png 1232w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-324\" class=\"wp-caption-text\">Remember that good design is intuitive. Bad design is confusing. This webpage is so confusing that I do not even know where to go when landing on their homepage. The menu on the left is not a standard menu. Even though the website was trying to\u00a0appeal to their\u00a0audience with cars as menu items, it is too distracting for the users. The square car pictures to the right of the website are easily confused for the square clickable elements to the left of them. There is no distinction between the two, other than the black text on the clickable links.<\/p><\/div>\n<h1>Web Design Tips Conclusion<\/h1>\n<p><span style=\"color: #645c5c;\">Keeping all these web design tips in mind, create a page hierarchy. When everything is important on your page then nothing is important. Too many large fonts and\/or too many words in bold colors<\/span><span style=\"color: #645c5c;\">\u00a0actually will confuse your\u00a0users and makes everything non-important overall. So choose things on your page that are\u00a0most important and start there. Highlight those elements\u00a0only.<\/span><\/p>\n<p>Hope these tips help out a bit and get your design started off on the right foot.<\/p>\n<p>Happy web designing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every week or so I am reminded\u00a0that not every start-up company has the finances to hire a graphic or web designer. When that happens, small business owners or non-designer web developers have to take matters into their own hands.\u00a0As a &hellip; <a href=\"http:\/\/www.trich.me\/blog\/web-design-tips\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,5,13],"tags":[],"class_list":["post-314","post","type-post","status-publish","format-standard","hentry","category-design","category-development","category-startups"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Design Tips from a Designer to Non-Designers - trich.me<\/title>\n<meta name=\"description\" content=\"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.trich.me\/blog\/web-design-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design Tips from a Designer to Non-Designers - trich.me\" \/>\n<meta property=\"og:description\" content=\"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.trich.me\/blog\/web-design-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"trich.me\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-15T20:20:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-07-16T00:35:18+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\" \/>\n<meta name=\"author\" content=\"trich7\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"trich7\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.trich.me\/blog\/web-design-tips\/\",\"url\":\"http:\/\/www.trich.me\/blog\/web-design-tips\/\",\"name\":\"Web Design Tips from a Designer to Non-Designers - trich.me\",\"isPartOf\":{\"@id\":\"http:\/\/www.trich.me\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\",\"datePublished\":\"2014-07-15T20:20:40+00:00\",\"dateModified\":\"2014-07-16T00:35:18+00:00\",\"author\":{\"@id\":\"http:\/\/www.trich.me\/blog\/#\/schema\/person\/afad9f7cfc8bc16e89a4660c8cbf7464\"},\"description\":\"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.trich.me\/blog\/web-design-tips\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage\",\"url\":\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\",\"contentUrl\":\"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png\",\"width\":572,\"height\":569,\"caption\":\"This website is horribly aligned. Notice the left side of the page is much heavier than the right. The fonts are not all aligned correctly and the picture is has no padding (white space) around it like the paragraphs do. The logo in the navbar seems to be floating randomly and would be much better being aligned in the middle and to the left. The information box and button seems to have no alignment with any other element on the page. The footer at the bottom of the page is even mis-aligned because it is too far to the left when it should be align with the left side of the containing div above it.\"},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.trich.me\/blog\/#website\",\"url\":\"http:\/\/www.trich.me\/blog\/\",\"name\":\"trich.me\",\"description\":\"Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.trich.me\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.trich.me\/blog\/#\/schema\/person\/afad9f7cfc8bc16e89a4660c8cbf7464\",\"name\":\"trich7\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.trich.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dfac55376cc22f20ae6b6cece8c8154104fec607891d27a0a4be1102f2a1916a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dfac55376cc22f20ae6b6cece8c8154104fec607891d27a0a4be1102f2a1916a?s=96&d=mm&r=g\",\"caption\":\"trich7\"},\"url\":\"http:\/\/www.trich.me\/blog\/author\/trich7\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design Tips from a Designer to Non-Designers - trich.me","description":"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.trich.me\/blog\/web-design-tips\/","og_locale":"en_US","og_type":"article","og_title":"Web Design Tips from a Designer to Non-Designers - trich.me","og_description":"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...","og_url":"http:\/\/www.trich.me\/blog\/web-design-tips\/","og_site_name":"trich.me","article_published_time":"2014-07-15T20:20:40+00:00","article_modified_time":"2014-07-16T00:35:18+00:00","og_image":[{"url":"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png","type":"","width":"","height":""}],"author":"trich7","twitter_misc":{"Written by":"trich7","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.trich.me\/blog\/web-design-tips\/","url":"http:\/\/www.trich.me\/blog\/web-design-tips\/","name":"Web Design Tips from a Designer to Non-Designers - trich.me","isPartOf":{"@id":"http:\/\/www.trich.me\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage"},"image":{"@id":"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage"},"thumbnailUrl":"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png","datePublished":"2014-07-15T20:20:40+00:00","dateModified":"2014-07-16T00:35:18+00:00","author":{"@id":"http:\/\/www.trich.me\/blog\/#\/schema\/person\/afad9f7cfc8bc16e89a4660c8cbf7464"},"description":"I have decided to give a couple of basic web design tips to help the definite non-designers out there. The general guidelines to ponder when web designin...","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.trich.me\/blog\/web-design-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.trich.me\/blog\/web-design-tips\/#primaryimage","url":"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png","contentUrl":"http:\/\/www.trich.me\/blog\/wp-content\/uploads\/2014\/07\/alignment.png","width":572,"height":569,"caption":"This website is horribly aligned. Notice the left side of the page is much heavier than the right. The fonts are not all aligned correctly and the picture is has no padding (white space) around it like the paragraphs do. The logo in the navbar seems to be floating randomly and would be much better being aligned in the middle and to the left. The information box and button seems to have no alignment with any other element on the page. The footer at the bottom of the page is even mis-aligned because it is too far to the left when it should be align with the left side of the containing div above it."},{"@type":"WebSite","@id":"http:\/\/www.trich.me\/blog\/#website","url":"http:\/\/www.trich.me\/blog\/","name":"trich.me","description":"Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.trich.me\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.trich.me\/blog\/#\/schema\/person\/afad9f7cfc8bc16e89a4660c8cbf7464","name":"trich7","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.trich.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dfac55376cc22f20ae6b6cece8c8154104fec607891d27a0a4be1102f2a1916a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dfac55376cc22f20ae6b6cece8c8154104fec607891d27a0a4be1102f2a1916a?s=96&d=mm&r=g","caption":"trich7"},"url":"http:\/\/www.trich.me\/blog\/author\/trich7\/"}]}},"_links":{"self":[{"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/posts\/314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":10,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":365,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions\/365"}],"wp:attachment":[{"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.trich.me\/blog\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}