Snippets That Recreate Board Games in the Virtual World

Board games are a favorite pastime for all ages. When you think about it, they were the original portable gaming systems. Take one over to a friend’s house or get the family together for a game night. You can play anywhere, anytime.

And their impact may be greater than you’d think. They’ve played a role in helping us develop decision-making skills and learning to follow the rules. So many basic life lessons, all wrapped up in something fun.

Here, we’ve put together a collection of online homages to some popular board games. Some are playable, some aren’t. But they all feature some compelling design and coding techniques that are worth a look. And if you happen to spend a few hours playing games, all the better!

Checkers, Anyone?

One of the simplest games is also among the most enjoyable. For this playable example, you’ll want to grab a friend (or try to outsmart yourself). As with the physical game, the red and black teams take turns. As you click on a checker, your options for moves are shaded on the board. Fans of Connect 4 will also want to check out a similar snippet.

Dynamic Chutes

Among the very first games I learned as a child was Chutes and Ladders. It’s incredibly basic and makes for a great introduction to playing games. Even better was that I got to pass along the tradition to my own child. Here, we have a dynamically-generated game board. Each time you refresh the page, the paths change.


A two-player game that can be traced back to the 7th century, Mancala is one of the oldest on Earth. Surely, its earliest players never envisioned playing on a screen. But this interactive example allows you to do just that. Try to collect your opponents’ pieces and see who comes out on top.

That’ll be $1,000, Mr. Monopoly

Nothing teaches you about the benefits of a good investment quite like Monopoly. That feeling you get when an opponent lands on one of your properties – you know you have them right where you want them. This masterfully recreated game board was built with CSS Grid and looks exactly like the real thing. You can almost hear the dice rolling.


It takes a steady hand to play Jenga. One false move and your carefully-crafted tower goes to pieces. Frustrating, indeed. But there’s no pressure here. This Jenga-inspired loading animation simply puts together a tower using Vue.js. Sure, it comes apart at the end. But at least there aren’t little wooden logs all over the floor afterwards.

Top Tiles

Scrabble seems to be both universally loved and timeless. It also provides a great way to both learn and, ahem, invent words. As a tribute to the great game, here are some very detailed letter tiles. Notice the fine woodgrain textures. And, if you want to ensure that a word that you’re playing is valid, this simple dictionary will help.

You Sunk My Battleship

Back in the day, Battleship seemed almost high-tech. You had all of these little pieces and, if you were lucky, a board that made sounds (that really made things fun). There are a ton of Battleship-themed snippets out there. However, this one had a wonderful simplicity that lends itself to online play. Type in a letter/number position, click the arrow and find out if you’ve made a hit.

Risky Business

The game of “strategic conquest”, Risk takes a real time commitment to play – not to mention a smart strategy. It even inspired an episode of “Seinfeld”. The game’s complexity makes this snippet all the more impressive. Play against AI and see if you can rule the world.

Game On

Because board games have had an impact on our society, they also make for a terrific playground for developers. The simplest games allow you to test your working knowledge of CSS and JS. They provide you with a knowable and realistic end result to work towards.

As your knowledge grows, you can then move on to some of the more complex games and add in extras such as artificial intelligence. Regardless of your level, these games can help you sharpen your skills while having fun at the same time.

The post Snippets That Recreate Board Games in the Virtual World appeared first on Speckyboy Web Design Magazine.

How to Create Compelling Content for Your Portfolio Site

We web designers are often great at helping our clients develop a winning content strategy. But our own websites? That can be a different story.

Quite often, we’re so focused on helping others that our own sites suffer. That can have a negative impact on your business. Without compelling content of your own, it can be difficult to win over new clientele.

It’s not so difficult, however, to spruce up the content on your site. All it takes is setting aside some time to do the work.

So, clear an hour or two from your busy schedule and follow these tips for creating great content.

Note that our focus here won’t be on listing your projects or styling them in some unique way. Rather, we’ll look at the other areas of a designer’s site that are often neglected. Yet, they’re just as important.

Tell Your Own Unique Story

Sometimes, it can feel like if you’ve seen one designer’s site, you’ve seen them all. So many of us tend to follow the same formula. But prospective clients want to know what separates you from the competition.

Therefore, it’s important to make yourself stand out. To do so, take advantage of your company’s most unique asset: You.

While other designers may have similar skills, they haven’t had the same experiences. They also don’t have your character traits or your signature style.

So, instead of settling for generic “marketing speak”, show the world who you are. Talk about your passions and how they inspire your work. Share why you love your job and what led you to become a business owner. Use imagery and colors that reflect your personality. Post a photo of your family or a favorite pet.

For some of us, it can be difficult to market ourselves in this way. In my case, it took a while to become comfortable with putting myself out there as a “brand”. But it can be an incredibly effective way to reach your audience.

The key is to show your human side. After all, you’re not just a robot writing code all day. In essence, anyone can do that. By allowing people to share in your journey, you’re making a more personal connection. In turn, this provides visitors with a more positive vibe than a standard corporate website.

