7 Tips on Making Your WordPress Site Hack-Proof Without Changing a Line of Code

According to the latest statistical data, the number of WordPress-based websites in the United States is over 9.6 million. WordPress is the most popular open-source platform in the world, boasting a share of over 50%. It powers numerous types of websites, starting from blogs and job boards and ending with business directories and Q&A websites.

Such tremendous popularity, though, comes at a cost. Cybercriminals of all kinds try to break into WordPress-powered websites and, unfortunately, succeed far too often. The WPScan Vulnerability Database currently lists over 16,700 WordPress core, plugin, and theme vulnerabilities—enough for any hacker to feel hopeful.

The WordPress Security Team

That said, the WordPress Security Team is very strong. It includes 50 top professionals who constantly monitor the WordPress security shield and eliminate any weak spots in it. Watch this video to learn more about the Security Team’s working process.

Over the years, WordPress has become more stable and secure. However, making the system’s core less vulnerable to attacks is only part of the solution. The Security Team’s duties don’t include checking the themes or plugins available at wordpress.org. Anyone who’s willing and has enough time can review those. As a result, security breaches through plugins and themes are quite frequent.

The Most Common Threats to a WP Site from Hackers

Installing malicious software. Cybercriminals implant their code into a WordPress site’s files and use it to collect confidential data secretly.
Cross-site scripting. A hacker tricks a WordPress site user into loading pages with JavaScript code. The code steals private data from the site user’s browser and sends it to the hacker over the Internet.
Injecting SQL code. Once a criminal breaks into a WP site’s database, they can inject SQL code for creating a new user. Then, they can log in at any time and use the site’s files in any way they want without the owner suspecting anything.
Including PHP files. PHP is the programming language that allows WordPress to do all the great stuff it does. A hacker can find a way to upload their PHP scripts into a WP site’s directories and use those for their criminal purposes. This is the most common method of taking control of the crucial WP file wp-config.php
Brute force attacks. These mean bombarding the login screen with millions of nickname/password combinations in order to stumble upon the right credentials. What’s sad — this savage approach often yields positive results for the hacker.

While cybercriminals’ tricks may seem too clever for a layman to counteract, you can prevent many of them by applying 8 simple techniques we’ve described below. No knowledge of coding is required.

Essential Tips on Protecting a WordPress Site from Intrusion

1. Avoid Using a Weak Password

Let’s start with the essential measures to avoid brute force attacks. We can’t stress enough the importance of a good, hard-to-guess password. A password that only includes 6 random digits or characters is the surest way to losing your valuable data sooner rather than later. With powerful modern technologies, any hacker will be able to crack a password like that in no time.

A strong password means a well-mixed combination of digits, letters in lower and upper case, and special characters. View Google’s recommendations, for example.

Make your password unique and as unrelated to your life as possible. Avoid including your apartment number, spouse’s name, child’s birthday, or any similar information. Many people prefer coining a lengthy phrase instead of an arbitrary array of characters or numbers to make a hacker’s task more difficult.

Does coming up with a strong password seem an excessively challenging task? Then, use one of the numerous password generators like this one. Find it hard to remember passwords? Then, take advantage of this free tool to store them securely.

Finally, a password is not something carved in stone. Depending on how sensitive your data is, consider changing your password weekly or monthly.

2. Bring the Number of Login Attempts to a Minimum

Another way to protect your site against brute force attacks is to allow users to make just a few login attempts in a row. By default, WordPress doesn’t restrict users in the number of times they may try to sign in. Hackers adore this feature, as they can enter a multitude of username/password pairs into the login form in the hope of breaking inside.

Leaving one login attempt is not enough. Sometimes users forget to press the Shift key when necessary or enter a hyphen instead of an underscore. So give your users a chance to try to log in three-four times. If they fail, block them for a certain period.

How can you achieve that? Install the Limit Login Attempts Reloaded plugin. Then, go to Settings, select the plugin, and change the values in the fields under the Lockout category. You can increase the lockout time if more unsuccessful attempts are made after the first time a possible hacker has been blocked.

3. Select a Hosting Provider with a Strong Security Mechanism

When it comes to hosting, any business faces a big dilemma: pay less but get fewer features and weaker security, or pay more and get more features and stronger protection. If your budget allows it, we highly recommend spending more money on hosting that offers several security layers.

Otherwise, you’re running a risk of losing your data or letting crooks redirect your traffic to other sites. High-quality hosting companies perform daily scans for malware and monitor any attempts to gain unauthorized access to the hosted sites.

4. Implement an SSL Certificate

Transmitting data from a server to a browser over the Internet without an SSL (Secure Socket Layer) Certificate is like leaving your personal diary in a public place for everyone to read. An SSL certificate, on the other hand, allows you to encrypt all your data, making it impossible for cybercriminals to decipher.
There are two ways you can get an SSL certificate:

Purchase it from a provider.
Use the free Let’s Encrypt SSL certificate offered by your hosting company.

The paid option is preferable if you have enough financial resources. To get a better insight into the difference between a paid and free SSL certificates, read this post.

Installing an SSL certificate not only makes your WP site more secure but also improves its search engine visibility. Google considers ‘https://’ at the beginning of a URL an important factor and ranks the site higher.

5. Make Regular Backups of Your Site

Hackers are very inventive. Whatever measures you take to protect your WordPress site, there’s always a potential crack in the armor through which a criminal can get inside. So, it’s advisable to have a working copy of the website safely stored in a place where no one can get hold of it, like an external hard drive.

How often do you need to make backups? It depends on the scale of your business activities. For small and medium-sized companies, a monthly backup is probably sufficient. The sensitivity of information is also important in this respect.

There are some excellent backup plugins that make copying a site’s files easy and fast. One of them is BackWPup. It’s simple in operation and comes with a series of training videos to get you up to speed. You can plan and schedule backup jobs and push backup archives to an external storage service if you don’t want to store them on the same server.

