Tags Posts tagged with "Web"


Web Developer Tools Part 3

Welcome to part 3 of useful tools for developers! This week we have a couple of useful tools, plus a bonus useful tool/funny/entertaining tool to help you get through boring online news reading.

As with most all of the development tools I post up in these articles, I have tried these first hand and love them. They all come in handy and make life easier for us developers.


Ajaxload is a simple and easy tool to help you quickly create a animated loading icon GIF. This is a great tool that I’ve used many times and it’s especially helpful for those web projects you have that involve AJAX and have load time. You can pick from many different load icon styles from the drop-down, select background color & foreground color and quickly generate it.

AJAX Load icon maker


Tired of reading the same old headlines in news stories and blog posts? Spice them up a bit and read them for what they really mean with Downworthy. Downworthy is a browser plugin that turns hyperbolic viral headlines into funny, truthful, headlines.

For example: “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Awesome…Whoa.” turns into “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Probably Slightly Less Boring than Working…Whoa.”

Although it’s not exactly a web developer tool, it’s something than can come in handy and make you laugh when reading blog posts.

Downworthy Browser Plugin for Headlines


Another tool that comes in handy, px-em does just what you think it does, converts pixels to em’s. You just type in your parent font size in pixels and the font size you want, then it converts it to the proper em size. It’s a super useful and super easy tool that can save you the time of doing math and using a calculator while developing.

px-em conversion tool

Useful Tools for Developers #2

Welcome to the second edition of useful tools for developers. Something we all need, whether we are developers, designers, or whatever, are tools to help make our jobs seamless and quicker. These articles are aimed to help you do just that.

These tools I post are either ones I use, have tried, or have been backed by other developers as great tools to help with our jobs. So without further ado, here is part two of useful tools for developers.


Tailor is an experimental code editor for Chrome. Its main features include the ability to edit your code offline, it supports Git, and has auto complete for CSS, HTML, and Javascript.

Tailor Code Editor for Chrome

Custom Google Maps

Just as the title suggests, this website by Donald Sutherland lets you easily build a custom Google Map. You can change the size, lat & long, where markers are placed, zoom level, controls, map type, and map theme.

Custom Google Maps Builder

Entity Conversion Calculator

This is a handy tool for converting entities, like the copyright symbol as you see below, into the proper code for CSS, JS, and HTML. Simply paste whichever code you have into the correct slot and click convert. This converter will convert that code into the other proper formats of code.

Entity Conversion Calculator

Useful tools for developers part one

Being a front-end web developer myself, it’s always helpful finding new tools to help make developing easier and more efficient. That being said, below is part one of useful tools for developers. All of the tools I will post in these articles will in some way be beneficial to developers.

If you have any suggestions for great developer tools that you yourself use to help with the process of developing, please feel free to comment them below and I’ll take a look at them. If I find them useful I will post them up in a future article.


Have you ever been browsing on your iPhone or iPad and come across something you need to copy and paste to your Mac, but you’re forced to copy-paste-email it to yourself instead? Now you don’t have to waste all that time, scribe lets you copy and paste between your Mac and Apple iOS devices.

Scribe Apple App

Web Safe Colors

I know I just posted about this, but it’s a handy website. Web Safe Colors displays all 216 web safe colors in a grid format and displays the RGB, HEX, and HSL color codes in an easy copy format as needed for CSS.

Web Safe Colors by Zac Knoblauch


ColorZilla is a very useful Chrome web browser add on that lets you pick colors right off of a web page with a color dropper. This comes in handy when you see a color you like on another site, or even on an image or logo from a website.

Once you click the dropper on the color you want it gives you the RGB and HEX color codes to copy. This cool add on even has a CSS3 gradient generator!

ColorZilla Chrome Add On


Ruul is an on screen ruler and a great tool for developers. I use this (along with ColorZilla) on a daily basis. You have a short 560px ruler and a longer 1100px ruler to choose from in many different transparent colors. This comes in handy for quick measurements needed while developing on a website.

Ruul Chrome Add On

Adobe Edge Inspect

Adobe has been kicking ass lately as far as tools for web development go, and Edge Inspect is proof. I recently downloaded Edge Inspect to give it a shot and I have to say, I am impressed and I use it for my responsive website projects.