A fountain pen writing on lined paper.

Position Yourself as an Expert

Of course, sharing your love of video games alone won’t have clients beating down your door. You also need to demonstrate that you know what you’re doing.

Again, it’s best to avoid generalized skill descriptions. For instance, those ever-present graphs that tell the world you’re 50% proficient in CSS won’t help your prospects. If anything, they’re a major turn-off: Why would anyone want to hire a web designer who doesn’t fully understand CSS? It sends the entirely wrong signal.

Instead of simply listing your strengths, it’s wise to do something a bit more creative. Having your own company blog, for example, can be a terrific way to showcase what you know.

Indeed, it’s hard to find the time to write entries (my own experience confirms it). But there’s no need to pressure yourself. Even if you can only write a few posts per year, that still counts as original content. And, they may just bring in some new visitors via search engines and social media.

As for subject matter, write about what you know and the experiences you’ve had. Maybe you just learned something exciting at a conference. Or perhaps you recently helped a client improve their online sales.

You don’t have to go incredibly in-depth or get too technical. Something short and to-the-point is often the better way to go and can be quite effective.

Books on a library table.

Honesty in Service

One of the more disappointing events in a web designer’s life is opening an email from a prospective client, only to find that they’re looking for something you don’t offer. The sound of cash registers ringing quickly turns to those horns of despair from the Price is Right.

While you might not be able to fully rid yourself of such emails, you can lessen them quite a bit. Surely, you’ll want to list the services you provide somewhere on your site. But it might also be worthwhile to point out any specific services that you don’t offer, as well.

It may sound like an unusual step – and it is. However, showing that honesty in what you are and aren’t willing to do serves two purposes. First, it helps to avoid any mutual wasting of time. Second, it positions you as someone who is truthful and trustworthy.

As a personal example, I like to mention the fact that I don’t generally take on the maintenance of sites that were built by someone else. It’s not a situation that I feel comfortable with and I state it upfront. This has not only cut down on the number of those types of requests I receive, it has also started some conversations that led to redesigning a site for a new client.

Sometimes it feels like honesty is sorely missing in our society. By providing it, you’re increasing your chances of forming a great relationship with your clients.

Provide a More Genuine Experience

Put yourself in a client’s shoes. Who would you trust more? A web designer who shares their knowledge and invites you to learn more about who they are? Or what about someone who just throws tired slogans and meaningless buzzwords at you?

It stands to reason that people are more likely to work with someone who is genuine. A great website is an investment, after all. If you’re going to spend your hard-earned money, you’d want someone you can trust and that has the experience to do the job right.

These are the qualities that need to come through in your portfolio website. Show visitors who you are and give them a reason to become clients.

The post How to Create Compelling Content for Your Portfolio Site appeared first on Speckyboy Web Design Magazine.

Weekly News for Designers № 463

CSS Frameworks Or CSS Grid: What Should I Use For My Project? – The pros and cons of using frameworks in the era of CSS Grid.
CSS Frameworks Or CSS Grid: What Should I Use For My Project?

A Netflix Web Performance Case Study – Reducing the time-to-interactivity for users of the streaming service.
A Netflix Web Performance Case Study

Why are tech companies making custom typefaces? – A look at the benefits of investing in custom fonts.
Why are tech companies making custom typefaces?

Enquirer – Create stylish, user-friendly CLI command prompts.

PALX – An automatic UI color palette generator.

How to design a payment form your customers will actually complete – More user-friendly forms can mean more conversions.
How to design a payment form your customers will actually complete

Resources for Learning React – Places you can learn React.js – some are even free!
Resources for Learning React

Access Denied: 403 Page Code Snippets – Creative examples of 403 pages that go beyond the ordinary.
Access Denied: 403 Page Code Snippets

The Role of Design in Silicon Valley – Hear from design-driven tech companies in the San Francisco Bay area.
The Role of Design in Silicon Valley

Editorial Layouts, Floats, and CSS Grid – Despite the awesomeness of CSS Grid, there is one thing missing.
Editorial Layouts, Floats, and CSS Grid

Page Flip Layout – A beautiful magazine layout with a flat page-flip effect.
Page Flip Layout

Creating Excellent UX Flow Charts – A user-friendly way to illustrate complex processes.
Creating Excellent UX Flow Charts

Nerd Fonts – A project that patches developer targeted fonts with a high number of glyphs.
Nerd Fonts

Glider.js – A fast, responsive native scrolling list plugin with paging controls.

Should You Sell Web Hosting Services to Your Clients? – Things to consider before you offer hosting services.
Should You Sell Web Hosting Services to Your Clients?

The “C” in CSS: The Cascade – Understanding what the cascade does and how to leverage it.
The “C” in CSS: The Cascade

Fast load times – A guide to optimizing your website for peak performance.
Fast load times