6. Keep Everything Up to Date

Have a look at the long list of WordPress versions that have been released since 2003. Every new version added something to the core functionality of the CMS including security patches.

That’s the reason why updating the WordPress core as well as its plugins and themes is so important. It helps you avoid dangerous security breaches. In the same video about the WordPress Security team, Aaron Campbell says that the Team postpones the announcements about new security improvements closer to release dates so that hackers couldn’t use that information to their advantage.

While WordPress automatically performs minor updates, dealing with major ones is the user’s responsibility. So, keep track of the WordPress versions and update plugins and themes. To do this, go to the Plugins page and click the Update Now link next to a specific plugin if this link is available.

7. Monitor Your Website for Malware with a Security Plugin

Finally, installing a security plugin to monitor your website for any malicious software installation is a must. A person who’s not versed in coding may not even understand that a hacker has infected their WordPress site with bad code. A plugin, on the other hand, is capable of analyzing the files and detecting any code injected by hackers.

In our opinion, one of the best plugins for this purpose is iThemes Security. It has been installed on more than 900,000 sites and performs a wide range of functions. It blocks bad users, monitors the site and reports suspicious changes to the file system and database, hides common security vulnerabilities (e.g., changes the URLs for WordPress dashboard areas, including login and admin), regularly updates the WP database, and does other useful things.

Conclusion

The security of a WordPress website is not something to be taken lightly. Cybercriminals are always searching for new loopholes and trying to exploit them. The techniques we’ve listed above are essential for the health and safety of your site.

To make your WP site even more secure, tweaking its code is necessary. That job should be left to professionals. The Site Slinger’s highly skilled and experienced WP developers can help you with many WP-related tasks such as PSD to WordPress conversion. Tell us what you need and we’ll get it done.

Do Home Icons Matter on a Site?

Just how important is the home icon on your site? Does it even matter anymore, or is the symbol somewhat outdated and defunct? One of the most important aspects of an icon is the meaning behind that icon. Will people readily recognize what the icon means when they see it? Even the most beautifully designed home icon is of little use if the user doesn’t know what it does at a glance.

Although the meaning of various icons can be obscure, there are a few universal icons, such as the ones for home, print and search. The purpose of the home icon is to mark a clear path back to the home page of a website. This icon is something the user can click on from anywhere to start fresh from page one.

The fact that the home icon is such a universal symbol makes it vitally important to include in your website. If you want your site navigation to be simple and easy to understand, then you need to figure out how and if you should include a home icon on your website.

There are actually a number of different options you can use to signify a home button on the website. Which one you choose will depend upon the overall style of your website, how modern it is and even if it is a mobile friendly design.

Home Icon Style # 1: Home-Shaped Icon

An outline of a house has been a symbol for “Home” for many years. It can come in many different colors, patterns and outline styles.

It would be quite rare for someone not to know what this icon means, so the key when utilizing this type of home icon is to make sure it integrates with the overall design of your site. You can accomplish this by changing the color, size or outline style. For example, a site focused on products for kids might use an outline that looks like it was drawn with a crayon. On the other hand, a luxury spa might use a much more streamlined outline with straight lines.

Google+ uses a home-shaped icon to indicate the home button for Google Plus.

Home Icon Style # 2: Hamburger Icon

The hamburger icon can indicate navigation. When clicked on, a bigger menu drops down. Typically, the hamburger icon will be located in the upper right of the page, and the home link will be the top link within that navigation.

The hamburger menu is quite simply three lines that essentially represent a bottom bun, hamburger patty and top bun. With the increase in the number of Internet users accessing websites via their mobile devices, this has become an easily recognizable icon that doesn’t take a lot of space but indicates you can access navigation (including home, of course).

Some menu icons use text as well as the icon to indicate the navigation. For example, it might have the hamburger icon and state “Menu.” This makes it impeccably clear to the site visitor what the icon is used for.

However, anyone who has used a mobile device will likely recognize the hamburger menu easily and realize that by clicking on it, they can navigate home or elsewhere on the site. One in every 10 people in the United States who browse the Internet use only a mobile device, so this icon is likely to become more and more popular.

One good example of a hamburger icon done well is Animal Planet’s. Note how the icon is in the upper left and is easily recognizable. The second screenshot shows that when you click on the hamburger icon, you get a drop down menu, and the home link is the first one listed. The overall look matches the style and color of the entire website, too.

Home Icon Style # 3: Text Only Icon

Sometimes the best icon is no icon at all. Text within the navigation that simply states “Home” can get the message across. Another advantage of using text to indicate where the home link is located is that the page will load much faster than if the user has to wait for images to buffer.

One example of this use of style in a design can be seen at CJ Pony Parts. Note how the “Home” text is in the upper left of the page. In addition, it’s in red, so it’s easily spotted. This is a simple, but effective, design.

Home Icon Style # 4: Home-Shaped Icon with Text

You can overcome the uncertainty of what an icon is for by labeling it. You’ll notice this technique on a lot of websites. It simply makes it extremely clear what that icon is for. So, for example, you might add the outline of a house and place the words “Home” just under the icon.

In fact, it makes the website much more usable to add text to icons. While many websites add text under or next to a home-shaped icon, you could also go a bit further and put the text on the icon itself.

One example of this type of design can be found on the website Vivi LeDish. Note how the home icon also has the text “Home” on the roof of the icon.

Home Icon Style # 5: Unique Home Icons

Another idea is to use an icon that ties directly into your branding and overall design. This might not necessarily be in the shape of a house or have text. However, if you place the icon in the right location (upper right or left), your site visitors should be able to at least guess that this is your home button.

Some sites also use their logo as a sort of home button. One example of this would be Amazon.com. They use their Amazon logo as an anchor. Click on the logo, and you are taken to the home page.

