14 Cool Web Design Tricks You Should Know About

Web design is rewarding, but time-consuming. That isn’t a problem when you first get started in design and have that one client you want to build a perfect site for. However, when you’re juggling several clients at once, anything you can do to save time or ramp up the professionalism of a website helps your business thrive. Finding cool web design tricks allows you to do more in the time you have in a day.

Even the most bare-bones WordPress site takes a minimum of eight hours to launch. Of course, the more in-depth the site, and the more features you add, the longer it takes to develop the site. Fortunately, many tips and cool web design tricks allow you to save time and create an amazing website built to impress.

1. Apply Global Changes

What if you’re coding and realize the font you’ve used throughout isn’t working? One of the cool web design tricks is to apply global changes in CSS by using an asterisk selector. To change all the fonts on a page from one family to another, you can use something such as *{font-family:sans-serif, helvetica;} to change all the fonts easily. However, be careful not to add these changes to your live code.

2. Test Mobile Responsiveness

More and more people access the Internet via their mobile devices. Making sure your website is mobile-friendly is a must these days. However, merely choosing a base theme for WordPress doesn’t always ensure your site will look good on mobile devices. Fortunately, you can quickly check mobile responsiveness before spending hours customizing the look with tools such as Google’s mobile-friendly test.

3. Identify Fonts

Have you ever seen a website design you love, but you aren’t quite sure what font they are using? Sure, you could pull up source code and search through it to find out, but if you want to save time, you can just use the What Font tool to quickly identify which fonts are on the page, and repeat that font in your designs. If you’ve installed this Chrome extension, you can just hover over the font on the page, and the name of it will pop up, as well as any services used to deliver that font.

4. Add Hover Effects

If you want your site to be more interactive and user-friendly, make it clear when a user can take an action. That might include changing the appearance of text when a site visitor hovers over it. You can easily add this effect with simple coding, such as this:

.entry h2{

font-size:24px;

color:#00000;

font-weight:600;

}

.entry h2:hover{

color:#FF0000;

}

Just sub in the colors and changes as you’d like them to appear.

5. Optimize Images

Optimized images load more quickly for site visitors, improving your bounce rates and delivery. One quick way to optimize images in WordPress is to add Smush image compression plugin to your website. Anyone on your team can then easily compress the image with the click of a button, so the page loads quickly and smoothly for your users.

6. Stick With Three Colors

If you want to avoid your website getting too busy, stick with no more than three colors in your palette. Some of the biggest companies have gone to a two-color plus white-and-black scheme, so you can also jump in on that trend to create a simple, but professional-looking theme. Using fewer colors also allows you to work in a simple logo and add a pop or two of color.

7. Check for Alt Tags

Missing alt tags impact everything from search engine ranking to the ability for those with visual impairments to understand the elements on your page. While you might have the best intentions of adding alt tags and descriptions to each image, it’s easy to miss one here and there. Use Screaming Frog to crawl your website and find missing alt tags. Plugins and extensions will also do this task for you.

8. Speed up Your Site

The speed of your site impacts how well the end user receives it. If it doesn’t load quickly, you risk losing visitors who grow frustrated. Chrome offers an extension called YSlow that helps you check how quickly your website loads and offers suggestions for how to speed it up.

9. Automatically Resize Images

Pasting images into an image editor, figuring out what dimensions work best and re-inserting the graphics back into your design can take hours and hours of work. One way to speed up the process considerably is to use some basic coding with images that need to fit a certain space, but that you can resize proportionally. Use this code:

img {

max-width:100%;

height:auto;

}

The image will then fit into the space and resize itself automatically, saving you precious time.

10. Web Developer Checklist

As a web developer, you probably are aware of some best practices. However, remembering to check every element that can negatively impact your site isn’t always easy. That’s where Chrome’s Web Developer Checklist comes in handy. It will let you know if you’re missing out on any best practices for web design.

11. Select Tools in Photoshop Quickly

If you’ve used Photoshop to create designs, you know moving from one tool to another takes up a lot of time. Finding a shortcut to switch tools speeds up your process and makes you more productive as a designer. For example, if you find yourself switching to the hand tool often, just hit the spacebar on your keyboard to automatically return to that tool.

12. Add Drop Caps

If you’re creating a magazine-style website, adding drop caps to the beginning of articles gives the site the appearance of a print publication. You can add this feature with a plugin, but when coding manual, use this:

p:first-letter{

display:block;

float:left;

margin:4px;

color:#FF0000;

font-size:200%;

}

You can adjust the color of the capital letter under “color,” adjust the margin around the letter under “margin” and adjust the size of the drop cap under “font-size.”

13. Practice Keyboard Shortcuts

Some keyboard shortcuts are universal for Windows and Mac. To save time, learn shortcuts for tasks you use frequently. For example, if you often need to select all text and graphics within an application, Ctrl+A highlights everything. The home button on your keyboard takes you to the beginning of a line, and the end button jumps the cursor to the end of a line. Select either the home or end button while holding down Ctrl, and you’ll go directly to the beginning or end of the document.

14. Check out Sizing

Take time to look at your website in different browser screen sizes. A Chrome extension such as Resizer makes this task fast and simple. Just choose the size screen in which you’d like to preview the website. Test your layouts for all your users and adjust as needed.

Develop Your Own Hacks

Experienced designers develop shortcuts that help them work quicker. Hidden hacks, plus a bit of creativity and experience, allow designers to churn out unique websites specifically to suit each client’s needs. These 14 cool web design tricks are great to start with, but you’ll also want to develop personal hacks over time.