Navigating the (Sea)SS: How to take your CSS to the next level – A look at tools and techniques that help you do more with CSS.
Navigating the (Sea)SS: How to take your CSS to the next level

25 Free Folder Icons – Download this collection of attractive folder icons in vector formats.
25 Free Folder Icons

Squoosh – Optimize your images, right in a web browser.

CSS and Network Performance – Techniques for loading CSS in a performance-oriented way.
CSS and Network Performance

Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.

The post Weekly News for Designers № 463 appeared first on Speckyboy Web Design Magazine.

Best 10 HTML Templates You Can Use For Any Purpose

Black Friday is coming and we are happy to announce the biggest sale of year: 50% OFF at TemplateMonster Marketplace. The Deal will be live during Nov, 19th – Nov, 29th, 2018.

In this post, we are going to cover the best 10 HTML templates which are considered to be the most convenient in use among other types of themes. They all can be easily customized using HTML editors including Notepad. HTML templates are suitable for both personal and corporate purposes offering a wide range of web elements, UI components and blocks, premium plugins, and custom widgets. Most of the themes contain a bulk of ready-made pages, so you have an opportunity to opt for the ones that suit your needs.

Go directly to: Chameleon | SEO Agent | Ready Pro | Alice | Daffy | Crystal | Brave Light | Encode One | Science | Azzara

Meanwhile, Bootstrap in a core makes the templates mobile-friendly allowing your site to quickly adapt to any modern device with any screen size. Such animation effect like Parallax gives your visitors an illusion of depth in 2D environments of your website. Animation effects and transitions encourage the visitors to stay at your web page for longer to learn more about your project. The themes are usually equipped with blog layouts which help you make your site look more reliable. The integrated working web forms like contact form and newsletter subscription form let your customers stay in touch with you and updated on the latest news of the website. If you want to find out more about the rest of the features, feel free to check out short previews of the templates we list further. You may also open up demos prior to choosing the exact theme you need.

Title Main Features Price
Modern Bootstrap 4 WebApp & Dashboard HTML + UI Kit Admin Template
  • 3 pre-built Templates
  • RTL support
  • 2 niche Dashboards
  • Starter kit
€ 24
BUY on TemplateMonster
SEO Agent
SEO Website Responsive Website Template
  • Bootstrap 3.3
  • Parallax animation
  • 50+ ready-made HTML5 pages
  • 5 Blog layouts with Blog Timeline
€ 62
BUY on TemplateMonster
Ready Pro
Bootstrap Dashboard Admin Template
  • Responsive design
  • Over 100 Components
  • Bootstrap in a core
  • 17 customized Plugins
€ 19
BUY on TemplateMonster
Application Multipurpose HTML5 Website Template
  • 25+ ready-made HTML5 pages
  • High res topical images for free
  • Working web forms
  • Bootstrap 4 in a core
€ 62
BUY on TemplateMonster
Multipurpose Bootstrap + UI Kit Admin Template
  • Pre-made dashboards
  • Rich UI kit
  • Bootstrap CSS Sass Framework
  • Mobile-friendly layout
€ 19
BUY on TemplateMonster
Bootstrap 4 Dashboard Admin Template
  • Twitter Bootstrap 4 Framework
  • Over 3 Chart Graphs
  • Clean and valid code
  • Fully responsive design
€ 19
BUY on TemplateMonster
Brave Light
Creative Universal Multipurpose Website Template
  • UI Elements and Blocks
  • 45+ ready-made HTML5 pages
  • Various working web forms
  • 4 Blog layouts
€ 62
BUY on TemplateMonster
Encode One
Bootstrap 4 .Net Core 2.1 Admin Template
  • Multilingual and RTL support
  • jQuery plugins
  • DataTable server mode
  • Calendar integration
€ 16
BUY on TemplateMonster
Multipurpose HTML5 Website Template
  • 30+ ready-made HTML5 pages
  • 4 niche layouts
  • 8 Header and Footer variations
  • 2 Blog layouts
€ 62
BUY on TemplateMonster
Bootstrap Dashboard Admin Template
  • Responsive design
  • Over 200 Components
  • Bootstrap 4 in a core
  • 24 customized Plugins
€ 16
BUY on TemplateMonster


Chameleon - Modern Bootstrap 4 WebApp & Dashboard HTML + UI Kit Admin Template
Details | Demo

If you are looking for an option for project management, analytics, fitness, CRM, or other web applications, Chameleon is right what you need. It is supplied with 3 pre-designed templates, 2 niche dashboards, distinctive menu layouts, and other features that can be found below:

  • Over 500 pages, 100+ components, and 50+ custom widgets.
  • RTL support.
  • Responsive design.


SEO Website Responsive Website Template
Details | Demo

This fully responsive template built with Bootstrap 3.3 has been designed to adapt to any screen size and resolution. It comes with over 50 pre-styled pages, numerous header and footer layouts, and other steep features you can find further:

  • Parallax animation.
  • Grid, cobbles, and masonry gallery types.
  • 5 Blog layouts with Blog Timeline.