An interesting example of a unique home button can be found on Carbonmade. The site uses a little chess piece emblem to serve as the home page icon. In this instance, they place the text “Home” directly under the icon. This makes it abundantly clear to the reader where to click to go to the home page.

One rule of thumb is that users should be able to figure out in five seconds or less what an icon means. Do some A/B split testing, and if your site visitors are struggling to interpret icons, you may need to tweak them to better suit your target demographic’s needs.

AUTHOR’S BIO: Lexie Lu, the author of this article, is a designer and writer. She constantly researches trends in the web and graphic design industry. Lexie writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Most Overused Web Design Trends to Ditch in 2016

Not sure which web design trends you should send to the scrap-heap this year? We’ve compiled a handy list to help you. Avoid these at all costs…

In the world of web design, it doesn’t take long for certain trends to get old. One minute, it’s the latest thing, gracing websites across the world. The next… it just looks dated and a little bit tedious. And, as we all know – there’s nothing worse than having a tired-looking design on your latest project.

Not sure which web design trends you should send to the scrap-heap this year? We’ve compiled a handy list to help you. Avoid these at all costs…

1. Don’t fall flat… get Flat 2.0

It’s definitely time to ditch flat design. Heck, even the word sounds uninspiring, doesn’t it? Instead, make the most of skeuomorphism and welcome ‘almost flat’ or Flat 2.0 into your life. It adds energy to your designs, not to mention a certain sense of vintage appeal – which in this day and age, never did any designer any harm. Want to find out more about why standard flat design is so last year? Read this.

2. Hero carousels – or villains in disguise?

We are very much over carousels. They’re bad for SEO, because the lack of content makes it difficult to pump meta data onto the page. They shove content way down below the fold. They’re bad for performance. In terms of ease of navigation, they stink.

In addition to this, they’re just plain inaccessible at times – which is a sure-fire way to irritate the user. We said the same thing about giant full-page splash screens, thinking the situation couldn’t get any worse – then some bright person decided to animate them. Groan. Let’s leave carousels firmly in 2015, people.

3. Skip sound – embrace the awesomeness of silence?

If one thing is guaranteed to make a site visitor scream with frustration, it’s music. It really doesn’t matter if it’s the most awesome song in the world. It’s irrelevant if it was number one in the charts for weeks. When it’s played on loop on a website, it becomes highly annoying, like a wasp at a picnic, buzzing away in the background. We presume that’s not the effect you wanted to create, right?

In addition to driving your audience mad, it’s also a curse for users on networks with a capped data plan – something they won’t thank you for. W3C say that automatic music is bad – which, let’s face it, is all you need to know. Find out more here.

You might be able to get away with the occasional animated or video background – but again, tread carefully and always think about user experience.

4. Long forms for short attention spans. No – just no

It’s astonishing how many big businesses still make the mistake of including lengthy forms on their site – in a bid to squeeze as much information out of the user as possible. However, this often has the reverse effect, causing people to abandon the forms halfway through.

If you’re using forms, keep them short, sharp and as intelligent as possible. Resist asking for information you don’t really need. Make your form as intuitive as possible – there’s nothing more frustrating for the user than having to fill out the form again because something’s gone wrong. If you’re looking for great form creation tips – check out this site.

5. Kill the pop-up

We don’t really need to slam this one home, do we? Pop-ups began to get annoying several years ago, yet it’s alarming how frequently they still ‘pop up’ in designs. Occasionally, use of pop-ups is unavoidable – for example if you’re promoting a product. However, if you must use them, please offer something good in return for your target audience – or risk their wrath.

The Next Web have some excellent tips on how to do pop-ups the right way. Read it and learn, guys.

6. Avoid background overload

We, designers, sometimes get a little obsessed with making our sites look pretty. However, when you choose style over substance, you risk affecting user experience – and not in a good way. If information on the page is difficult to locate, then your site isn’t doing its job properly, no matter how beautiful it might look.

In addition to irritating users, the lack of information could also do damage in terms of SEO, with limited meta data and an inevitably high bounce rate. Incorporate stunning backgrounds by all means, but remember what the site’s primary function is.

Have fun designing in 2016!

Happy Holidays from The Site Slinger!

The team at The Site Slinger would like to thank you for all your support in 2015! Have a rocking winter holiday and a prosperous New Year!!

Hey guys! The team at The Site Slinger would like to thank you for all your support in 2015! We’ve achieved many goals this year and we plan on making 2016 even more awesome for everyone: our great team, our amazing clients, and our lovely friends!

From the bottom of our hearts, we would like to wish all of you a fantastic 2016, and we certainly hope to continue working together for many more years to come.

As always, if you need swift, professional coding, you can leave it to us. Enjoy your last-minute holiday shopping and precious time spent with your families and friends. We’ll be working through the holiday season. Our office will be closed only for the New Year’s Day celebration on December 31 and January 1, and we’ll be back in full swing on Monday, January 4.

Our Special Gift for You

To add to the excitement of this magical time of year, we’re happy to offer a sweet $75 discount on ALL coding projects. Simply mention the following promo code in your project notes:

TSSNYPARTY

However, you’ll need to hurry! This offer ends on January 3.

Have a rocking winter holiday and a prosperous New Year!!

Sincerely,
The Site Slinger team

Unleash the Power of Email – Team with The Site Slinger

Now, when you place your next PSD to Email order with us, you can get three months of unlimited MailChimp services free, no matter what your current plan is!

Do you need another reason to team up with the best people in the industry? Well, here you go! The Site Slinger is a MailChimp-approved Expert, and we are pleased as punch to announce it! What does this mean for you? Three months of complete email marketing freedom! If you use MailChimp, this is the deal you’ve been looking for. If you’re new to MailChimp, then this is a great time to get started.

With The Site Slinger you get:

Email that looks great. We pay attention to the smallest details, down to the very last pixel.
Email that works great. No matter the screen size or email client, our templates load quickly and smoothly.
Email that sends great. Our markup can be easily integrated with all major email tools like MailChimp, ConstantContact, iContact, or Campaign Monitor.

Just Another Reason to Love The Site Slinger

Now, when you place your next PSD to Email order with us, you can get three months of unlimited MailChimp services free, no matter what your current plan is!

It’s easy as one, two, three:

submit your email project here
provide MailChimp the proof that you choose to work with experts: we just need your MailChimp username and your paid invoice for our services
get a confirmation from MailChimp.

Now get your newsletters out! Promote products, generate traffic, grow sales, all without spending anything! No MailChimp account? No problem! Just go to MailChimp and set up a new account. After you place your order with us, we’ll send your paid invoice with your MailChimp username to the MailChimp guys, and they will apply the deal to your account. Please note that the offer can be applied once per MailChimp account and it can only be redeemed towards email related orders only.

Successful companies rely on email campaigns because they work. Rely on The Site Slinger as your MailChimp Expert and unleash the power of email marketing for free for three months. It’s time to rock the inboxes!!

The Hottest Web Design Trends For 2015 So Far

Let’s take a look at some of this year’s most crucial web design trends. Each has its pros and cons, so choose from them wisely.

The best design advice one can ever receive is to never follow a trend blindly. First, check if each feature suits your industry and audience. Does it help you get your message across? How can you benefit from it? Here, I’ve collected some of this year’s most crucial web design trends. Each has its pros and cons, so choose from them wisely.

Mobile-Friendly

Making your site responsive and mobile-optimized became more important than ever, especially after Google rolled out its recent ranking algorithm update. It’s not just about RWD. It’s about rethinking your website’s look and feel. The trend is fast-spreading, but how often do clients order from you using their smartphones? Maybe it’s better to make sure your site looks stunning on larger screens?

Hidden Main Menus

Due to mobile screen limitations many websites hide their main menus on mobile devices when making their websites responsive. You can also see this element on many desktop site versions. Unfortunately, this solution is not quite user-friendly. Some of your audience may have difficulty finding it or understanding the icons. Sometimes, a more old-school way is better.

Scrolling vs. Clicking

Scrolling is much more convenient than clicking, especially on mobile devices. That’s why there are more websites with long pages and several screens of content. In some cases the whole website is turned into a single page. Such designs are often quite convenient for users, but they may become a real problem for SEO. Take SEO requirements into account. Maybe adding another page is not so bad?

Ghost Buttons

Ghost buttons are great. They are not quite call-to-actions, but rather a subtle way to attract users’ attention. To avoid being unnoticed, check the overall page layout from a usability point of view and test the visibility of your buttons.

Large Background Images and Videos

Yes, appealing, large background visuals add a powerful and elegant look to your site, yet not everyone goes for it. Why? First, such elements can be quite heavy and may overload browser cache. Second, in some cases texts and even whole menu items and menus become invisible because of the color scheme of the background image.

Oversized Typography

The bigger, bolder, better type was the trend of 2014 and it has maintained its popularity. It’s an efficient way to grab your visitors’ attention. It’s especially great if combined with large background images and ghost buttons. Just don’t forget about the copy. Your message should be short, catchy, and smart.

Storytelling and Interaction

Speaking of content, sometimes words are not enough. Let your website tell your story. With fancy animations and fun interaction ideas, you will make your clients say, “Wow!” This is not going to be easy though. Be prepared to compromise on things like accessibility, cross-browser compatibility, page loading times etc.

Trends come and go. The best thing to follow is common sense. Be careful and listen to yourself. Keep an eye on your competitors and get inspired with the leading brands, but remember that the main goal for most websites is to serve business needs of their owners (generate leads and sales) and not just bring fun to the visitors or win design awards.

Top 10 Free HTML Templates with PSD Included

When it comes to building a website from scratch, many bloggers prefer ready-made HTML templates. Why? It’s simple, just fill in the blanks with your content, and your site is actually ready to go.

When it comes to building a website from scratch, many bloggers prefer ready-made HTML templates. Why? First, it’s simple. Just fill in the blanks with your content, and your site is actually ready to go. Next, high-quality HTML templates are compatible with all the modern browsers.

Here, I’ve hand-picked some of the finest site templates you can find. All of them are absolutely free. Most of them are responsive, easy-to-navigate and integrated with social networks. Furthermore, each one includes source PSDs so you can make some design tweaks if you want to. Read on for more details about each template and remember to back up your site before installing the template, after you choose the one you like best. This is only a just-in-case measure.

Free HTML5 One Page Template

Demo | Download
The first free HTML5 template on our list is meant to create a professional CV for programmers, designers, and photographers. Designed in the infographic style, the layout contains sections revealing candidate’s skills, experience, portfolio, testimonials, and location in a built-in map. In such a way, you will get an online résumé that speaks to the point and shows your candidature to the best advantage. It’s a single-page template, so all the information is available within one-click reach. You can also complement your CV details with appealing images. To add them, the template uses the following jQuery scripts: Camera Slider, TouchTouch Gallery, and JQuery Isotop.

* * *

Free Responsive Design Agency Template

Demo | Download
This HTML template is developed specifically for a design agency, but it can also be easily adapted for any other company. Featuring the latest web design trends, this well-structured theme boasts a large hero area, ghost buttons, refined fonts, social media icons, and built-in map. A parallax effect will help you represent your company in a more dynamic way. In addition to its visual aesthetics, visitors will find it easy to browse through your website thanks to a dropdown menu fixed in the header and a convenient back-to-top button. Moreover, this responsive template will give you an opportunity to target people using mobile devices to browse the web.

* * *

Free Responsive Corporate Template