Adobe Edge Inspect allows you to test any website on multiple devices and inspect the code for each of those devices. Simply download the free Edge Inspect app for your Android or iOS device and download the add on for Chrome. Turn it on and start inspecting, change code and watch it change live on your device. This makes editing code and testing on mobile devices smooth and easy right from your desktop computer. I suggest you take a few minutes and head to Adobe to learn more about this awesome tool.

Adobe Edge Inspect

Web Safe Colors

Out of no other reason but pure boredom (and for fun), I created a little website to showcase all of the web safe colors. I actually started this project years ago when I first got into web development, but in my amateur-ness (is that a word?) I was using images to showcase the different colors (not sure what I was thinking).

Fast forward to a few months ago, I decided to finish this project with one goal in mind, make it super simple. I think I accomplished that goal as the site has only the bare essentials to serve its purpose, plus it only weighs 70kb.

Anyways, the site showcases the 216 web safe colors in a grid pattern. When you hover over each color it displays the RGB, HEX, and HSL color codes for that color. Why those color codes? Well because those are color codes used in CSS for the web :) I hope this site becomes of some use for those of you in search of web safe colors and I tried to make as user friendly as possible so enjoy!

Web Safe Colors

Web Safe Colors by Zac Knoblauch

Web Safe Colors by Zac Knoblauch

25 Bootstrap based Joomla Templates

Website design is not something you change every three months, but many businesses wait too long to refresh the look of their web page. When a design was created a decade ago, it usually shows, plus new features come along every day, and it’s unwise to deprive your site’s visitors of them!

If you haven’t revamped your website for too long because you think it will take lots of money and time, here’s the good news: with a predesigned template, your new web page can go online in a matter of days, and the cost of a theme will not be more than a hundred dollars.

For the proud owners of Joomla-powered websites, whose sites are crying for a revamp, we have selected twenty-five top Joomla templates, based on Bootstrap framework.

What’s Good About Bootstrapped Themes?

Bootstrap is one of the best front-end frameworks that allows building flexible, great-looking templates with rich functionality. The best thing about Bootstrap-based designs is that they are mobile-friendly, which is vital these days. As more and more people browse the Internet on smartphones or tablets, you want to make the website handy for them.

Why Buy a Ready-Made Theme?

These Joomla themes, as you already know, are cost-effective, fast to install, and mobile-ready. Here are other benefits you get when buying a Joomla template from this collection.

Licensed Images, Easy to Replace

Images are usually the heart of the design. If you want to use a theme as is, with the carefully selected images, feel free to do so. You will get all the images and a license, permitting you to use them on your website. If your business needs other photos, though, you can easily remove default images and use your own.

Part of the Biggest Collection Online

All themes are brought to you by TemplateMonster.com, the resource that features the biggest collection of designs and has been in the business for over a decade. So, if twenty-five is not enough – feel free to check out hundreds of others on TemplateMonster’s website.

Expert Help and Support

If you don’t have an in-house webmaster to take care of the theme you buy, you can order installation and customization at TemplateMonster.com. Plus, you will enjoy 24/7 support to help you with your design template.

Now it’s time to look through the themes collection, may be the perfect one for your new website is right there.

1. Glossy Car Models

This big-resolution design puts the emphasis on the sleek lightbox with photos of luxury cars. It’s a great theme for an online car magazine or a car dealer’s website.Glossy Car Models Bootstrap Based Joomla Theme

Details | Demo

2. Comfortable Home

With a pleasant combination of beige shades, orange, and white, this theme looks clean and elegant. An apartment rental business will find it just right for its website.

Comfortable Home Boostrap Based Joomla Theme

Details | Demo

3. Informative Business Site

This professional-looking website features an informative homepage and will make an effective corporate website.

Informative Business Boostrap based Joomla Theme

Details | Demo

4. Stylish Flats

Nothing extra in this clean and stylish design: pretty photographs in the grid look especially good on white. It’s a perfect design for an apartment rental firm.

Stylish Flats boostrap based Joomla Theme

Details | Demo

5. Wild Life

Combining warm beige with green, this big-resolution template matches the wild life theme perfectly. It’s the right choice for a charity foundation that works with wild life.

Wild Life Bootstrap based Joomla Theme

Details | Demo

6. Karting Star

The photos in the big lightbox add some dynamics to this clean design. It’s the perfect theme for the website of a karting club.

Karting Star Bootstrap Based Joomla Theme

Details | Demo

7. Multi-Colored Pasta