Ready Pro Bootstrap Dashboard Admin Template
Details | Demo

If you need to create panels for web applications or backend panels, Ready Pro is good to go. Based on Bootstrap 4 Website Templates it comes with over 100 components, 17 customized plugins, a quick sidebar, and other elements:

  • Email App.
  • Messages integration.
  • Periodic updates.


Application Multipurpose HTML5 Template
Details | Demo

Alice is a multipurpose theme built with Bootstrap 4 and suitable for any apps development project. Going with this clean template, you will find everything needed for building a fully-fledged website, e.g.:

  • A variety of HTML5 pages for different purposes.
  • Megafooter.
  • Steep CSS3 animation effects and transitions including Parallax.


Daffy - Multipurpose Bootstrap + UI Kit Admin Template
Details | Demo

Daffy is a powerful UI kit admin template based on Bootstrap and supplied with multiple UI elements, forms, charts, widgets etc. Being mobile-friendly and easy to customize it also features 90+ ready-made HTML pages and much more functions intended to help you create UI for your dashboard:

  • 6 predefined header themes and 8 predefined color parameters.
  • RTL support.
  • The whole set of e-commerce pages.


Crystal - Bootstrap 4 Dashboard Admin Template
Details | Demo

Crystal is an admin dashboard template based on Twitter Bootstrap 4 framework and suited for CRM, real estate, e-commerce, and other management projects. Featuring a complete set of UI components it also provides jQuery plugins, a variety of charts, graphs, and other options listed further:

  • GULP package management.
  • Limitless color options.
  • FontAwesome icons etc.


Universal Multipurpose HTML Template
Details | Demo

Brave Light is another multipurpose web template including multiple ready-made pages for all occasions, a set of UI elements and blocks, and many more. With this theme, you can fresh up the design of your existing website and add the advanced functionality to it with the help of the following features:

  • A variety of working web forms.
  • 4 Blog layouts.
  • E-commerce page templates.


Encode One - Bootstrap 4 .Net Core 2.1 Admin Template
Details | Demo

Meet this professional admin dashboard template for your custom admin panel, project management, or application backend project. Except for a Bootstrap framework in a core, Encode.One offers multilingual and RTL support, calendar integration, and other:

  • FontAwesome icons.
  • TinyMCE Editor.
  • Razor pages and views etc.


Science Multipurpose HTML5 Template
Details | Demo

Going ahead with Science HTML template you will get an opportunity to focus on details of your website content. This multipurpose theme features a variety of page layouts, menus, custom backgrounds, and other options that can be found below:

  • 4 Niche Themes.
  • 30+ ready-made HTML5 pages.
  • Light and Dark versions.s


Azzara - Bootstrap Dashboard Admin Template
Details | Demo

Try this stylish Bootstrap based admin dashboard template with the soft color scheme, wide cards, unique fonts, and graphics. Within the package, you will find more than 200 components, 24 customized plugins, optional e-mail, and messages applications, and much more listed below:

  • Fully responsive layout.
  • Quick sidebar.
  • Board application etc.

With no doubt, a variety of themes gathered on TemplateMonster marketplace are popular among web users. If you already have a website and want to jazz it up, or just tend to launch the one, try HTML templates. You will be surprised about how easy it is to edit and customize it. We hope that you’ll be able to find the appropriate theme for your web project. In case the choice is challenging for you, feel free to contact the support team at for a further assistance.

10 Beautiful Nature Inspired Code Snippets

Nature has been a source of design inspiration since the beginning of time. Its beauty touches everything from the clothes we wear to the gadgets we use.

So, it’s not a big stretch to say that nature plays the role of muse in web design. Colors and patterns can reflect those of a stunning plant or animal species. Sometimes the likeness is subtle, while other homages can be very recognizable.

Let’s take a look at some code snippets that, in one way or another, reference nature. They’re great examples of how the natural world makes its way into the digital.

Pure CSS Jellyfish

Jellyfish are among the most amazing sea creatures. Their long tentacles and semi-transparent bodies are fascinating. Watching one float along is a mesmerizing experience. Here we have a colorful representation of a jelly using only HTML and CSS. You get all the beauty, but without the risk of a nasty sting.

A Walk Through the Forest

Nothing is quite as awe-inspiring as a hike in the forest. Seeing the tall trees, hearing the sounds of animals in the brush – it brings us closer to nature. This snippet recreates the visual effect in a sort-of Super Mario kind of way. Your cursor controls the direction of your journey and some settings let you customize the scene.

Mountains Upon Mountains

Images of mountains and the freedom they represent are used to sell everything from outdoor gear to ice-cold beer. This is a bit of a different take. It’s an interactive line drawing that changes as you click. The images offer an artistic style somewhat reminiscent of the old a-ha music video.

The Real Thing