Demo | Download
Here is an ultramodern corporate website template that will help you expand the reach of your business at no cost. Clean and simple in its nature, the theme’s layout is flavored with such visual accents as hero images, large readable titles, ghost buttons, and a slight 3D effect set by a parallax scrolling technique. The theme feels formal and somewhat lively at the same time. Thanks to its fully responsive layout, your site will be accessible to any customer, should it be a user of a smartphone, tablet, or desktop.

* * *

Free HTML5 Template for Dance Studio

Demo | Download
This free HTML5 template is a perfect option for various organizations, particularly dance and music recording studios, sport clubs, cultural centers, etc. Its content organization is based on a comprehensive presentation of different kinds of information, e.g. the studio history, staff and classes, to name a few. The content is embellished with effective visual knacks such as streamlined fonts, purple UI elements, and cool images incorporated into the layout with a Camera Slider and TouchTouch Gallery. In general, this uncluttered theme presents a balance of elegance and simplicity.

* * *

Free Responsive HTML5 Theme for Photo Site

Demo | Download
Consider this magnetic HTML5 theme to create a striking photography portfolio. Its design represents the golden mean between reserved and relaxed styles, which makes it a versatile solution for any creative professional. A dark palette, ghost buttons, large background image with a blurred effect add a chic touch to the template. Valid coding of this vibrant theme will ensure faster performance of your site and its easier customization according to your preferences.

* * *

Free HTML5 Theme for Religious Site

Demo | Download
If you run a religious website, this is a perfect HTML5 theme for you. Gentle shades of purple and red set a soothing tone in the overall design and add a sense of spirituality to it. Purple also visually separates content blocks, making it easy to perceive different information that is wisely arranged across the template’s layout. Scrolling through it, visitors will learn about the mission of your organization, upcoming events and other details. The theme is very easy to navigate with its thought-out structure, fixed menu bar, and back-to-top buttons.

* * *

Free HTML5 Theme for Marketing Agency

Demo | Download
The following HTML theme is designed for companies involved in marketing, finance, insurance, consultancy, or almost anything that crosses your mind. The strong focus on content and orientation towards users are two fundamental principles that the developers of this theme followed when working on its design. Eventually, they came up with a clean, mobile-friendly layout balanced with vibrant graphic elements and supplied with handy features.

* * *

Free HTML5 Theme for Architecture Bureau

Demo | Download
If you are eager to refresh an architecture-related website, check out this free HTML5 template. It is clean, minimalistic and has an intuitive navigation. To showcase your projects in close-up, you can take advantage of Carousel & Owl sliders. Due to the responsive nature of the template, its well-defined layout can be scaled to parameters of various devices, from ultra-high resolution displays to smaller smartphone screens.

* * *

Free HTML5 Theme for Entertainment Site

Demo | Download
This is a festive, entertainment-related HTML5 template. It has lively visuals and some nice hover effects. It can help you showcase your party planning ideas, recent events, and even testimonials, which will let you seem more persuasive to potential customers. Responsive design of this theme will provide impeccable viewing experience for people visiting your site via mobile devices and desktop computers.

* * *

Free HTML5 Theme for Cleaning Company

Demo | Download
This HTML5 template is designed for a maintenance service, e.g. cleaning, laundry, home repairs, etc. This tastefully simple theme is also enhanced with images in a slider at the top and carousel gallery at the bottom. With neat social icons, you can unobtrusively inspire the audience to subscribe to your profiles on Facebook, Twitter and other networks. What’s more, this well-coded theme will enable you to build a future-proof site that will be easy to maintain and fine-tune to your business needs.

* * *

As you can see, all of these free HTML templates are pretty sweet and have some handy features. For more freebies and inspiration, visit the Template Monster. These guys have decent templates powered by various engines (WordPress, Joomla, Drupal, PrestaShop, OpenCart, etc.) and their themes can be a nice fit for a wide range of business niches (art, cars, fashion, education, religion, real estate, technology, etc.). See for yourself!

AUTHOR’S BIO: Nick Campbell, the author of this article, is fond of writing posts on various subjects, particularly web design, e-commerce, social media, marketing, business, and education. He has been involved in the content creation sphere for more than two years. Nick is primarily focused on covering modern trends of a certain industry to help his readers keep abreast of the latest news. If you don’t want to miss any brand new achievements in the mentioned topics, follow Nick Campbell on Google+!

Making Color Contrast Checks a Part of Your Web Workflow

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

No, we are not just talking about great looking colors here. More than 7 to 15 percent of males are color blind. Also, as people keep growing older, they have difficulty reading low contrast text. In addition, many of the websites today are viewed on smaller devices, such as mobile phones, and when out in the sun, color appear different. Small screens also make it difficult to read text that does not stand out from its background color. That constitutes a significant number of people with a need for high contrast text.

That’s the reason why a color contrast check is mandatory if you want your website to be accessible to most people. The color contrast used in your website needs to take into account the needs of people who are on the spectrum for color blindness, those using smaller devices (and different light conditions), and of course, the elderly.

Compliance to WCAG 2.0 (Web Content Accessibility Guidelines) norms ensures the accessibility of a website to color challenged people. If you did not do the color contrast check before designing your website, you might have to discard some of the vibrant colors or shades you have chosen.While it’s not a great position to be in, it’s nothing to panic about either! Checkmycolors.com’s color contrast tool can help you quickly find out which of your colors may not be WCAG 2.0 compliant.

That said, making your website accessible to color blind people does not mean you need to go for a bland and colorless website. Far from it! In fact, paying such close attention to your colors will enable you to develop greater sensitivity to design your website with colors that are even more vibrant ie visually accessible and give your website even greater appeal. Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

Understanding the Spectrum of Color Blindness

The term ‘color blindness’ actually refers to a broad spectrum of color vision impairment. Not all afflicted people are blind to the same colors. The common types of color blindness are:

Protanopia: reduced ability to see red colors
Deuteranopia: reduced ability to see green light
Tritanopia: reduced ability to see blue light
Achromatopsia: reduced ability to see most colors

