{"id":49787,"date":"2020-10-09T02:33:45","date_gmt":"2020-10-09T09:33:45","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=49787"},"modified":"2020-10-09T02:33:56","modified_gmt":"2020-10-09T09:33:56","slug":"4-web-design-hacks-you-can-use-to-enhance-your-website-on-a-budget","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/4-web-design-hacks-you-can-use-to-enhance-your-website-on-a-budget\/","title":{"rendered":"4 Web Design Hacks You Can Use to Enhance Your Website on a Budget"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-50509 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-500x281.jpg\" alt=\"web design hacks\" width=\"500\" height=\"281\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-500x281.jpg 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-970x546.jpg 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-768x432.jpg 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-1000x563.jpg 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks.jpg 1200w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/281;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-50509\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-500x281.jpg\" alt=\"web design hacks\" width=\"500\" height=\"281\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-500x281.jpg 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-970x546.jpg 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-768x432.jpg 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks-1000x563.jpg 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/a248ca6c-web-design-hacks.jpg 1200w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/noscript><\/p>\n<pre><a href=\"https:\/\/pxhere.com\/en\/photo\/928795\"><em>Image credit<\/em><\/a><\/pre>\n<p>Having a functional, usable, and super fast website doesn\u2019t have to cost an arm and a leg.<\/p>\n<p>As a web designer, you can use a few pieces of code or some minor tweaks to ensure a much faster and better appealing web design.<\/p>\n<p>Without having to fork out thousands of dollars to a designer, and without having to change the underlying infrastructure of your website, here are four simple web design hacks that can enhance your website today:<\/p>\n<ol>\n<li><strong>Use HTML5 DOM Storage (Instead of Cookies) to Ensure a Faster Website&nbsp;<\/strong><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-50511 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-970x686.png\" alt=\"local storage\" width=\"970\" height=\"686\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-970x686.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-500x353.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-768x543.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-1000x707.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage.png 1497w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/686;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-50511\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-970x686.png\" alt=\"local storage\" width=\"970\" height=\"686\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-970x686.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-500x353.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-768x543.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage-1000x707.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2818f34e-local-storage.png 1497w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/noscript><\/p>\n<pre><em><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:AppLSAC_Client_Only_LocalStorage.png\">Image Credit<\/a><\/em><\/pre>\n<p>Depending on how big a website\/web page is, it \u201ccosts\u201d quite a bit of data and bandwidth to load that website when you rely only on cookies. When this website is loaded repeatedly for a lot of users, depending on the server it is hosted on, the result can be a slower website (due to increased strain on available server resources) and increased hosting costs.<\/p>\n<p>Often, this is because of how cookies are used: cookies are generally only necessary when there is a need for client-server communication between a user\u2019s browser and your server.<\/p>\n<p>If there\u2019s no need for a user\u2019s browser to interact with your server before the user experience is fulfilled, you should consider using DOM storage instead of cookies.<\/p>\n<p>DOM Storage can take the following forms:<\/p>\n<ul>\n<li style=\"font-weight: 400\">sessionStorage in which data is stored in a user\u2019s browser for the current session<\/li>\n<li style=\"font-weight: 400\">localStorage in which data is stored in a user\u2019s browser without an expiration date<\/li>\n<\/ul>\n<p>You generally want to focus on localStorage. With this, data is stored in the user\u2019s browser and won\u2019t be deleted even if they close their current browsing session. This will reduce server connection requests and make your website a lot faster for the user.<\/p>\n<p>So how does this work? Assuming you want to store the \u201cname\u201d value in a user\u2019s browser, for example, you will have:<\/p>\n<p><em>\/\/ Store&nbsp;<\/em><br><em>localStorage.name = &#8220;Firstname Lastname&#8221;;&nbsp;<\/em><\/p>\n<p>To retrieve the value:<\/p>\n<p><em>\/\/ Retrieve&nbsp;<\/em><br><em>document.getElementById(&#8220;result&#8221;).innerHTML = localStorage.name;<\/em><\/p>\n<p>To remove the value:<\/p>\n<p><em>localStorage.removeItem(&#8220;lastname&#8221;);<\/em><\/p>\n<p>What if you want to check if localStorage is available? You&nbsp;<a href=\"https:\/\/diveinto.html5doctor.com\/storage.html\">can use<\/a>:<\/p>\n<p><em>function supports_html5_storage() {<\/em><br><em>try {<\/em><br><em>return &#8216;localStorage&#8217; in window &amp;&amp; window[&#8216;localStorage&#8217;] !== null;<\/em><br><em>} catch (e) {<\/em><br><em>return false;<\/em><br><em>}<\/em><br><em>}<\/em><\/p>\n<ol start=\"2\">\n<li><strong>Achieve Better Image Styling by Using the &lt;Picture&gt; Element<\/strong><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50512 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element.png\" alt=\"\" width=\"527\" height=\"310\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element.png 527w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element-500x294.png 500w\" data-sizes=\"(max-width: 527px) 100vw, 527px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 527px; --smush-placeholder-aspect-ratio: 527\/310;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50512\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element.png\" alt=\"\" width=\"527\" height=\"310\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element.png 527w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5ffd9d36-html-picture-element-500x294.png 500w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><\/noscript><\/p>\n<p><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:HTMLtags_.png\"><em>Image credit<\/em><\/a><\/p>\n<p>In a world that is heavily reliant on images &#8212; research shows that our brains process images a lot faster than text &#8212; being able to effectively manipulate images is one of the key advantages you can have as a web designer; and this goes beyond looking for the&nbsp;<a href=\"https:\/\/www.top10.com\/photo-editing-apps\">best photo editing app<\/a>&nbsp;out there today.<\/p>\n<p>Being able to properly style images is a web design super power for a few key reasons:<\/p>\n<ul>\n<li style=\"font-weight: 400\">It makes your web design a lot faster since you\u2019re able to control when and how images should load.<\/li>\n<li style=\"font-weight: 400\">It gives you a lot of flexibility when it comes to which image\/version of your design users should see depending on their device.<\/li>\n<li style=\"font-weight: 400\">It allows you to serve different images\/image formats for different browser types.<\/li>\n<li style=\"font-weight: 400\">It allows you to save money you\u2019d have otherwise spent creating different design versions with different image elements.<\/li>\n<\/ul>\n<p>So how do you go about achieving this? By effectively leveraging the HTML &lt;picture&gt; tag.<\/p>\n<p>Here\u2019s an example code:<\/p>\n<p><em>&lt;picture&gt;<\/em><br><em>&lt;source media=&#8221;(min-width: 600px)&#8221; srcset=&#8221;img001.jpg&#8221;&gt;<\/em><br><em>&lt;source media=&#8221;(min-width: 250px)&#8221; srcset=&#8221;img123.jpg&#8221;&gt;<\/em><br><em>&lt;img src=&#8221;img234.jpg&#8221; alt=&#8221;Header&#8221; style=&#8221;width:auto;&#8221;&gt;<\/em><br><em>&lt;\/picture&gt;<\/em><\/p>\n<p>In essence, the above code involves three images; the original \u201cimg234.jpg\u201d which is displayed. Under certain conditions, however, other images could be served. For example, the code says \u201cimg001.jpg\u201d should be served for devices with a minimum width of 600px, \u201cimg123.jpg\u201d should be served for devices with a minimum width of 250px. You could add more lines of code to specify more possibilities.<\/p>\n<p>Some sub-elements and attributes that can be used for this tag include:<\/p>\n<ul>\n<li style=\"font-weight: 400\">The&nbsp;<strong>&lt;source&gt;<\/strong>&nbsp;subelement to specify media resources.<\/li>\n<li style=\"font-weight: 400\">The&nbsp;<strong>&lt;img&gt;<\/strong>&nbsp;subelement to define an image.<\/li>\n<li style=\"font-weight: 400\">The&nbsp;<strong>srcset<\/strong>&nbsp;attribute that is used to specify different images that could be loaded depending on the size of the viewport; you use this when dealing with a set of images as opposed to just one image (in which case you use the&nbsp;<strong>src<\/strong>&nbsp;attribute).<\/li>\n<li style=\"font-weight: 400\">The&nbsp;<strong>media<\/strong>&nbsp;attribute that the user agent evaluates for every source element.<\/li>\n<\/ul>\n<ol start=\"3\">\n<li><strong>Enable GZIP Compression via .htaccess to Boost Site Speed<\/strong><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-50513 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-970x958.png\" alt=\"\" width=\"970\" height=\"958\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-970x958.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-500x494.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-768x758.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-1000x988.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-120x120.png 120w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression.png 1280w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/958;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-50513\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-970x958.png\" alt=\"\" width=\"970\" height=\"958\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-970x958.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-500x494.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-768x758.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-1000x988.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression-120x120.png 120w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/f3bd37cd-gzip-compression.png 1280w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/noscript><\/p>\n<pre><em><a href=\"https:\/\/www.needpix.com\/photo\/download\/20345\/compress-file-zip-archive-add-document-zipped-free-vector-graphics-free-pictures\">Image credit<\/a><\/em><\/pre>\n<p>No matter how well-designed a website is, it won\u2019t make much of a difference if the website is slow.<\/p>\n<p>This is why it is important to make sure you enable proper compression to minimize the number of files that have to be loaded and as a result get a website speed boost. The best way to do this is via GZIP compression.<\/p>\n<p>You can enable GZIP compression by adding the following code to a web server\u2019s .htaccess file:<\/p>\n<p><em>&lt;ifModule mod_gzip.c&gt;<\/em><br><em><span style=\"font-size: inherit\">mod_gzip_on Yes<br><\/span>mod_gzip_dechunk Yes<\/em><br><em>mod_gzip_item_include file .(html?|txt|css|js|php|pl)$<\/em><br><em><span style=\"font-size: inherit\">mod_gzip_item_include handler ^cgi-script$<br><\/span>mod_gzip_item_include mime ^text\/.*<\/em><br><em>mod_gzip_item_include mime ^application\/x-javascript.*<\/em><br><em>mod_gzip_item_exclude mime ^image\/.*<\/em><br><em>mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*<\/em><br><em>&lt;\/ifModule&gt;<\/em><\/p>\n<p>If your web server doesn\u2019t have .htaccess, there are also instrunctions for&nbsp;<a href=\"https:\/\/docs.nginx.com\/nginx\/admin-guide\/web-server\/compression\/\">NGINX<\/a>,&nbsp;<a href=\"https:\/\/httpd.apache.org\/docs\/current\/mod\/mod_deflate.html#enable\">Apache<\/a>, and&nbsp;<a href=\"https:\/\/www.litespeedtech.com\/support\/wiki\/doku.php\/litespeed_wiki:config:gzip-compression\">Litespeed<\/a>.<\/p>\n<ol start=\"4\">\n<li><strong>Combine Fonts to Spice Up Your Design<\/strong><\/li>\n<\/ol>\n<p>Typography is generally believed to be the most important part of a design, so the fonts you use will go a long way to influence how your design is perceived.<\/p>\n<p>So much has been written about&nbsp;<a href=\"https:\/\/webdesignledger.com\/how-fonts-make-or-break-design\/\">selecting fonts<\/a>, so I won\u2019t be covering that again in this article. One hack I\u2019d like to recommend you give a shot, however, is combining multiple fonts.<\/p>\n<p>You can combine two, three, or more fonts to make your web design look a lot more appealing. Fonts can be combined in a logo, layout, or the actual web design itself, combining fonts can go a long way to make your website look different.<\/p>\n<p>That said, there are a few rules you might want to stick to if you want to get results from combining fonts. These include:<\/p>\n<ul>\n<li style=\"font-weight: 400\">Choosing fonts from the same superfamily. This is especially important if you\u2019re a beginner designer or not familiar with how to pair fonts.<\/li>\n<li style=\"font-weight: 400\">If you\u2019re not sure where to start, you might want to start by pairing a serif font with sans serif and see how that looks.<\/li>\n<li style=\"font-weight: 400\">Consider the flow of content on your web design when combining fonts &#8212; since fonts influence content readability, you want to make sure that the fonts you use match the attribute of the message that will be displayed and as a result flows.<\/li>\n<li style=\"font-weight: 400\">You also want to make sure that the fonts you pair contrast with each other &#8212; this is one of the reasons why pairing serif and sans serif might be a good place to start. Contrast can be achieved through size, style, spacing, and weight.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image credit Having a functional, usable, and super fast website doesn\u2019t have to cost an arm and a leg. As a web designer, you can use a few pieces of code or some minor tweaks to ensure a much faster and better appealing web design. Without having to fork out thousands of dollars to a [&hellip;]<\/p>\n","protected":false},"author":1969,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[479],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/49787"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1969"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=49787"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/49787\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=49787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=49787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=49787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}