Looking for a more literal take on nature? This example of parallax mountains is quite realistic. Move your cursor and the perspective shifts. The use of particle animation to generate snow makes the scene all the more compelling.

Speed and Power

Cheetahs are the very definition of speed and power. They’re often used as a reference point for something that is beautiful, yet packs a punch. This animated nighttime scene offers a silhouette of the great cat streaking through the grasslands.

Tropical Beauty

As mentioned earlier, implementing nature-inspired designs can be a bit subtler. That’s on display here with a beautifully done parrot-themed background for this quote generator. The hues of tropical birds are one of nature’s most eye-catching wonders. Thus, they make for excellent backgrounds.

3D Leaves

This highly-detailed and subtly-animated leaf background really sets a mood. It’s reminiscent of being out in a tropical breeze on a warm night. The timing of the animation provides a realistic effect. So, who else needs a vacation?

Choose Your Season

Depending on where you live, seasonal changes can be dramatic. Here’s a fun simulator that uses CSS variables, JavaScript and SVG to let you change a tree to reflect the season of your choice. Move the slider and the leaves will turn from a spring-like green to an autumnal orange, then disappearing altogether.

And a Sloth

This example has no deep meaning. Sloths are just beautiful, gentle creatures and it’s hard not to smile when you see one. So, sit back and enjoy this blinking CSS sloth!

Natural Selection

Adding a bit of the natural world to our web projects is a great way to gain user attention and evoke an emotional response. Whether it’s a happy sloth or a subtle background pattern, there any number of ways that nature can fit into our work.

The post 10 Beautiful Nature Inspired Code Snippets appeared first on Speckyboy Web Design Magazine.

Should You Sell Web Hosting Services to Your Clients?

Web design is an industry that is loaded with opportunities for upsells and extra revenue. Odds are that your clients will benefit from services that go beyond basic design and development. However, just because you can offer extras doesn’t necessarily mean that you should.

One such area is web hosting. While there is the potential to make some (fairly) easy cash, there are some serious considerations. To do things right, it takes a long-term commitment. Plus, it adds an extra layer responsibility to your workflow.

So, before you add hosting to your services list, think about the following:

Where Will You Host Client Websites?

The first thing to consider is where your client sites will be hosted. For instance, do you want to build your own server or lease one from a third-party provider?

Administering your own web server can be very time-consuming. You need a certain level of expertise to keep things safe and secure. That’s why freelancers typically go the route of leasing server space from an established company. It can be better on your stress levels and your wallet.

Still, there are some risks in going with a hosting provider. You’re giving up a certain level of control. In addition, you’re taking a leap of faith that this company will keep things running smoothly. And you’ll want them to be there for you when there are problems.

Therefore, it’s important to pick a hosting provider that you have experience with. It’s crucial to know what you’re getting into and who you’ll be working with. This doesn’t guarantee a problem-free experience, but you will have some extra peace of mind.

A server and networking cables.

The Setup

Beyond that, the setup of your hosting space is also worthy of consideration. While the server’s OS, version of PHP, etc. is important, it’s only part of the story here.

Technical specs aside, you’ll want to think about how you’ll manage everything. Will the host’s control panel, for example, enable you to host multiple sites? Will it allow you to delegate access to individual clients, or is everything reachable only by a single admin? Is email included in the package?

All of these items represent the day-to-day maintenance you’ll be responsible for providing. You may be the one creating email addresses and tweaking account settings. In the short term, that may not be an issue. But over time, it can become a burden.

The Inevitable Losses

Clients don’t stay forever. They can move on for any number of reasons. This can be a bit of a problem when you provide hosting. If they no longer want or need you to maintain their site, should they stay on your server?

Sometimes this situation works itself out. In instances where your client moves on to another designer, they may decide to move their website as part of the transition. But that’s not always the case.

It may be wise to try and sever that relationship completely, rather than hanging on to their hosting revenue. The little bit of money you make isn’t usually worth the awkwardness of dealing with a client (or their new designer) after the fact.

If you do offer hosting, prepare yourself for those clients who come and go. It’s only a matter of time before you face such a situation. Therefore, it’s better to have a policy in place when it happens.

A street sign that reads, "Time To Say Goodbye".

What if Something Happens to Your Business?

Nobody likes to think about these things, but life is unpredictable. Your business may not last or your life may change unexpectedly. Offering web hosting could further complicate your situation.

Again, this is where server setup is important. If clients don’t have access to their data and/or they pay you directly for service, you need to have a plan in place so that they won’t be left in the cold. This can be difficult if you’re a solo entrepreneur.

One possible solution is to have some documentation that a friend, colleague or family member can reference if needed. That way, there is at least some method for clients to get what they need and move on.

Providing Support

Let’s say that you’re reselling server space that you’ve leased from a provider. Then, one of your clients has an issue. Or maybe there’s a massive outage that has knocked out all of your client sites. Who do they call?

The most likely answer to this question is: You. Quite often, hosting companies only provide direct support to the person whose name is on the account. When there’s a problem, that means you are the one who has to act as a go-between.