Protanopia and deuteranopia are more common while the other two are very rare. That does not mean we cannot use red and green in websites. It just means we need to be sparing in the use of these colors.

WCAG 2.0

While talking about contrasts, it’s not just images we need to look at. Color contrast for text plays an important role as well. WCAG 2.0 (guideline 1.4.3) norms dictate the minimum contrast that we need on webpages when displaying textual content. The color contrast between the foreground or textual color and the background color can range from 1 to 21. The minimum requirement is a ratio of 3:1. That leaves us free to unleash our creativity safely with all the other shades and hues.

Level AA and level AAA are used to differentiate the amount of rigor required in the color contrast.

Level AA

○ For normal sized text, the minimum color contrast should beat least 4.5:1.

○ For large sized text, the minimum color contrast should beat least 3:1.

Level AAA

○ For normal sized text, the minimum color contrast should beat least 7:1.

○ For large sized text, the minimum color contrast should beat least 4.5:1.

Integrating checks into your workflow

Instead of waiting until you finished designing your website, it is a good idea to integrate contrast checks into your workflow, so you do not need to re-do or change your color scheme later. Doing the work up front, during your design process, makes sure you have it handy once you start execution. So how do we go about it?

Map out your desired color scheme. Jot down a quick list of text and background colors you wish to use on your website. Feel free to refer to other websites using accessible color contrasts. When starting to build your color palette from scratch, Color Palette Accessibility Builder and Color Extractor are good tools to use. As the name suggests, the Color Extractor website extracts the colors from a website of your choice to help you build your own palette. Of course, your example website should have colors that are accessibility compliant. A good rule of thumb is to use cool colors for the background and warmer ones for the foreground text.
Check whether chosen colors are accessible. Traditional methods used colored goggles to do a contrast check for color blindness. However, we now have several online simulators that do the job. Checkmycolors.com can help you check whether your colors and text aer WCAG compatible.Paletton.com, WebAim and color-blindness.com are other online resources to screen out inaccessible colors. lets you quickly check color contrasts for accessibility. Paciellogroup offers you a free downloadable tool to do the same job.
Create a mockup or use placeholders to build content and use the selected colors to build a sample website for further testing.
Run a grayscale test. It is easier to judge color contrasts in grayscale compared to viewing website in color. After you are done choosing your color palette, converting all your colors to grayscale can be of help to evaluate the color contrasts used in a website. Gray-bit.com is among online resources available for your grayscale check.
Test on color blindness simulators to screen out non accessible colors. Chromatic Vision Simulator and VisionSim are among free mobile apps which help you check your colors for various kinds of color blindness.
Double check your buttons and CTAs. Using colors to indicate the functions of buttons is not enough. In some cases, red and green change to some other colors. You then realize the need to also have contrasting text to explain the button function.
Adjust your colors, hues and fonts to bring them within accessibility values. Tanaguru Contrast-Finder will suggest other colors if the colors you selected do not offer sufficient contrast.

By following these steps you can make color contrast a de-facto part of your web workflow. The wide range of tools and simulators available today ensures that you don’t waste time, and effort, in figuring out the right contrast and colors.

Are you already including color contrast checks in your workflow? How do you go about it? Share with us in the comments on Facebook or Twitter.

Coffee Break: An Interview with Chris Castiglione, Co-Founder of One Month

Chris Castiglione is an engineer, artist, and the co-founder of the Y Combinator-backed One Month, the “For Dummies” of online education. Prior to One Month, he was the first teacher at General Assembly, where he created the #1 best-selling coding class for entrepreneurs, “Programming For Non-Programmers.”

In 2013, he taught at Columbia University, and he is currently an adjunct professor at The School of Visual Arts in NYC. In the past, Castiglione has advised companies such as American Express, Donor’s Choose, The New York Stock Exchange and General Electric.

Q. Tell us about yourself. How have you come to development, and particularly to being a co-founder of One Month?

I always wanted to be a teacher. I taught guitar lessons for a few years, and then I taught English in Osaka, Japan for a year. It was amazing. When I was in my mid-twenties, I went back to school to get my masters (University of Amsterdam), hoping that when I returned to the States, I could teach at a university like NYU or SVA.

Little did I know, universities usually only accept PhDs to be their teachers. I started down the doctorate route for a few months, but it just didn’t feel right to be in academia for so long.

That’s when I met one of the founders of a place called General Assembly (GA). I told him (Brad) [about] my desire to teach, and early in 2011, I taught the first coding class at GA. At the time, the staff was only 5 people (today it’s close to 400)… but I don’t know if, back then, I could have imagined just how big coding classes would become. Things that seemed simple to me (HTML, Rails, etc) were selling out weekend after weekend.

I went on to create the best selling classes at the time, “Programming for Non-Programmers,” and “Front-end Web Development.” It was around this time that I met Mattan Griffel. He had just launched the best selling class on the Skillshare platform, called “One Month Rails.”

We were both members of the General Assembly co-working space, and every now and then, we’d take lunch together and dream up ideas for the future of education and what it might look like. There were lots of innovative things we wanted to try, and we both felt held back by the powers above.

Long story short, Mattan applied to Y Combinator. He got in as a solo co-founder, and sometime shortly after, he invited me in as his co-founder on the project. That’s how it began.

Q. How did the idea appear, and how have you come to the vision for what One Month is?

The idea appeared out of a natural evolution from the platforms we were creating. We weren’t trying to create a company at first; we just wanted to evolve online education. We wanted to know the metrics for our students’ happiness, and completion rates; we wanted to A/B test content and provide 24-hour live support.

Q. Who can benefit from One Month, and how? What allows One Month to stand out from the crowd?

One Month is for life-learners.

All our classes are broken down into manageable pieces: about 15 minutes a day, for 30 days. Every skill is project-based (ie. you’re making something from Day 1 of each class, so there’s never a ton of theory upfront) and you have unlimited access to our teachers and support throughout your journey. Which means, if you get stuck (we all get stuck sometimes)… you have someone there to get help you.