The colors in the header menu harmonize with the colors on images and brighten up this clean design. With its pretty fonts, the theme is great for a website on Italian pasta.

Multi Colored Pasta Joomla Theme

Details | Demo

8. Trendy Portfolio

Colorful macro photos on the simple dark background leave a lasting impression – and that is exactly what a photographer’s portfolio needs.

Trendy Portfolio Bootstrap based Joomla Theme

Details | Demo

9. Clean & Dynamic

This reserved and clean design has a bright blue accent in the lightbox that adds color to it. It’s a fresh option for a corporate website.

Clean & Dynamic boostrap based Joomla Theme

Details | Demo

10. Italian Cuisine

The vivid, mouth-watering photos in the lightbox look especially good on the plain black-and-white background. It’s a perfect theme for an Italian restaurant.

Italian Cuisine boostrap based Joomla Theme

Details | Demo

11. Reserved Gray

Done mostly in gray shades, this theme looks reserved and professional – the right fit for the consulting company’s website.

Reserved Gray boostrap based Joomla Theme

Details | Demo

12. Industrial Business

With a metallic gray background, angular elements, and straight lines, this is the right theme for an industrial company.

Industrial Business boostrap based Joomla Theme

Details | Demo

13. Minimalistic Grid

With its simple grid of monochrome photos, this minimalistic theme is perfect for a design studio that creates high-tech interiors.

Minimalist grid boostrap based Joomla Theme

Details | Demo

14. Friendly Corporate

With a nice color scheme and pleasant photos, this corporate design has a friendly feel about it.

Friendly Corporate boostrap based Joomla Theme

Details | Demo

15. Rich Harvest

With colorful images and interesting backgrounds, this warmly colored theme is created specifically for an agricultural business.

Rich Harvest boostrap based Joomla Theme

Details | Demo

16. Contemporary Dance

Combining black with bright colors and dynamic photos, this design conveys the atmosphere of a modern dance studio.

Contemporary Dance Joomla Theme

Details | Demo

17. Simple & Elegant

Using simply-shaped elements and gray shades, this design has an elegant look. It will work well for an architectural bureau.

Simple & Elegant boostrap based Joomla Theme

Details | Demo

18. Trustworthy Business

Multi-layered and rich in information elements, this design will be a good match for a corporate website.

Trustworthy Business boostrap based joomla theme

Details | Demo

19. Orange Business Site

Soft orange is pretty unusual for a corporate website, but in this design it harmonizes perfectly with the sepia-styled photos and images.

Orange Joomla Theme

Details | Demo

20. Modern Gym

This clean design has a modern look, and the photos in the lightbox make it the right choice for a gym’s or fitness club’s website.

Modern Gym Joomla Theme

Details | Demo

21. Clean Architecture

With an original lightbox, this clean big-resolution responsive design looks incredibly stylish. It will work well for an architectural bureau.

Clean Architecture Joomla Theme

Details | Demo

22. Exquisite Restaurant

With the delicious-looking images as a background, this responsive design has nothing extra, and looks exquisite and attractive. It’s a great theme for a top-notch restaurant.

Exquisite Restaurant Joomla Theme

Details | Demo

23. Seafood Restaurant

The cute background and great images in the lightbox make this template the right choice for a seafood restaurant.

Seafood Restaurant Joomla Theme

Details | Demo

24. Paradise Island

With the lovely images as a background, the design speaks for itself. It’s the perfect template for any travel agency.

Paradise Island JoomlaTheme

Details | Demo

25. Electricity

Darkly colored, with several bright accents, this is a professional-looking design for an electricity services company.

Electricity City Boostrap based Joomla Theme

Details | Demo

2014 Web Design Trends Predictions

One of the main jobs of designers is keeping pace with the current design trends, this includes knowing what’s cool and what’s not. There are many reasons for this, most of which you should already understand, but in short it’s money. If you are able to know what’s hot and current more people will look to you for designs and it increases your ability to get hired (assuming you’re looking for a job) and get noticed by others in the design community.

1. Content First

A trend that has grown large recently, and will continue to grow, is the content first trend. Rather than building a website and throwing the content in later, more and more designers/developers are working around the content. Creating content first for a website and then designing around it should be what every designer/developer does. It makes for less headaches down the road and it looks a lot better and more consistent throughout the website. It’s not always that simple though because clients aren’t almost always late in terms of content for a website.