The process of communicating back-and-forth between your client and the web hosts’ support staff can be frustrating. It’s the one area of responsibility that can make or break your decision to offer hosting. If you pick a host that runs into frequent problems, it can also destroy your profit margin. Think long and hard about what you want to do here.

There Are Rewards, Too

Reselling web hosting can provide you with a healthy source of recurring revenue. In turn, this puts you on more stable financial ground. Another bonus is that you’ll know exactly what kind of server environment your clients are on. This makes it easier to run your preferred CMS, plugins, etc. That continuity can lead to a more efficient workflow.

There are a lot of potential benefits to be had. However, this is not something you want to dive into without careful consideration. Think of the pros and cons and, if you decide to move forward, plan ahead to set yourself up for success.

There will undoubtedly be challenges along the way. But the more prepared you are, the better your outcome will be.

The post Should You Sell Web Hosting Services to Your Clients? appeared first on Speckyboy Web Design Magazine.

10 Useful JavaScript & CSS Tools to Enhance Your Forms

Forms are an essential part of just about every website – yet, we don’t always pay too much attention to their finer details. There are a number of things that can be done to improve them, such as adding validation, input masks and other visual guides. And that’s only scratching the surface. The end goal is to make them both attractive and as easy to use as possible.

Here are 10 free tools you can use to make your forms the best they can be:


formbase is a package that uses CSS/SASS to bring improved default styles to your form elements. The styles are cross-browser compatible and make for a better UX.



Foxholder is a collection of 15 different placeholder animations to enhance your forms. When users interact with an input, an animation is triggered. It’s a neat way of ensuring that users will know exactly where they are on your form.



dirrty is a jQuery plugin that can detect whenever a form field has been modified. When a change is detected, the user will be prompted to save changes to the form.



Make form input data like dates, phone numbers and currencies super easy for users with Inputmask. When a user interacts with a defined input, a mask is placed in the field showing the exact formatting required. Not only does it show users the required format, it also ensures that the input data is valid.


jQuery Validation Plugin

The jQuery Validation Plugin is a highly-customizable tool to help with validating form data. Out of the box it supports both URL and email validation. It even comes with an API to allow developers to add their own spin.

jQuery Validation Plugin

If you’re looking for more jQuery validation libraries, take a look at this collection.


Field dependencies are great for tasks like making sure that the user only sees the fields that are relevant to them and also can be a means of validation. dependsOn is a jQuery plugin that will allow you to add dependencies to any form.



Using Choices.js, you can add some very attractive select box and text input features into your forms. This lightweight, vanilla JavaScript lets you create your own custom input templates.


Cascading Drop-Down Menu

Cascading Drop-Down Menu is a great solution for times when you need a form that requires the user to select several steps. For example, think of choosing a car. You’d select the make, then the model, then the year and so on.

Cascading drop-down menu


Multipicker provides a visually-appealing way for users to select multiple items (similar to a checkbox) or a single item (similar to a radio button) in a list. It can be used with those aforementioned form elements or even HTML elements like an unordered list.


jQuery Form Plugin

Upgrade your standard HTML forms to use AJAX with the jQuery Form Plugin. The plugin features lots of options to allow you to take full control over how form data is submitted.

jQuery Form Plugin

Great Forms = Great UX

The combination of a form that looks great, is easy to use and assists the user in entering data is one that results in a better conversion rate. Adding one or more of the tools above into your workflow can help bring your forms up to snuff.

The post 10 Useful JavaScript & CSS Tools to Enhance Your Forms appeared first on Speckyboy Web Design Magazine.

Does A Designer’s Opinion Mean More Than The User’s?

Okay. I’m going to come out and say it. Designers are often way too territorial about their designs. It’s only natural, of course. You spend years and years developing your design skills, you create the ideal process for your ideal user to follow so that (you’re certain) they will get the best experience possible.

But here’s the thing: users may not stick to your original vision of how your design “should” be used. The truth is, they don’t have to, and, if your views on their user experience are off the mark, they shouldn’t.

We look at some ways in which users often give designers a run for their money when it comes to the ideal user experience, and explore whether a designer’s opinion means more than the user’s.


Technicality Versus Practicality

Sometimes, there is a clear battle between the designer’s creative vision and what the user really wants. This can be seen in major corporate projects as well as individual website designs for a single client. Designers, by virtue of being creative professionals, often let their ego get in the way of creating a truly functional product. Some of this is justified. After all, you want to maintain your reputation for quality, both functionally and visually.

But, as the saying goes, form follows function. You don’t want to get so caught up in maintaining your design’s visual appeal that you lose sight of what’s best for the user. The best way to avoid this pitfall is to regularly interact with your target audience. Talk to people who interact with your website, app, or other designs. Ask them questions about their experience – what they feel could be improved, how your design is helping them achieve solutions to their problems, et cetera.