I don’t imagine One Month will be in elementary schools any times soon. We know our audience- I sometimes think of our classes as some sort of “Rated R” flavor of education. Our class are meant to feel like you’re at the bar sitting with your best friend who is just shooting the shit and helping you build your project. Approachable. We’re approachable.

Q. What do you enjoy about your project the most? Are there any negative moments you face up with, or is this experience 100% positive?

I love coming to work every day! I’m super inspired to be around everyone on our team.

Q. It looks like you change the lives of tens of thousands of students; how do you feel about it?

It’s hard to imagine what “20,000” people looks like. At that point, the number feels more like a statistic.

Luckily, I get to see progress from our individual students. That’s the best part… the testimonials that come in. Hearing that Patrick in SF was able to land a 120k job, or that Sarah in DC saved $20k building a project herself- I only hope we can help inspire more people!

Q. How can one wow you to become a part of One Month as a teacher?

We’re always looking for teachers, but we’re selective, so if you read this, please do
apply.

I’m looking for someone who has taught before, has a portfolio, a intro from a trusted friend always helps, and someone who passes the beer test (ie. Would I want to spend Friday night drinking a beer with this person?). You don’t need to be a rockstar before applying, but you have to want to become one once you join us:)

Q. Last summer, you had interesting experience when you and your team moved to Berlin to work and live in a house together for 30 days. Has this made you think this is the best way to grow stronger as a team? Do you live and work together with your team now, and how does your work space look like?

Berlin! It was the best.

The trip to Berlin was an experiment for sure. It could have gone horribly, but it didn’t. It was truly magic. Before Berlin, our team was only two people (me and Mattan). That month we grew our team to five, so Mattan and I thought, “What’s the best way to get to know our new teammates this month? Let’s try living together with them.” And what better place than fucking Berlin.

We don’t technically live together now, but One Month HQ is technically a “live/work” space. It’s a very large 2-bedroom in the village, and each of us has decorated the space with our personal toys from home (books, an electric piano, Halloween costumes, paintings). So yeah, it’s not home, but we treat it like a home.

Q. What is One Month’s monthly revenue?

I might only say, some months, we’re profitable. Most months, we’re close to profitable. Overall, it’s going well.

Q. How do you keep up with trends and keep your skills up-to-date? What inspires you to succeed in what you do?

How do I keep up with trends? The easiest way has been to surround myself with people that are smarter than I am. I’ve learned a ton over the years this way. I’m pretty sure each of us on the One Month team feels that way. A fun fact is that almost all 9 of us were freelance consultants before joining One Month. Being on the team has helped me grow so much.

What inspired me? It’s hard to answer that without sounding a bit stilted, but the truth is, I’m hungry for learning. I see a world that is much more empathetic and kind than the world we live in now. And empathy (for me) beings with understanding, and education.

To that extent, I’m also personally hungry to learn…I selfishly consume books, people, travel, and ideas. Here at One Month, I have this opportunity to live comfortably in NYC while also connecting people to these amazing books, people, travel and ideas…. and thereby spreading empathy. It’s inspiring for sure.

Q. Do you use your knowledge in practice, then, or is teaching currently the only way for you to share what you’ve learned?

The two classes I teach for One Month right now are One Month HTML, and Programming For Non-Programmers. I use those in practice, in that I was a developer for 10+ years. I still do development work on the side, but much less than I used to a few years ago. It’s more about managing our development team these days.

Q. Here is a tricky MV* Frameworks War question:) What is your favourite framework(s) and why? What do you think about the future of this/these framework(s)?

I’m not sure I have an exciting answer here. I tend to like things that are functional. I used to use WordPress as a backend, and more recently, I’ll use Rails. I think the biggest constant in frameworks is Bootstrap. So I’d have to choose that. Clearly, those guys have revolutionized development with what they’ve given the Web.

Q. What are your plans for 2015 in terms of your project and the class you teach? Do you plan to roll out new classes any time soon?

We’re rolling out a bunch of new classes in 2015. My class, Programming for Non-Programmers, will be released in February 2015, as will Content Marketing (taught by Sarah Peck), One Month Python, and One Month UX. That’s all I can talk about right now, but more exciting twists and turns (even outside of tech) will be out soon enough.

Many thanks to Chris for taking the time away from teaching to answer our questions and run through his pictures to share some of them with our readership. We expect the One Month guys will achieve the goals they have established for 2015 in the near future.

Tips For Enhancing Typography in your Web Projects

Understanding how to select and use appropriate fonts in web design can be a challenge, though. Luckily for you, we’ve compiled a list of tools and techniques to help you identify fonts, select appropriate font combinations, and implement typography elegantly in your responsive web designs.

Typography is a huge part of modern web design. Gone are the days where you were limited to using the handful of typefaces that were installed on almost every user’s system. Nowadays, through the use of web fonts, many hundreds of different fonts can be used safely on the web.

Identifying and selecting typefaces

Deciding on which fonts to actually use in your design can be difficult. Fortunately, there are some great tools out there to help you select fonts and combinations to enhance your design.

WhatFont Chrome Extension

WhatFont is an amazing extension for the Google Chrome browser (if you don’t already use Chrome as one of your primary browser for web design and development, we highly recommend trying it out; it has an abundance of useful extensions). To use the WhatFont extension, you simply install it within Chrome, enable it from the toolbar and then the name of any font you hover over will appear in a little tooltip near the font. If you click on the font, additional info will be revealed, like color, font size etc.

WhatFont provides an easy way to discover font combinations that are being used on beautifully designed sites, which can be a great source of typographical inspiration.

Fontpair.co

If you’re planning on using fonts from the free Google Fonts library, you should take a look at fontpair.co. It suggests a wide array of font combinations using fonts drawn exclusively from Google Fonts. You should be able to find a free combination to suit just about any project here.

