9 Simple Hacks Every Web Designer Should Know [code snippets included]

People spend a lot of time on their phones but that still has not made web pages irrelevant.

On the contrary, websites have come to look as sleek as mobile apps in recent days due to new CSS specs and UX trends.

As a front-end developer, you’d need to be on the lookout for these emerging techniques. You’d have to go beyond style sheets and templates, framing pages dictated by the UX.

And so, here are a few simple hacks and tricks that you can employ in your code to make your creations look current.

Let’s jump into it.

Validating forms using the ‘Pattern’ attribute in HTML5

Forms are all over the internet. Whether you sign up for a new social media account or a magazine subscription, you have to deal with date-of-births and addresses.

To make it easier on the user’s end, you can use the pattern attribute and invalidate wrong user inputs.

Look at this code here:

 
<form action="/front_page.php">
Password: <input type="password" name="pw" pattern="[a-z].{1,15,}">
<input type="submit">
</form>

Here, you create a field that accepts text that is lowercase and not longer than 15 characters.

You can customize your field to contain different parameters. The [] lets you choose the range while the {} lets you set the limit on the input.

Load above-the-fold assets quicker for better PageRank

Making your webpage load faster, especially the very first elements that a prospective user would view is important.

This is because these load times are taken into consideration by Google’s search bots as they rank your website.

Here are a few suggestions:

• Ensure that all of your CSS is inline. 
• Decrease the number of external files you use to load your web pages’ elements. 
• Use the right CSS media types and queries to specify critical resources as non-render blocking.
• Put the <content> section before <sidebar>.
• Embed the font data to speed up fonts loading.

Use Gzip compression in HTML5 to increase page-loading speed

Instead of using an index.html file, you can dispatch a .zip that would be unpacked by the browser.

To do that, first locate your htaccess file on your web host and then use this snippet to modify it:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Use HMTL5 Local Storage to decrease bandwidth usage

Cookies are used to store user information and to enable their sessions on your websites. However, cookies are resource-intensive, as they are constantly sent back and forth between you and the user.

Instead, you can choose to store the user data locally. Follow this link to learn more on that: http://tutorials.jenkov.com/html5/local-storage.html

Curve text around an image

Gone are the days when the image had to be a rectangle for text to fit below or aside it. With SVGs and better CSS specs, you can now load images of any shape on your webpage, and using the shape-outside element, you can display the text around it.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

As per your image’s alignment, you can alter this snippet.

Native animations using CSS

With CSS3 specs, it is now possible to animate SVGs inline on a web page. This means that simple ornamentation would not require JavaScript or other tools.  

Using the @keyframes rule, you can type out your code to animate a picture. Check out this collection to learn more: https://codepen.io/collection/yivpx/

Smart Quotes

Smart quotes have taken over the reading experience of the modern web user, due to publications like Medium. It enhances the reading experience while making necessary information stand out. 

On HTML, it is a simple <q> tag that does not leave much room for customization.

<q>Smart quotes are beautiful!</q>

With CSS, using its ‘q’ rule, you can customize the font and size as well.

q {
    quotes: "“" "”";
    font-size: 2rem;
}

Display error messages when image-loading breaks 

Images can break while loading on the browser due to various reasons. Displaying a broken image icon among the other modern elements might seem a bit outdated.

So, you can display a message as well.

Here is the CSS snippet:

img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Image filters

Now in CSS, you can employ some basic filters on your image while displaying them on your website without needing to process them using Photoshop. Here is the snippet:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);

Some extra tidbits

Dark Mode

A budding UX trend, Dark Mode has outgrown its days of being a rare customization preference. Entire mobile operating systems like iOS and Android have brought native support to this theme. As a web developer, you can code this into your webpages as well.

There are several ways to do that, the commonest being using the body tag.

In our example using CSS, you can see that we create a separate body tag with a different color scheme.

body {
  --text-color: #222;
  --bkg-color: #fff;
}
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

This just creates the theme specification. You’d have to then create a toggle that can activate the dark mode, and for that, you’d need Javascript.

Scroll-powered animations

While you’d need Javascript to frame full-fledged animations, you can create some simple ones using CSS. Here’s how:

First, create a custom CSS property using Javascript that knows how far a user has scrolled down a page.

Next, use this snippet:

svg {
  position: fixed; 
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

To translate what the code means: The SVG stays put and animates itself once the user starts scrolling.

Final words

Building web pages that function well and look good is no easy task. 

We also understand that it is not as straightforward as employing a few hacks and must-dos. 

But we hope that these give you some mileage in your development.

Follow us on the socials and browse around for more such articles.