This knowledge will be invaluable not just to your users and your clients, but also for expanding your career as a designer who really “gets” the ideal user experience.

Co-Opting Your Environment

Users, by definition, use things. Sounds obvious, I know, but many designers forget this simple fact, or think it only applies to a narrow set of rules. But people who use things are amazingly adaptable. They use the world around them to create their own design solutions, if the ones provided aren’t satisfactory. All users have this ability – including you.

Yes, you routinely violate many designers’ perfect visions for how you should be using their products. Ever scribbled a phone number or email address on the back of someone’s business card? You rebellious user, you. From holding a supposedly “ergonomic” pen or tool in a way that’s unconventional, but more comfortable for you, to breaking out the sugru and physically altering a product to fit your individual needs, we all take advantage of what I call the user’s authority.

Following Leaders And Precedents

Once a design leaves your studio, it officially belongs to the user, and they will adapt it however they see fit. People use design to communicate with one another out in the world, often in ways that the designer never intended or even expected. Your design may end up serving a completely different purpose than what it was originally created for.

Think about the last time you gave directions to a tourist or someone in your town who was lost. You probably told them something closer to “head left at the intersection with the weird billboard,” rather than rattled off a dry list of street names. Design infiltrates our daily lives, and we use it as placeholders, markers, and guides every day.

Does The Design Slow Down Progress?

The most important thing to consider in any design is whether the user can solve the problem they have with the maximum amount of efficiency. If your design is impeding them from doing this, then it’s a failure as a design.

Again, talking to your target users will yield a wealth of information that can help you avoid this common crisis. I’m not talking about formal “focus group” style research either. Even something as simple as a 5 question email survey can help tremendously in the design process.

For example, if you don’t know that the majority of your users are skipping the calls to action that you’ve added to your website, pretty much the only way you can find this out is by interacting with them.

It’s unlikely that they’re going to tell you on their own, and, quite honestly, it’s not their responsibility to do so. You’re the designer – it’s your job to make sure that your designs are providing maximum efficiency for your users.

Building Up Trust

Well designed websites instill a sense of trust in the user. When you see a crappy looking website, your first instinct is that it’s probably a bit shady, or even an outright scam. Why? Well, because a legitimate business will usually at least make an attempt to have a professional looking front.

The post Does A Designer’s Opinion Mean More Than The User’s? appeared first on Speckyboy Web Design Magazine.

20 Inspirational & Creative Business Cards for Designers

The timeless business card is one of the most important marketing and networking tools a creative professional can possess. It not only delivers your personal brand to future clients, but it is also the first window of opportunity to showcase your skills as a designer.

How do you, as a designer, create a business card that successfully reflects your personality, your design speciality and professionalism? Well, the twenty designers below have all managed to do it. Without breaking the age old rules of business card design, they have all created memorable, creative and professional business cards that will leave their potential clients with no doubt that they will get the job done.

The Designer Toolbox
Unlimited Downloads: 500,000+ Graphic Templates, Actions, Brushes, Mockups & Design Assets

Hand-Drawn Llama Cards with Pink Edges by Shyama Golden
Hand-Drawn Llama Cards with Pink Edges

Homemade Business Cards by Vinslëv
Homemade Business Cards

Business Card Stamps by Jorgen Grotdal
Business Card Stamps

Business Army Knife Card by Anthony Cole
Business Army Knife Card

Served With Soul by Brian Steely
Served With Soul

Vintage Illustration Business Cards by Chris Elsasser
Vintage Illustration Business Cards

Duplexed Wood Veneer with Letterpressed Metallic Ink by Mackey Saturday
Duplexed Wood Veneer with Letterpressed Metallic Ink

Letterpress Business Cards with Red Edges by Nishant Kothary
Letterpress Business Cards with Red Edges

Letterpressed on the Front, Stamped on the Back by Colin Tierney
Letterpressed on the Front Stamped on the Back

Design Icons Business Card by Laura Fish
Design Icons Business Card

Retro Illustrated Business Cards 2014 by Jonas Soeder
Retro Illustrated Business Cards 2014

Letterpressed Business Card by Javier Garcia
Letterpressed Business Card

Bandito Card by Ryan Brinkerhoff
Bandito Card

Yik Yak Biz Cards by Daniel Haire
Yik Yak Biz Cards

Ask and I Shall Reply by Ella Zheng
Ask and I Shall Reply

FZ Media Letterpress Cards by Adam Trageser
FZ Media Letterpress Cards

Personal Business Cards by Olly Sorsby
Personal Business Cards

Bronze Metallic Ink on Authentic Playing Cards by Tom Lane
Bronze Metallic Ink on Authentic Playing Cards

Hundred Eyes Business Cards by Dustin Maciag
Hundred Eyes Business Cards

Get an old box, cut it, print stickers with contacts & you’re done! by Dima Krylov
old box

The post 20 Inspirational & Creative Business Cards for Designers appeared first on Speckyboy Web Design Magazine.