Beautiful Web Type

This site is more of a showcase of what can be done with some of the fonts available for free on Google Fonts. It really does provide some beautiful examples of web typography and suggests some great font combinations. It’s sure to get you inspired.

Where to get your fonts and how to use them

There are a few options when it comes to sourcing the fonts for your website. We’ll cover two free options here, but there are many more – both paid and free – sources available.

Google Fonts

By far the easiest and most convenient way to use web fonts in your design is to use Google Fonts.

To use fonts from the Google Font library, you simply need to go and select the font or fonts you’d like to use, add them to your collection, insert the generated code into the <head> section of your site’s code, and start referencing the font as you normally would in your CSS.

For example, once you have added the following code to your <head> section:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

you could make all h1 tags use Open Sans (and fall back to the system default sans-serif font) simply by adding the following regular CSS rule:

h1 {

font-family: 'Open Sans', sans-serif;

}

Font Squirrel and other self-hosted solutions

You may want to use a font that is not available on Google Fonts. In these cases, websites such as Font Squirrel may be useful. Using web fonts from these sites is also very simple; it just requires a few more steps than Google Fonts.

Firstly, unlike Google Fonts, you will need to upload the font files to your own server. You may also need to write your own CSS @font-face rules to load those font files and make them usable (this is not necessary with Font Squirrel).

For most of the fonts on Font Squirrel, you can generate a web font kit (some have licenses that don’t allow this). This takes care of most of the technical issues for you. To generate the web font kit, when you are on the individual font page (eg. http://www.fontsquirrel.com/fonts/open-sans) just click on the ‘webfont kit’ tab, select your options (the defaults are usually fine), and then click the ‘Download @font-face kit’ button.

This will generate a .zip file that contains everything you need to get your font working. Just upload the .eot, .svg, .ttf, .woff and .css files to a folder, preferably a folder under your existing CSS folder on your server.

Next, you need to add a reference in your existing web page to the .css file generated by Font Squirrel. To do so, add the following into the <head> section of your page, making sure to add the correct path to the Font Squirrel CSS file:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" charset="utf-8" />

The .css file generated by Font Squirrel should be in the same folder as the font files you uploaded to your server earlier. If they are in different files, you will need to correct the paths in the Font Squirrel stylesheet.css file.

Now that the files are uploaded and the CSS file is being referenced correctly, you can begin using the fonts in your designs just by referencing the font as you usually do in CSS. If you don’t know how to reference a font in your CSS code, you can find out by checking the Font Squirrel stylesheet.css file associated with that font.

Creating Your Own CSS @font-face Rules To Use Web Fonts

If you get a web font from a source that doesn’t generate the required CSS rules, you’ll need to create them yourself.

Basically, you just have to define the name of the font-family, then reference the font-files you’re going to use to render the font in different browsers. The example below shows the CSS @font-face rules needed to implement a font called Open Sans; it assumes the font-files are uploaded to the same folder as the CSS file.

@font-face {

font-family: 'OpenSans';

src: url('opensans.eot'); /* IE9 Compat Modes */

src: url('opensans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('opensans.woff2') format('woff2'), /* Super Modern Browsers */

url('opensans.woff') format('woff'), /* Pretty Modern Browsers */

url('opensans.ttf')  format('truetype'), /* Safari, Android, iOS */

url('opensans.svg#svgFontName') format('svg'); /* Legacy iOS */

}

To use this font in your design, you would use a CSS rule, such as:

h1 {

font-family: 'OpenSans', Fallback, sans-serif;

}

Note that we are using the font-family name as defined in the @font-face rules; unlike regular system fonts, it must be enclosed within quotation marks.

These rules ensure the web font will be compatible with as broad range of browsers as possible.

Improve performance with Web Font Loader

On overstressed networks or over particularly slow internet connections, the performance of web fonts can become an issue. The content being rendered in web fonts may take longer than is ideal to become visible to users. This is commonly known as the ‘Flash of Unstyled Text’ (FOUT) issue. Although this issue rarely becomes a major problem, it can potentially pose significant usability challenges.

If you run into this problem when using web fonts on your websites, you may want to take a look at the Web Font Loader script. This script allows web fonts to be rendered in regular system fonts until the relevant files are loaded in the user’s browser. This can result in an improvement in perceived performance and a far better user experience.

Options for Responsive Text

Because the web is increasingly accessed on a mix of devices, such as desktop PCs, phones and tablets, it’s important your typography is flexible and adaptable enough to work and look great on a wide range of screen sizes. The most common way to do this is using regular CSS media queries and setting font sizing and spacing for each relevant screen size. This article is a great primer on CSS media queries.

FontFlex is a jQuery plugin, which offers an alternative approach. It results in much more dynamic and flexible scaling of text.

To use it, you simply reference the script after you’ve reference jQuery in your page’s code:

<script src="jQuery.min.js"></script>

<script src="jQuery.fontFlex.js"></script>

You should also declare general font-size and line-height rules in your CSS to ensure text scales properly:

body {

font-size:1em;

line-height:140%;

}

Then, to apply the effect, simply add the following self-invoking function, either in a separate JS file or within <script> tags on your page:

$(function()

{

$('body').fontFlex(14, 20, 70);

});

The parameters in order are: minimum font-size in pixels; maximum font-size; and mid-range buffer (best set between 60 and 70). Check out a live demo of some beautifully dynamic scalable text here .

This plugin works flawlessly in Google Chrome, Apple Safari Desktop and Mobile, Microsoft IE 9, 10, 11 and Mozilla Firefox.

Go forth and create beautiful web typography

So there you have it! This guide should give you all you need to start selecting great font combinations, implementing web fonts in your responsive layouts and optimizing web font performance.

Remember, the goal of web design is to facilitate and enhance communication, and great typography is central to achieving that goal.