Websites that focus more on content rather than the visuals usually turn out better (not always though) because they have a more minimal layout and design (which is another big trend prediction for 2014). Below I’ve gathered some examples of websites that focus solely on content.

A List Apart is a great example of a website that is built around content.

A List Apart Website

Another great example is zerosixthree.se, built, created and written by Sebastian Ekström. This site uses minimalism and content to create a beautiful design that makes you want to read everything on the website.

Zero Six Three

2. Hexagon

I predicted this trend for 2013 but it didn’t quite take on as I had originally thought. Anyways, hexagon shapes will begin to replace the traditional square and circle shapes that you are used to seeing. Below are a few examples of what I mean by hexagon design.

Melborp’s website does a great job of illustrating this trend. The hexagons work beautifully with the website and give users something different and new to look at.

Melborp's website

Built by Buffalo is another great example of hexagons in web design, take a look below.

Built by Buffalo website

3. Lightweight

With mobile taking over the internet browsing world, it’s important to make sure your website loads fast. Why? Because cell phones don’t have the high speed internet that you have at home/work. One thing many designers/developers are doing to insure lightweight websites is cutting out all the unnecessary stuff like massive images, logos, “cool” animations, videos, etc.

Focus on things that your website NEEDS not things you think are cool. This lightweight trend goes hand in hand with content first and minimal design, cutting the fat allows you to speed up your website, focus on content, and give it that minimal look.

4. Faster Loading/Fewer HTTP Requests

Faster loading websites goes in hand with lightweight, but I wanted to elaborate a little on other ways websites can load faster. For those of you that are unfamiliar, an HTTP request happens when a user visits your website. The users computer requests styles, scripts, images, web fonts etc. from the server and that in turn loads the website in their browser window for them to view. The more HTTP requests required the longer the website will take to load, for example, if you have 4 different Google web fonts in your header, an HTTP request is sent for each of those fonts.

This will cause a website to load slower because of all the extra work from requests happening behind the scenes. Limiting these requests can help speed up your website. An easy way to cut back on HTTP requests is by creating sprites for images, this way you aren’t loading multiple images individually, instead you’re loading one large image file that includes multiple images on it. Other ways including combining CSS into one file, combining scripts into one file, and limiting the amount of fonts being used on the website.

5. User Experience

The days of flash and crazy animations on web pages are gone. Web designers and developers are focusing more and more on the user rather than trying to get an Awwwards ribbon on their web page (or they should be at least).

The goal of any website is to communicate information easily to the user in a way they can figure out and understand. Websites that are nothing but a ginormous image do nothing but get in the way of what a web page visitor is truly there for. Using an informative paragraph of text or video is a better alternative in my opinion.

CSS3 and HTML5 are helping us out a lot with this. We are now able to provide minimal animations for the user experience without bloating the site to the weight of 2MB+.  That’s why 2014 will be the year of the user, more and more developers and designers will create websites that are simple and easy to use; but also be an enjoyable user experience that doesn’t take minutes to load.

6. Mobile First

We’ve been over it many times, mobile is still going to be in this year and you can be sure its use will continue to grow throughout 2014. Websites will begin to be built with mobile in mind; icons that you are familiar with on mobile devices will start to be used in place of text (the menu icon for instance) on websites.

The user experience of websites will also begin to shift towards that of a mobile device where navigating through it will be similar to how you navigate through a website on your mobile phone.

7. Serif Typeface

This may be a towards the end of 2014 web design trend. The use of Sans Serif typefaces are going to slowly fade away, as regards for regular paragraph type, and plain serif type will start to replace it. I am already beginning to see more blogs (that focus on content) switch to a Serif typefaces. I have an article in the works that will dive more in depth regarding this so stay tuned.

8. Minimal

Are you noticing the similarities between all these trends yet? I’ll give you a hint, they all have to do with minimalism. Defined, Minimalism is the art of stripping down an element to only the necessary essentials it needs in order to function. When done correctly in web design, it leaves the user with a sophisticated impression and ease of use.

Minimalism really took off last year among the big players and that means this will be the year that it will be fully adopted by others. The basic idea behind a minimalist design is to remove the clutter and use only what you need. Apple has been doing a great job of this for years in both product design and interface design. Below is a great example of a minimal website, for more check out our article 19 Minimalist Website Examples

The Kitchen Website


There you have it, the 2014 web design trends. 2014 will be the year of simplicity which will greatly benefit all designers, developers, and even end users.