Access Denied: 403 Page Code Snippets

Web designers have gotten used to turning errors into opportunities. It’s no secret that the common, most widely occurring (and surprisingly recognizable) HTTP status code 404, aka “Not Found,” was forced by developers to bring benefits to the project. In the past it scared away users, destroyed the overall impression and was a nightmare for developers. Everyone wanted it to disappear once and for all.

Today, it is an essential detail of a website. WordPress even has a specifically assigned template for it. The “404 page” is an integral element of user experience. In the majority of cases, it has not only a beautiful design but also a theme that is aimed to contribute to the entire aesthetic of a website.

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets

Along with the well-thought-out design, interactions and even animations, it includes useful links and getaways that help lost users to get back on track. However, the “404” error in web design is like Hipsters in real world: They still catch our eye with their dorky glasses, “vintage” shirts and beards but they are nothing new to us. As for the “403” error, that’s a different story. It’s not as popular as its next of kin, but still, it occurs and not once in a blue moon.

Just for background, HTTP status code 403, aka “403 Forbidden”, means that you do not have permission to access the page. Reasons can vary, starting with inappropriate folder permissions and ending with a banal requirement of login credentials. Nevertheless, the rule of thumb dictates that any error is an opportunity to effect improvements. So why not turn the dummy “403 page” into a place that will serve the same duty as the “404 page”?

Let’s consider a dozen splendid takes on this type of error. They not only serve as a source of inspiration but also a source of ready-to-use solutions.

You Shall Not Pass

“You shall not pass” – was said once by one of the most powerful white-bearded wizards in the fictional world (I hope all the fans of Dumbledore forgive me for this). The final phrase of Gandalf the Grey (note Grey, not White) perfectly fits into the context here. And Noah Rodenbeek, A van Hagen and Jhey show this in practice. Their code snippets are impregnated with a spirit and charm of “The Hobbit” novel. While the first two artists re-created Gandalf with his staff, the latter just hinted at the scene, yet quite successfully.


If the motifs from fictional novels featured above are not enough for you, then you should set your eyes on this code snippet from Yasio. Surprise-surprise, he got his inspiration from George R. R. Martin’s series of fantasy novels. He has come up with a work called HODOR 403. I believe for the majority out there this solution is self-explanatory. For the rest, I recommend switching to HBO and seeing for yourself why this fictional character goes perfectly well with this type of an error.

Use of Illustration and Animation

Other solutions in our list were guided by the notion that “403” symbolizes a forbidden area so that animated and static CSS illustrations were recreated namely with this idea in mind.

Error 403 – Forbidden by Aimie depicts a classic scene from the fairy tale. The animated bats, witch’s house, bare trees and creepy typography that are featured in the hours of darkness certainly do the trick here.

403 Forbidden by Dylan and 403 Forbidden by Visual Composer have some unique medieval allure. “Close the Gates”: The projects evoke namely these associations. The first one features the classic wooden guard gate door that closes before your very eyes; the second one also goes for a guard gate topic and depicts a mechanism with cogs and chains that reveals the forbidden sign.

Arturo Wibawa’s vision of the forbidden area is presented via marvelous, highly-detailed and even partially animated CSS illustration of the famous Chinese ‘The Purple Forbidden City,’ aka Palace Museum nowadays.

It’s Watching You

403 Forbidden Page by Mariana is marked by a whimsical monster-like character that, thanks to direction-aware effect, follows your mouse cursor everywhere. It recreates a feeling of being watched all the time. It also imitates a fancy fairy guard that does not allow moving forward. The project feels fun in spite of the “menacing” look of the mascot.

Be Persistent

Gabriele Corti also offers a vision of a “403” error page. His “Persistence is a key” project depicts an entire process of initially denying access and granting it after the right user action. The right actions imply inserting a key into a keyhole Nevertheless, you can always use this concept as a base for some advanced actions like inputting login and password.

Keeping it Simple

403 by lsgrrd is an oversimplified take on a “403 Page” that certainly has a right to exist. It is minimal but straight to the point. It has a certain digital quality that oozes techno vibe inherent to the computer sphere. The blinking cursor at the end in tandem with the digital typography produces a fantastic effect. The solution is clean, elegant and straightforward.

Are You on the List?

We are going to end our collection with the project made by Cassidy Williams. Unlike the majority featured here, this solution is a metaphor from the real world that illustrates the typical situation in any popular nightclub. The bouncer is the heart and soul of this code snippet. The character was even partially animated to make everything look lifelike.

Another Opportunity to Engage Users

Truth be told, “403 Error” is not as widespread as “404 Error”, nor is it as popular and recognizable. Nevertheless, it still exists and occurs time after time. That creates a hole in a website that can break the entire user experience. So, seize the opportunity and turn it into a valid part of the project. It will undoubtedly win over some new visitors and will prevent you from losing the old ones.

The post Access Denied: 403 Page Code Snippets appeared first on Speckyboy Web Design Magazine.