Caution: Stop Messing Up Your Front-End Optimization

It is a well-known fact that slow page load time, largely influence people to abandon a site. According to a survey done by KISSmetrics, “nearly 40 percent users abandon a site that takes more than 3 seconds to load”. Website speed has become by far the most critical determining factor to achieve success in today’s wobbly and competitive online marketplace.

frontend_optimization

When we talked about optimizing website performance a few years ago, we only focused on optimizing its server-side only since most of the sites were static and were processed for server-side. However, the advent of web 2.0 technologies made use of dynamic web applications quite popular. And so, it has become imperative to pay due attention to how your site performs on the client-side just like server-side processing.

Nowadays, performance issues encountered on client side need to be addressed immediately compared to the server-side performance problem, since the former can impact user experience. While it is true that 10% of the overall web application performance can be improved by improving the back-end performance by 50%, it can’t be denied that 40% or more percentage improvement can be made to your application’s performance by focusing on the front-end and reducing its load time to half.

What’s more? Compared to back-end projects, you need to spend a lot less time and resources in making improvements to your front-end. This is why it is important for site owners to pay due consideration in improving front-end performance of their website.

Below are a few best practices following which will help boost your front-end performance to a great extent:

1. First, measure your front-end performance.

Of course, you would want to know how your front-end responds when a user submits a request to the browser. Besides, only after measuring your front-end performance, you can come to know the level of improvement to be made. Fortunately, there are several useful tools available online that can help identify your site’s front-end performance, such as Page Speed, Y-Slow and Firebug to name a few.

2. Reduce the size of your CSS, HTML and JavaScript resources via minification.

When writing CSS code, we often use the format that is easier to understand. Basically, we prefer using a human-friendly format that looks something like:

.center {
margin: auto;
width: 80%;
border:6px solid #d3d3d3;
padding: 8px;
}

In the above example, we can clearly see that we’re center aligning using margin and other CSS properties. The above CSS can also be written as:

.center {margin: auto;width:80%;border:6px solid #d3d3d3;padding:8px;}

But as you can see that this line of code is not much clear like the above CSS code snippet. Although, it may be easier for us to read, but it contains unnecessary characters. If you’re running a large-size website with a thousand lines of code, then writing code like the former code snippet can result in lowering down the performance. But, minification of CSS files can help you reduce unwanted characters like whitespace, comments, etc.

The best part about minification is that all the unneeded characters (including redundant data) can be eliminated without impacting your website performance. You can even minify your CSS code, as well as JavaScript using the YUI Compressor tool. In addition, you can minify your HTML using PageSpeed Insights tool.

3. Bundle your CSS and JavaScript files together to reduce HTTP overhead.

When you load your web site an HTTP request is sent to a remote server, and all your website files such as CSS and JavaScript need to be downloaded to your web browser.

So, if you have 4 CSS files, you would require at least four “GET” request to render all those files. This will eventually increase the overhead that is needed for generating a web page. However, by bundling your CSS and JavaScript files together, can help in increasing your page speed considerably.

Sitepoint also talked about bundling CSS and JavaScript together, because of which they were able to curtail their response time to 1.6 seconds, which helped them reduce the “response time by 76 percent of the original time”.

4. Optimize your images to reduce server requests

Downloading multiple images can make your site painfully slow regardless of their image. That’s because, each image on your site will make an HTTP request to load. Thus, the more images you will have on your website, the more GET requests will be generated, as shown in the screenshot below:

elementhttprequest

The more images you have, the longer it takes your website to load

Unfortunately, browsers can only process a couple of simultaneous requests at once, thereby resulting in a bottleneck of images. But, combining multiple images into one single image can help in reducing the number of HTTP requests. This is exactly what a CSS Sprite does.

A Sprite is, basically, a large image that contains a collection of images. Thankfully, the CSS Sprite Generator helps make the task of uploading images – that needs to be combined into a single CSS Sprite – a lot easier. Here is an example of sprite images:

CSS Sprite combines multiple images into one single image

CSS Sprite combines multiple images into one single image

Using Data URI for Optimization

There is another method that can be used to optimize images for reducing HTTP requests, called as Data URI. When using an

element in your HTML document or defining a background-image in CSS, you’ll need to link that element to an external image file. With data URI, you can eliminate the need for the browser to load image data from external sources, as it embeds the data into the HTML or CSS documents.

The data URI represents the data within markups and stylesheets in data strings which is encoded into a base64 format. The best part is that the string can be used to store your images directly in markup and stylesheets, instead of making an HTTP request to load the image data from an external source.
The standard format of data URI is:

data:[][;base64],

Now, let us take a look at an example where data URI in the form of a “repeating background image” in CSS:

body {

background-image:url(‘data:image/png;base64,’);

background-repeat: repeat;

}

Wrapping Up

As Internet connections are getting faster, site owners need to ensure that their website front-end performance is optimized for fast performance. Hope that the above listed key points will help optimize your front-end performance, resulting in faster website speed.

 

About the Author
Jack Calder is a Senior developer in Web development applications. He is responsible for converting psd to html in an effective manner. Jack has also done a lot of research in front end development technologies.

Powered by WPeMatico

80+ Free Web Design Resources You Thought Didn’t Exist

Let’s face it: no matter how creative and knowledgeable you are in web designing, you cannot come up with the best web page design if you don’t have the right tools, codes, and resources.

You can purchase these tools and resources, but most of them come with a high price tag. But, of course, you don’t really have to spend a lot to get the resources you want and need as you can easily get them for free on the Internet.

free design resources

A. FREE DESIGN RESOURCES

Unlock your design potentials with these free design resources that will surely enable you to achieve a web design that is not only visually appealing but user-friendly, too.

The following are some of the best free design resources:

  • Freebbble: Should you want to have more freebies for your web design, visit Freebble. It offers a lot of high-quality designs that are for free.
  • Dribbble: Dribbble search results for “freebie”. An absolute freebie treasure.
  • Graphic Burger: Graphic Burger offers tasty design resources that are high resolution.
  • Pixel Buddha: If you are working on websites for professionals, you should consider Pixel Buddha. It is loaded with premium resources that are for free.
  • Premium Pixels. Is your website meant to showcase your creative works? If yes is your answer, then, you should download Premium Pixels for free.
  • Fribbble. This offers you PSD resources that you can use in more ways than one.
  • Freebiesbug. If you want to incorporate the latest PSDs and other resources in your website, you should download Freebiesbug.
  • 365 PSD. You can have numerous PSDs and use a different one every day as you can download a new one on a daily basis.
  • Dbf. This is Dribbble & Behance best design freebies that can help you in more ways than one.
  • Marvel. These are free resources from designers who have the respect of their colleagues and clients. Certainly, you need to check this resource out.
  • UI Space. You can get excellent quality freebies that are hand-crafted.
  • Free Section of Pixeden. You can get free design resources from here.
  • Free Section of Creative Market. You can get freebies every Monday.
  • Teehan+Lax. This is the best resource for DiOS 8 GUI PSD for iPhone 6 and iPad.
  • Freepik. You can get iFree graphic resources here.
  • Tech&All. This offers PSD, Tech News, and other resources without any charge at all.
  • Tethr. Without question, this is the most impressive IOS design KIT ever.
FireShot Screen Capture #050 - '0to255 – A simple tool that helps web designers find variations of any color' - www_0to255_com

Fill your design with the right colors using these color pickers

B. COLOR PICKERS

With the following free color pickers, getting the best color for the images, fonts, or background of your web design is a walk in the park.

  • Material Palette: This is very helpful for you in generating and exporting the color palette of your material design.
  • New Flat UI Color Picker: Without question, this is a must-download, especially if your UI makes use of the trendy flat design. The colors can simply make your website more attractive despite its flat design.
  • Flat UI Colors: This is another must-download for the believers of the flat design. The colors are simply amazing.
  • Coolors: Without question, you should download Coolors if you are the kind of designer who wants to get the colors of your website done not just impressively but fast, too. This is a must-download for cool designers.
  • Skala Color: If you want the color of your images and fonts to stand out and contribute to the overall appeal of your website, you should not dilly-dally in downloading Skala Color.
  • Couleurs: This resource makes it easy for you to grab and tweak the colors you see on screen. Playing with colors has never been this easy and fun with this app.
  • Material UI Colors: Whether the website that you are working on is for the web, iOS, or Android, you can easily use this Material UI Colors. This will not only make things easy for you; your web design can be a standout, too.
  • Colorful Gradients. This is another must-have because you can effortlessly have color gradients that are generated automatically by a computer.
  • Adaptive Backgrounds. If you have this resource, you can easily extract and copy dominant colors from the images that you have.
  • Brand Colors. If you go for this resource, you can easily achieve the look, especially the colors, of the famous brands.
  • Paletton. Coming up with your website’s own color scheme will be a lot easier with Paletton.
  • 0 to 255. Finding any color variation becomes a lot easier for web designers with this resource.
  • Colour Lovers. With this resource, you can easily come up with your own colors, color palettes and patterns. You can share what you have created, too.
  • Adobe Color CC. This gives you color combinations that have been created by the Kuler community.
  • Bootflat. If you are working on a website that has flat designs, you should try this resource.
  • Hex Colorrrs. Converting Hex to RGB is easy with this resource.
  • Get UI Colors. You can have awesome UI colors with this tool.
  • Coleure. This is a nifty color picker tool.
  • Colllor. Useful color palettes generator.
  • Palette for Chrome.This enables web designers to create a color palette extracted from any image.
FireShot Screen Capture #053 - 'Dribbble - Show and tell for designers' - dribbble_com

Why bang your head for inspiration when it is just a click away

C. INSPIRATION

At times, the most difficult part of any project is to start it. You may already have ideas floating in your head. Of course, banging your head against the wall won’t help. Hence, why not take inspiration from some of the best design resources on the web? With these sources, coming up with a trendy and standard web design is a piece of cake.

  • MaterialUp. Get your daily material design inspiration from MaterialUp.
  • FLTDSGN. Are you working on a flat design website? This resource gives you a bountiful of inspirations daily with the exceptional showcase of the UI apps and design websites.
  • Site Inspire. Are you running out of creative juices on how to make the best website for your client? Go to Site InspireWeb design inspiration.
  • UI Cloud. You should check this out as it is the world’s largest UI design interface database in the world. This can really help you come up with a good UI design that will provide a great deal of ease to the users of the website you have designed.
  • Moodboard. This resource can help you create an impressive and useful moodboard, whose result can be shared to others.
  • Crayon. Are you working on a website design that is meant to market a product or a service? Check out Crayon to get the most important and helpful ideas with your design.
  • Land-Book. If you are working on the product landing page gallery of a website, Land-Book can surely help you come up with a design that will surely entice prospective clients to go for the products that the website is offering.
  • Ocean. Aren’t you sure of the design that you are contemplating on using? Visit Ocean and learn from other web designers as it is a community where designers let their thoughts known.
  • Dribbble. This resource can also help you learn from or teach other web designers regarding various design issues.
  • Behance. This is another resource where you can showcase your works or learn from the works of other web page designers.
  • Pttrns. This is one of the best resources that you can check out, should you be in doubt about your ability on using mobile user interface patterns.
  • Flat UI Design. This a useful inspiration board that can help you in more ways than one.
  • Awwwards. Learn and take inspiration from the awarded websites for their creativity and innovation. For all you know, your work will be the subsequent multi-awarded website design as you learn from those that have been recognized.
  • The Starter Kit. This is another helpful resource for both web designers and web developers.
  • One Page Love. If you are working on the design of a one-page website, you should check out One Page Love and be inspired on how to make your work more visually appealing and user-friendly.
  • UI Parade. Apart from knowing various interface design tools that you can use, User interface design tools and design inspiration.
  • The Best Designs. This is another resource where you can find only the best web designs.
  • Agile Designers. Whether you are a designer or a developer, this is one of the best resources that you should consider checking out.
  • Niice. Without question, this is a search engine with taste. With only one search, you can already gather hundreds of sources. You can search the best sites in just one place. Coming up with smart and impressive moodboards that can make your concepts stand out is a breeze with Niice. It is so nice, indeed.
FireShot Screen Capture #054 - 'Kaboompics_com - Free Hi-Res photos' - kaboompics_com_#

Get high resolution images for free

 

D. FREE STOCK PHOTOGRAPHY

Beyond any shadow of a doubt, photography has always been a vital component of web design. However, many websites have made use of crappy images in their design. Additionally, these photos come with a high price tag. Thanks Heavens, though, there are now numerous websites that offer strikingly awesome photographs that you can incorporate in your web design. The best part is that these stock photography websites offer their respective images for free; you don’t need to worry about copyright restrictions. This simply means that you can copy, modify, or distribute the images that you have downloaded.

Here are some of the most common stock photography websites that you can visit for a free download of stunning images:

  • Stock Up. This is one of the best stock photo websites that offer a wide range of appealing images.
  • Pexels. Without question, Pexels has the best free photos in one place-from summer, business, abstract, sunset, art, black-and-white, car, building, people, vintage, technology, street city, nature, and many more, you can surely find an image that you can use for the website that you are working on.
  • All the Free Stock. This website offers not only free stock images and videos, but music and icons as well. As this website is also listed under the Creative Commons Zero license, you are free to use its photos even for commercial purposes, even without spending a single centavo.
  • Unsplash. Again, this is another stock photo website that enables you to use its high resolution stock images. For every 10 days, you can download 10 new photos.
  • Splashbase. Finding the photo that you need and discovering other high resolution images and videos are all possible with this website. They are free, too.
  • Startup Stock Photos. You can easily start something and go with the free photos that you find in this website.
  • Jay Mantri. Apart from being free, you can do anything that you wish to do with the downloaded pics from Jay Mantri. With its high resolution photographs and a little imagination, creating magical images is a breeze.
  • Moveast. There is no need for you to worry about using photos from this website for free as this is about the journey of a Portuguese man traveling East, who believes that every photo on the Internet should be used by anybody without any cost at all.
  • Stokpic. If the other mentioned stock photography websites cannot give you the photos that you are looking for, you might just find it here. They’re totally free, as well.
  • Kaboompics. Without question, this is the best way to download free photos that are absolutely stunning.
  • Function. This website offers free photo packs.
  • MMT. This website offers some of the most impressive free stock photos on the Internet as the photographs are taken by Jeffrey Betts.
  • Travel Coffee Book. This website abounds with high resolution images taken from travels around the world. Yes, they are for free, too.
  • Designers Pics. You can easily find engaging photographs here, whether for your personal or business use.
  • Death to the Stock Photo. This website sends you great images every month for free.
  • Foodie’s Feed. Working on a food-related business website? Foodie’s Feed has a lot of high resolution food pictures that you can use and make your website users salivate.
  • Mazwai. High definition video clips and footages are available for free in this website.
  • Jéshoots. If you want to avail of new and modern photos for free, this is the ideal stock photography website for you.
  • Super Famous. This stock photography website features the works of Folkert Gorter, a Dutch interaction designer.
  • Picography. This website, likewise, features free hi-resolution photographs.
  • Pixabay. This is another website where you can get free high-quality images.
  • Little Visuals. You can get 7 hi-res photos in your inbox every week. That’s one new high-resolution photo every day.
  • Splitshire. Mouth-watering free stock photos.
  • New Old Stock. If you want to use vintage photos from the public archives, check out this site.
  • Picjumbo. This is another site where you can download completely free photos.
  • Life of Pix. The photos from this website are not only for free; they are high resolution, too.
  • Gratisography: If you can’t find the free high-resolution photos that you want, this website might just have it.
  • Getrefe. More free photos that might just be of big help to the design that you are working on.
  • IM Free. This website boasts of a curated collection of free photograph resources.
  • Cupcake. This is, without question, a photographer’s treat, specifically by Jonas Nilsson Lee.
  • The Pattern Library. If you are looking for free patterns for your projects, this is the website worth checking.
  • Public Domain Archive. This website offers new 100% free stock photos.
  • ISO Republic. This stock photography site offers high-quality photos that are for free.
  • Paul Jarvis. Paul does not just give you valuable tips on design, but his site also teems with a lot of high-resolution photos which you can use for free.
  • Lock & Stock Photos. Before deciding on what photographs to use, check this website for more free stock photos that you can choose from.
  • Raumrot. This website also offers a wide array of choices for free high-resolution images.
  • Bucketlistly. This website offers a wide array of travel photos that can surely make your web design more visually appealing.
  • Magdeleine. You can get a free high-resolution photograph every day.
  • Snapographic. You can pick from a wide array of photos featured in this website and use your choices either for personal or business use. Free stock photos for personal & commercial use.
font squirre

Use the right typography and improve user experience

E. FREE TYPOGRAPHY

Whether you realize it or not, your typography helps to create an experience for users before they even read a word or clicked a button. Typography has the potential to go beyond merely telling a story; it shows the user who is behind the website and what you’re about. The treatment of type creates an atmosphere and elicits a response much the same way as your tone of voice does.

  • TypeGenius. With TypeGenius, you can easily find the most suitable font combo for your next project.
  • Font Squirrel. This offers 100% free commercial fonts.
  • FontFaceNinja. This browser extension enables you to find what type of web font a particular site uses.
  • Google Fonts. This is a free and open-source fonts that are optimized for the web.
  • Canva – Know more about your fonts with this concise but helpful glossary about fonts
  • Beautiful Web Type. You can find the best typefaces from the Google web-fonts directory here.
  • DaFont: This site houses fully downloadable fonts that are for free.
  • 1001 Free Fonts. This site has a wide selection of free fonts that can make the website that you are working on more user-friendly and visually appealing.
  • FontPark. Without question, this is the web’s largest collection of free fonts.
  • Font-to-width. This source contains fit pieces of texts that are neatly within their containers.
fontello

Generate free icons with Fontello

F. FREE ICONS

As you already know, icons are a great way for you to grab a website user’s attention, hence, they should be part of your arsenal. While it is true that you can create your own icons, there is no denying that doing so is time-consuming. So, why don’t you just check out the following sites that offer attention-grabbing icons for free?

  • Fontello. This site generates icons.
  • Flat Icon. This is a search engine for 16000+ glyph vector icons that can help you choose the best icons to make your website standout.
  • Material Design Icons. This site offers 750 open-source glyphs by Google that are for free.
  • Font Awesome: Without question, this is the best resource for the iconic font and CSS toolkit.
  • Glyphsearc. This is meant to help you search for icons from other icon databases.
  • MakeAppIcon. With just a simple click, you can already have app icons of all icons.
  • Endless Icons. If you are into flat design, you should visit this resource as it offers free flat icons and other creative stuff.
  • Ico Moon. This is an icon generator that can generate more than 4000 free vector icons.
  • The Noun Project. This offers thousands of glyph icons made by different artists.
  • Perfect Icons. This is a tool for the creation of social icons.
  • Material Design Icons. This features 750 open-source glyphs by Google that are for free.
  • Icon Finder. This offers free icon section of the website. Without question, this is a must-try.
  • Free Round Icons. This includes a Doodle Set, Flat Set, and Vector Line Set. Very useful, indeed.
  • Icon Sweets. This includes 60 free vector Photoshop icons that can, without question, make your website more fun and entertaining.
FireShot Screen Capture #055 - 'uinames_com' - uinames_com

You can use this name generator for your mock-ups

G. OTHER USEFUL STUFF

Here are some of the other resources on the Internet that can help you with your design with its free offerings:

  • UI Names. This generates names for use in designs and mock-ups randomly.
  • UI Faces. With this, you can find and generate sample avatars for user interfaces with ease.
  • UI Blurbs. This offers quick user bios that you can use for your mockups.
  • Copy Paste Character. This enables you to come up with an easy click-to-copy.
  • Window Resizer. This can help you monitor how your design works on various screen resolutions.

With the above-mentioned resources, coming up with an engaging design that is fun and easy to use is, without question, a breeze. As an adage goes, “Sometimes, the best things in life come for free.” Apparently, the same thing can be said when it comes to web designing resources.

Powered by WPeMatico

Why Learning JavaScript and CSS Won’t Make You the Best Web Designer

Looking at the headline, you might do a double-take and exclaim, “Say what?!?” “Are you kidding?”

languages

JavaScript and CSS are two of the foundations of web development and you can’t simply do without them. We, of course, think so, too. However, learning JavaScript and CSS alone isn’t enough because there are still a lot of technologies, tools, and resources you can learn and utilize to up your game as a web design professional.

And because we here at 1WD want the members of our community to be on top of their games, we created a list of the different languages, libraries, frameworks, databases, and CSS that could help you become a better web designer.

Languages

Like our languages, there are also several computer languages you can use to issue a command to your computer. Each of these languages is not better than the other, and each has its own advantages and disadvantages.

FireShot Screen Capture #027 - 'JavaScript_com' - www_javascript_com

JavaScript comes at the top of the list with its versatility

JavaScript

JavaScript is no doubt the first and foremost language you need to learn as a web design professional because of its versatility. It works across all web browsers, databases, mobile apps, frameworks, and even programmable hardware. And with the introduction of the ES6, JavaScript will become much more powerful and easier to write. To further utilize JavaScript, learn more and use Bower and npm, dependency management tools as well as jshint and jscs, tools for code style and issue reporting. Grunt, a javascript runner tool, is also helpful when using Java to help you zip files, lint on js files, and compile Less files.

FireShot Screen Capture #009 - 'CoffeeScript' - coffeescript_org

CoffeScript is on the left and on the right is its JavaScript output

CoffeeScript

Programming languages also has some sort of dialect, and CoffeeScript is one of them. Inspired by Haskell, Python, and Ruby, CoffeeScript exposes the good parts of JavaScript and enhances its brevity and readability to make it easier on the eyes. Then it converts into javascript living its tagline, “It’s just JavaScript.”

FireShot Screen Capture #010 - 'Welcome to Python_org' - www_python_org

Python makes mathematical calculations easy

Python

Python is an object-type multi-purpose programming language that works on the Django framework. It is popularly used in mathematical calculations because it makes solving mathematical problems as easy as writing down your own thought in pen and paper. In addition, Python is also easy to learn, can be written once, and run on any computer without having to change the program.

FireShot Screen Capture #011 - 'Ruby Programming Language' - www_ruby-lang_org_en

Ruby is indeed a real gem for various web applications

Ruby

Running on the Ruby on Rails framework, Ruby is similar to Python. Besides Rails, Ruby is used for almost everything from web applications to desktop GUI applications, and even web servers, intelligent libraries, threaded databases servers, low-level system utilities, picture recognition engines, and throughout computing.

PHP

PHP is the language used by WordPress. But basically, though, it is used to add more functionality to your website which can’t be done by using HTML alone. PHP can do a lot of things from performing calculations, interacting with MySQL databases, creating simple and dynamic graphics, such as the dynamic Twitter signatures.

FireShot Screen Capture #012 - 'The Go Programming Language' - golang_org

Go is a new language developed by Google

Go

Go or Golang is a new language from Google and is becoming popular in the programming circles. According to Google’s own FAQ, it allows you to compile a large Go program in a single computer in just a few seconds, has a model for software construction making it easy to conduct dependency analysis, and avoids much of the overhead of C-style include files and libraries. Despite its popularity, we don’t recommend to migrate your program to it just yet because it is on its early stages and development.

FireShot Screen Capture #028 - 'Cocoa Dev Central_ Learn Objective-C' - cocoadevcentral_com_d_learn_objectivec

ObjC is the only language used for iOS and OS X

Objective-C

ObjC is the main language behind Apple’s OS X and iOS as well as their APIs, Cocoa and Cocoa Touch. This simple language which includes Smalltalk-style messaging to the C language is an extension of the standard ANSI C. ObjC is an object-oriented language which features great object orientation, elegance, and low-level ability.

FireShot Screen Capture #015 - 'Developing iOS 8 Apps Using Swift - Adding Animations, Audio, and Custom Table View Cells I iOS Swift Tutorials b_' - jamesonquave_com_blog_developing-ios-8-apps-using-swift-animations-

Swift is Apple’s new language for iOS and OS X apps

Swift

Swift is the new programming language Apple uses for its OS X and iOS apps. The new language is easy to learn and understand even by those who are just starting to learn code. What makes Swift popular is how it provides fast real-time feedback and its ability to be seamlessly incorporated to the ObjC code.

FireShot Screen Capture #016 - 'Elixir' - elixir-lang_org

Functional programming is one of Elixir’s features

Elixir

Elixir is another newcomer which utilizes Erlang’s great features. Those who have used it has compared it to Ruby in terms of its syntax. Elixir is a highly scalable language which uses its lightweight processes to run in all your cores. Its best features when it comes to performance, however, is its occurency.

Frameworks

Frameworks make it easier to build and work with programming languages. What it basically does is it takes all the repetitive and difficult tasks of setting up a web application and it performs the dirty task for you or make the task easier for you.

FireShot Screen Capture #036 - 'Meteor' - www_meteor_com

Meteor burst into the scene as a radical platform

Meteor

Meteor is a full stack javascript framework which is fast gaining popularity because of its radical and new approach to web application. It slowly blurs the line between front and back end development by allowing you to create real-time apps. It also has a dynamic and growing community which continuously creates packages for Meteor.

FireShot Screen Capture #029 - 'Node_js' - nodejs_org

Node.js is scalable, efficient, and fast

Node.js

Node is a server-side javascript framework which is often used for simple website backends and works well with other frameworks, such as Express, API endpoints, web socket servers, and torrent clients. Its scalability to thousands of active connections, efficiency and speed in writing parallel patterns easily, and tons of great libraries based on a solid package manager are some of the reasons for  its popularity. Aside from this, Node.js is also becoming popular for non-service usages, such as serving your web content. If you have just started learning or you want to learn more about Node.js, the perfect place to start is at NodeSchool.

FireShot Screen Capture #030 - 'Ruby on Rails' - rubyonrails_org

RoR is still a very reliable classic

Ruby on Rails

It is a full-stack framework which uses, obviously, Ruby and covers both the back and front end of design. Twitter and Basecamp are two of the most popular sites which have Ruby on Rails at its core. One of its greatest advantage is it allows you to really focus on building complex websites by eliminating lame tasks, such as handling database communications, processing Ajax updates, or providing a template system for handling layouts and page sections.

FireShot Screen Capture #031 - 'The Web framework for perfectionists with deadlines I Django' - www_djangoproject_com

Django encourages rapid development

Django

Django is another full-stack framework but uses Python. Its clean and pragmatic design encourages rapid development. Some of the main reasons why some developers prefer Django over other frameworks are its excellent open-source documentation (even when it first came out), an amazing and supportive community, it’s been crowd-tested, and numerous of packages available – the latest count was more than 3,000 packages and still growing.

FireShot Screen Capture #032 - 'Ionic_ Advanced HTML5 Hybrid Mobile App Framework' - ionicframework_com

Ionic is a mobile framework with an outstanding performance

Ionic

Ionic is a mobile framework that has gained popularity because it’s easy to learn and develop compared to native development when it comes to creating mobile apps. If you have a good javascript foundation, you’ll be able to learn the nuances of deploying or developing on mobile using this framework.

FireShot Screen Capture #033 - 'Bootstrap · The world's most popular mobile-first and responsive front-end framework_' - getbootstrap_com

Bootstrap is still one of the best and most reliable

Bootstrap

Without a doubt, Bootstrap is one of the most popular UI frameworks for building HTML, CSS, and JavaScript. And that’s not without a reason. The two primary reasons are, of course, speed and responsiveness, which are very essential in today’s web applications. Aside from these, it is also highly customizable allowing you to give freedom to your creative ideas.

FireShot Screen Capture #034 - 'Create a website on WordPress_com today' - wordpress_com_website

The ever-evolving WordPress remains on top of its game

WordPress

1WD is a big fan of WordPress, a preference shared by many experts in the industry. In fact, 20% of website including BBC America, The New Yorker, and the official Star Wars blog run on the WordPress framework.

Foundation

Foundation is a responsive front-end mobile framework which also allows you to build using HTML, Javascript, and CSS. The framework comes in three different packages – CSS, Sass, and Rails – with the first package designed for beginners. Its quick rise to fame is due to the fact that it doesn’t require any particular bak-end. Instead, it runs entirely on the browser making it easy for you to work locally.

backbone

Backbone.js provides event-driven communication

Backbone.js

Backbone is a front-end javascript framework which provides event-driven communication between models and views as well as other elements. Models in backbone.js are tied to a back-end and the framework provides excellent support for RESTful APIs allowing you to map the models to a RESTful endpoint. Therefore, if the API is correctly designed, backbone is automatically configured to directly access them to read, write, and delete operations. On the other hand, if you are not using a RESTful API at the back-end, backbone will still be able to accommodate for that flexibly.

angularjs

A javascript framework built by Google

AngularJS

Angular.js is a front-end javascript framework built by Google to build powerful web apps. One of the biggest reasons for popularity is you write less code because there are no getters and setters. Another good reason to use angular is that it allows you to split your app into MVC components and then it manages your components and serves as the pipeline that connects them.

ember

Emberjs allows developers to join Ember projects much faster

Ember.js

Ember.js is another front-end javascript framework like Angular. One of its outstanding characteristics is it allows other Ember developers to join a project much faster than its counterparts. Another is the set of tools which saves you the hassle of creating mock servers for the front-end, organizing code into modules, setting up build tools, and writing common functionality in their app.

phonegap

Phonegap exposes the API of iOS and Android

Phonegap/Cordova

Phonegap, also known as Apache Cordova, is a mobile framework which exposes the native APIs of Android and iOs when using javascript. Aside from the cross-platform advantage, other noteworthy features include custom controls. For example, if you are making a custom tab bar which looks different than the native, you have to write more code for that. Phonegap, however, gives you the freedom to do what you want because it is still web.

asp.net

ASP.NET wins when it comes to security and safety

ASP.NET

Built by Microsoft, one of the beauties of ASP. NET is its ability to reduce the amount of code to build large applications as well as its security created by Windows authentication and per-application configuration. Add to that its early binding, native optimization, and caching services which add to more efficient performance. The framework works perfectly whether you are building a small or large website.

drupal

Drupal champions PHP

Drupal

There are a lot of CMS framework on the web and Drupal is one of the most popular using PHP. Often compared with the similar CMS, SiteCore, Drupal has an edge being an open-source CMS with a dynamic community which continuously develops it. Because of this, Drupal has tons of free designs and plug-ins for rapid site assembly.

FireShot Screen Capture #024 - 'Laravel - The PHP Framework For Web Artisans' - laravel_com

Laravel has made PHP fun again

Laravel

Laravel is a PHP framework that is gaining popularity this 2015 because it has made PHP fun to use once again with its noteworthy features, like the composer packages which modularize the framework making the process of dependency management much easier.

FireShot Screen Capture #026 - 'Play Framework - Build Modern & Scalable Web Apps with Java and Scala' - www_playframework_com

Play has a lightweight and web-friendly architecture

Play

Play is a  highly scalable web app framework using Scala and Java. Built on Akka, Play boasts of a web-friendly and lightweight architecture which aims to optimize your productivity using hot code reloading, convention over configuration, display of errors in the browser.

FireShot Screen Capture #025 - 'hood_ie' - hood_ie

A front-end framework for mobile apps

Hood.ie

Hood.ie is a full stack development front-end framework which allows you to build web applications using front-end technologies, such as JavaScript, CSS, and HTML while allowing data manipulation without having to worry about server side coding. However, Hood.ie is the most ideal in creating mobile apps.

Libraries

Libraries group code snippets to give you a vast amount of functionality without letting you write all the code by yourself. Libraries also ensure that all codes work efficiently across all web browsers and devices.

FireShot Screen Capture #018 - 'jQuery' - jquery_com

jQuery is still no doubt the largest library

jQuery

When it comes to libraries, jQuery is no doubt the largest open-source javascript library which is CSS3 compliant and can run across different browsers. One of the best things about is that you don’t really need to heavily know code to use it. It also has a vast community which supports and constantly develops its components.

react

React is a library developed for Facebook

React

React is a javascript library developed by Facebook which provides very fast performance due to its virtual DOM. It can be easily plugged into existing projects. React has a lot of potential because of its active community which constantly develops its components. One of its coolest features is its ability to update only the part that needs to be changed once the “Refresh” button has been hit.

underscore

A javascript library for common programming tasks

Underscore

Underscore is also a javascript library which gives you the utility for common programming tasks. It gives you the functional programming support like the one you get fromn Prototype.js, but it does not extend any of the built-in javascript objects.

Databases

Databases, obviously, are like filing cabinets where you store all your data. They basically come in two types – SQL and noSQL.  Where SQL makes sure that all data is correct and validated, noSQL gives you a lot of flexibility to maintain and build applications.

FireShot Screen Capture #019 - 'MongoDB' - www_mongodb_org

One of the best noSQL databases

Mongodb

Mongodb is an open-source noSQL database and the only database at the moment that supports Meteor. Some of its features include high scalability and tools which allow you to deploy, monitor, back up, and scale the database easily.

FireShot Screen Capture #020 - 'Redis' - redis_io

Redis is a key-value store

Redis

Redis is also a noSQL database but unlike Mongodb, it is a key-value store with built-in persistence and more datatypes. Redid gained popularity because of its lightning speed for retrieving data. However, it doesn’t allow for much depth when it comes to data storage.

postgre

PostgreSQL has powerful querying faciliites

PostgreSQL

PostgreSQL is an open-source SQL database. Compared to MySQL, Postgre isn’t object-relational and has more powerful querying facilities. Other advantages of Postgre include subselects, user-defined datatypes and functions in various languages, and data handling. On the other hand, some of its SELECT queries might be a bit slower compared to its MySQL counterparts.

sql

SQL Server saves you time on development and troubleshooting

SQL Server

This is an SQL server manager built by Microsoft. Some of its pros include tools, such as BI tools and SQL Server Management Studio, which save you a lot of time in development and troubleshooting. And since it is one of Microsoft’s flagship products, it is well-documented and rapidly evolving in various technologies.

CSS

CSS is one of the foundations you need to learn as a web developer. And as every one of you well know, CSS is responsible for enabling you to change the fonts, colors, animations, and transitions of the website you’re building. In short, CSS is responsible in making the web look aesthetically pleasing to the eye.

less

Less allows you to do more

Less

CSS can be quite a headache but with a CSS pre-compiler like Less, it makes working with CSS codes a lot easier. Less can work inside Node, the Rhino, or in the browser. There are also third-party tools available which allows you to manage and compile your files much easier.

FireShot Screen Capture #023 - 'Sass_ Syntactically Awesome Style Sheets' - sass-lang_com

Sass is still the biggest and most mature CSS extension language

Sass

Based on what it said on its website, Sass is the most mature, stable, and professional CSS extension language. Sass is the inspiration why Less was created and compared to Less, it has some smart extras. However, you need some extra time to learn them. Sass uses Ruby and needs to be setup on Mac, Windows, and Linux. However, it has a version which runs on the Node.js.

FireShot Screen Capture #022 - 'Stylus — expressive, robust, feature-rich CSS preprocessor' - learnboost_github_io_stylus

Stylus is still new but still worthy of mention

Stylus

Compared to the Sass and Less, Stylus isn’t as popular, but it has some noteworthy features which deserve it to be on this list. For one, Stylus allows you to define your own functions for smart CSS parameters expansion and management. It also has different types of loops, conditionals, and import option which allows you to reuse CSS libraries.

Conclusion

With all these technologies available and more being developed, which one is better? The honest truth is, not one is better than the other one, but it is just a matter of preference which one will you use. Though you don’t need to learn all of them, you are at a bigger advantage if you know not just one, but a number of these technologies.

Powered by WPeMatico

X Theme Update: How the Cornerstone is Changing WordPress Customization

A little more than a month ago, Themeco changed X with one of it’s biggest updates yet. Aside from overall bug fixes, they introduced a brand new interface which they called Cornerstone.

full cornerstone

The new X Theme update

Cornerstone is unique in that it’s a completely front end site builder system enabling you not to look at the WordPress backend anymore. Instead, you see each page how it is in real time.

Cornerstone modules

Cornerstone let’s you see the page at the front end in real time

As an early adopter, I updated my theme as soon as I got the email about the update. Let’s just say I had a few issues at first, and so did much of the X theme community (the poor staff were probably up all night answering the same questions for the first 3 days). After using it for a month, however, I feel like I have a good hand on it allowing me to see some of its main pros and cons.

What You Get Inside the Box

Instant changes

One of my biggest issues with X was that I found their version of Visual Composer much slower than the normal one. Themeco explained that it was because they would automatically save the page every few seconds. Luckily, they’ve completely changed that in the new update.

As someone who spent half of my design time clicking the “Preview” button, this was a godsend. I actually assumed that it would work similar to how the Customizer worked where it usually takes a few seconds until it reloads the page, but it’s actually instantaneous. The same also applies to their on page custom CSS and Javascript.

cornerstone 2

With Cornerstone, you can now easily update a page

It’s really easy to rearrange the layout

This goes hand and hand with instant changes. You can take entire sections and easily move them around. It is very different than the Visual Composer where you have to drag the entire section to where you want it and hope you put it in the right place. With Cornerstone, you can now rearrange a page in a matter of seconds.

cornerstone 3

You will be able to see how the page will appear in different devices

View the page instantly on multiple devices

Getting the design right on every device has always been an issue of mine. I actually felt they made this just for me. Continuing on with the instant page theme, you can now see how your page will appear on a PC, Laptop, Tablet, Mini Tablet and Smartphone. This pretty much takes away having to go to mobile device sites to test out your page. Not to mention, you don’t have to wait until the page is done to test it.

You can save content blocks as oppose to an entire page

This is especially great for large sites that want a certain look and feel to part of their site. You can actually save blocks to be used for later. You can also use blocks and templates created by other designers as well as Themeco templates.

But There are Some Downsides

cornerstone 4

However, you don’t have access to the Visual Composer

You lose the Visual Composer Library

While the built-in library is impressive, you don’t really have access to the Visual Composer or it’s extensions, such as specialized content band effects, overlays, and little arrows. True, you can take the shortcode from another page and embed it into the text box, but who wants to?

Individual blocks can be annoying

I mentioned earlier that moving sections is really easy.  The same, however, can not be said for moving individual blocks. It might be easy to move a block to an adjacent block, but if you want to move one block from the top of a page to the bottom, good luck. In all fairness, Visual Composer wasn’t good with this either, but at least you could take the piece and scroll down with the scroll wheel. With Cornerstone, you can’t do that.

It takes a bit to learn

This might not apply to people just getting the theme but coming from Visual Composer, I found learning how to use it pretty annoying. The basic stuff is pretty easy, since they have great videos on the site. My issues were some of the more technical things, which aren’t so obvious.

For example, I couldn’t figure out how to get a row to full width on a page. Coming from the Visual Composer, it was full width by default. But with Cornerstone it would default to part width. After opening up a ticket, one of the staff informed me that I could easily fix that by going to the “row” section in the sidebar, which can’t be accessed through the sidebar or through the front page interface.

In order to get to the row, you first have to click on the element, then you can to go the sidebar and click on the “row” breadcrumb. Only then will you be able to get to the row.

The Verdict

I have to say, I do like Cornerstone. It was a bold choice by changing to a completely front end system, and Themeco is doing a nice job of it. It does take some getting used to and it still has few kinks to work out. But I trust Themeco to listen to their customers.

In fact, they’ve actually already made a few changes based on issues the community have brought up. For example, a big issue was that the text editor was too small for large pieces of text, after hearing about it, they made a modification to the system that allowed the text editor to stretch. Not exactly the most groundbreaking change, but the fact that they heard what the community wanted and responded is always a good sign.

I’m really excited to see what more they have in store.

If you want to see how the new X theme performs, you can view the demo and purchase the theme here.

About the Author:

Isaac works as a UX/digital strategist for East Insurance Group. He enjoys tennis and helping business owners get the best coverage for their business.

Powered by WPeMatico

How I’m Going to Ruin My Web Designer Health and Career

Web designers are part of the privileged few who get the chance unleash their creative side at work. For web designers, a regular day revolves around sitting in front of his computer and extracting all his creative juices to come up with new and innovative designs that can impact the lives of the web users.

health&career

However, no job is a bed of roses. While it is true that web designers are some of the most sought-after and well-paid workers in the world, they are also some of the most prone to various health hazards.

What Will Ruin Your Web Designer Health and Career?

There are many perks that come with being a web designer, like having the choice to be a freelancer. Only a few people are able to earn well while having total control of their time. Aside from that, web designers have the opportunity to make a difference in the lives of the company that they work for and to the people who use the websites they have designed.

There is a dark side to this life, however. Since most, if not all, web designers are always pushing themselves to the limits so that they can come up with an outstanding design, there are some who have developed habits that have become a health hazard.

coffee

We only need 400 milligrams of caffeine everyday

1. Drinking Too Much Coffee

Coffee is the world’s favorite morning beverage. Who doesn’t get perked up even with just the thought of coffee alone in the morning? While it is true that many cannot start their day without a cup of coffee, it does more for web designers than just to jumpstart their daily routine.

Many have developed the habit of drinking as much as 5 cups in a day. I’m pretty sure that a lot of people drink more than a cup of coffee a day, but for the many web designers, the average is 5 cups in a day. This helps to keep their focus.

The Cons of Drinking Too Much Coffee

According to health experts, it is safe to take as much as 400 milligrams of caffeine a day, which is equivalent to 4 cups of brewed coffee, 10 cans of cola, or two cans of energy drink. Experts have warned that drinking more than 400 milligrams of coffee, though, can cause risky side effects, such as:

  • Nervousness
  • Restlessness
  • Fast heartbeat
  • Muscle tremors
  • Irritability

However, some web designers are forced to drink a cup or more of coffee so that they can stay up late at night and finish what they are working on. To avoid staying late at night, it is best to start tinkering with your design as early as possible whether you are a freelancer with time freedom or work in an agency.

sitting

Sitting is the new smoking

2. Sitting for a Long Time

This is a given, right? Of course, you cannot expect yourself to work standing. However, because it is important to focus on every detail of his work, you spend more time sitting in front of your computer, often neglecting to stand once in a while to stretch your muscles. While it is good to be focused, you should make sure that to lift your butt out of your chair once in a while.

The Health Hazards of Sitting for a Long Time

Researchers have established a link between sitting for a long period of time to various health issues. This includes obesity and metabolic syndrome, which is an aggregation of high blood pressure, high blood sugar level, excess body fat, especially around the waist, and abnormal levels of cholesterol.

A recent study has revealed that people who spend more than 4 hours of facing recreational screen, whether TV or a computer, have

  • 50 % increased risk to death, whatever the cause may be
  • 125 % increased risk to cardiovascular diseases such as chest pain and heart attack.

In fact, a lot of experts have declared that sitting is the new smoking because its long-term effects to your health is similar to smoking.

How to Discipline Yourself from Sitting for Too Long

  • Set an alarm. If you are a web designer who sits in front of his computer most of the time in a day, one of the best things that you can do so that you will be reminded to take a break every hour is to set an alarm that will remind you to stand up.
  • Pace around your place for at least 5 minutes. Don’t think that this will be a waste of time. in fact, staying away from your work at regular intervals can usher in more creative ideas. Apart from walking back and forth, do some stretching your arms and back. This will not only improve your blood circulation, but it can also avoid neck and shoulder stiffness as well as back pains.
  • Use a standing desk at work. More and more companies have adopted a standing desk for their workers. If you are working at home as a freelance web designer, you can have 2 workstations – one that will enable you to work sitting comfortably, and another one that will make it possible for you to stand and work.
smoking

One stick of cigarette shortens your life by 5 minutes.

3.Smoking Heavily

Everybody knows that smoking is bad for the health, and constantly reminding a person about its hazards is like playing a broken record. However, many web designers cough up the excuse of not quitting because it gives them relief from the stress that they are experiencing.

Unfortunately, you can be a heavy smoker and a coffee drinker, which double up the hazard to your health – a perfect combination and a source of bliss.

Three Major Diseases Caused by Smoking

  • Lung cancer
  • Chronic obstructive lung disease such as bronchitis and emphysema
  • Coronary heart diseases

Researchers have, likewise, said that a smoker’s life is shortened by around 5 minutes for every stick of cigarette that he smokes. On the whole, a smoker’s life may be shortened by 10-15 years. That’s a lot of time that could have been spent for a purpose-driven and meaningful life.

How to Quit or Minimize Smoking

If you want to quit, or minimize smoking, here are some of the tips that can help you succeed:

  • Understand why you want to quit. It is not enough that you decide to quit smoking; you need to understand why and not just do so because many of your smoker friends do so. You need to understand that you are at risk of having lung cancer, or you can be killing your family with the secondhand smoke that you emit. This will make you further committed to quit smoking.
  • Make a commitment. The next thing that you should do to quit smoking effectively is to make a commitment to yourself. Think of the benefits you will have once you have curbed the habit. Not only will you be healthier, but you can save additional money, too, as you no longer need to purchase cigarettes.
  • Seek professional help. Commitment and willpower are not enough for some people to quit smoking. You may need professional help to help you quit. See a doctor so that you will know if nicotine patches are ideal for you.
  • Try electronic cigarettes. The growing number of people switching to electronic cigarettes from the real ones is a clear indication that many people are, indeed, serious about quitting smoking. While it is true that electronic cigarettes contain nicotine juice, it is not burned, hence, it does not produce tar. Furthermore, since electronic cigarettes are similar to real cigarettes minus the fire and real smoke, giving you the feeling you have quit smoking, when in fact, you have.
  • Set a designated smoking area. If you are working at home as a freelancer, one of the best ways to limit the number of cigarette sticks you consume in a day is to make sure that you don’t put an ashtray on your work desk. Set a designated smoking area, preferably outside the house, that will make you feel lazy to go to whenever you feel the urge to smoke.
  • Limit the number of cigarette packs that you purchase. If, on the average, you smoke 30 sticks of cigarettes a day, one thing that can help you decrease the amount of sticks that you consume in a day is to purchase less. Hence, instead of buying 2 20-stick packs a day, you should buy only 1 pack instead. This trick will work even better if you live in an area that is far from the convenience stores or groceries.
junkfood

You can train yourself to stop eating junk food

4. Eating Lots of Junk Food

Sometimes you get bored, especially when creative ideas refuse to flow. And, what do you do? Eat lots of junk food. Several of the web designers I know have a stock of junk food in their desk drawers, which includes chips, chocolate bars, peanuts, and many more. While it is permissible to eat junk foods once in a while, it seems that many web designers turn to these unhealthy foods whenever they take a pause from what they are working on, much more when they are left in oblivion, not knowing what to do next or address a design issue.

In order for you to effectively deal with this potent health hazard, here are some of the most important tips that you can heed, whether you are web designer or not:

  • Observe the five-ingredient rule. Before picking a pack or box of food from the supermarket racks, make sure to check the label of what you are aiming at buying. If the product contains more than 5 ingredients on its label, by all means, drop the idea of going for it. This is because products that contain more than 5 ingredients are a red flag for food processing. If you really can’t help purchasing one, make sure that you make it as a treat for yourself, and not for a daily consumption.
  • Go for three colors. Another tip that you should practice is to go for 3 different colors of food. This because a study has revealed that people prefer to have 3 different colors of food on their plate, specifically one color for each type. Hence, instead of eating 1 full candy bar, snack on nuts, some slices of fruits, and a small square of chocolate bar. This combination will not only satisfy your eyes because of their colors, you will get the necessary nutrients, too.
  • Change your routine. Studies have shown that it only takes 3 weeks of doing something daily until you develop it into a habit. Therefore, if you have always associated 3 PM as a time for you to snack on junk foods, it’s high time that you changed this 3 o’clock habit with a healthier one. Instead of buying a doughnut from the canteen, why don’t you just take the opportunity to eat healthier foods, such as grapes, apples, or nuts? Better yet, if you are already overweight, make it a point to pace the corridors of your office every 3 PM instead of shoving some food into your mouth. This way, you can stop yourself from eating junk foods further and stretch your overworked muscles, too.
  • Cap your meal with healthy sweets. Many people indulge in eating sweet junk foods, especially as a dessert. Sure, any meal doesn’t feel complete without the sweets, but this doesn’t mean that you have to resort to junk foods. Instead of indulging in cakes, ice cream, and many other unhealthy sweets, make it a habit to eat fruits, such as grapes or apples. They are not only naturally sweet and devoid of artificial sweeteners; they are loaded with nutrients, too.
  • Give yourself easy access to healthy foods. One effective way for you to get rid of your cravings for junk foods is to stock on more healthy foods inside your fridge. Furthermore, make them more accessible and convenient for you. For instance, make it a habit to slice carrots or cucumber ahead of time so that you can easily pack them as part of your lunch or snack in the office. This will not only help you refrain from eating junk foods; it will enable you to save money, too, as you no longer need to purchase food items from your canteen or from a nearby fast food.
  • Identify the junk foods that trigger your cravings. Identifying the junk foods that make you salivate is like knowing the enemy. Whatever these foods are-pretzels, doughnuts, ice cream, or other sweet temptations- make sure that you keep them out of sight.
  • Think dirty. No, this is not an undertone. Literally, one of the best ways that can help you kick your craving for junk foods is to imagine them being dirty. This means that you allow your mind to do the job for you to shut your cravings for it. You have the power to do it. For instance, you can imagine that your burger is made of rat or frog meat. Disgusting, right? Or you can imagine your fries being dipped in, well, it’s up to you to come up with a “dirty” dip. Remember, the primary goal of this technique is to gross yourself out until you lose your appetite for the junk food that you want.
  • Chew slowly. In the event that you give in to junk food, one trick that you can do so that you will not overindulge is to eat slowly. Chew every bit of the food carefully so that you can savor your every bite. According to experts, it takes around 20 minutes for the stomach to relay to the brain that it is already full. Hence, if you eat fast, the moment that the message of the stomach reaches your brain, you have already overeaten.
stayingup

Staying up late lets you stack up on calories

5. Staying Up Late

Staying up late can either be a habit or a consequence. In the case of many web designers, it can be both. As already discussed, some web designers are accustomed to drinking a lot of coffee to perk up their senses as they try to squeeze out all their creative juices. As a result, they end up having insomnia.

On the other hand, some web designers purposely stay up late at night because they think they can be even more productive and creative when they are surrounded by the silence of the late night or wee hours of the morning. In the case of others, you can blame it on procrastination. However, whatever your reasons are for staying up late, you need to put an end to it because of the great danger it has on your health:

Health Hazards of Staying Up Late

More evening calories. This is an issue to everyone who stays up late at night. A study has revealed that people who sleep late, like the web designers, eat a lot more at night. And, they just don’t eat more; they eat a lot of unhealthy foods. Another study has said that late sleepers tend to eat 248 calories more than those who sleep early. That extra amount of calories can register 2 pounds of additional weight to a person a month.

  • Weakens the immune system. Lack of sleep has always been linked to a weak immune system. This is the primary reason why many college students get sick after their exam because they burn the midnight candles to prepare themselves for the exam. Furthermore, poor quality sleep, especially such as that is characterized by frequent awakenings, can hasten the growth of cancer cells or make tumors grow aggressively because the immune system has been dampened.
  • Prone to negative thoughts. Yes, you read it right. A study that was published only in 2014 noted that people who go to bed very late at night and sleep for a shorter period of time are easily overwhelmed with negative thoughts as compared to those who have regular sleeping hours. The report further added that late sleepers are prone to repetitive negative thoughts and can’t easily get past them, no matter how small and irrelevant they may be.

With the health dangers associated with staying up late at night, you have to take it upon yourself to ensure that you know when to stop working. If the reason for keeping yourself awake is because you’re down to the wire, you should make sure that next time you should not procrastinate so that you won’t need to extend working till the wee hours of the morning. However, if the reason why you stay up late is due to insomnia, it’s high time that you sought medical help for your sleep disorder to be properly addressed.

Tips on how to deal with insomnia naturally:

  • Exercise. While it is true that health experts warn of exercising at night, as it takes several hours for the adrenalin to go down to its normal level, studies have shown that people who exercise daily, especially in the morning can sleep well at night. Yoga is one exercise that highly recommended for people who find it hard to sleep because of its calming effect on the body and mind.
  • Don’t drink alcohol too much. This is especially true for women. It is true that men who are tipsy can easily go to sleep, but it’s different in the case of women. This is because women who drink too much alcohol are more prone to urinating frequently in the middle of the night, disrupting their sleep. This results to difficulty of falling asleep again.
  • Aromatherapy. Many people have attested that using essential oils, especially lavender essential oil, can help a person fall asleep easily. More often than not, people use lavender oil in a diffuser, and once its scent fills the bedroom, they can easily go to dreamland. Some people, on the other hand, dab a few drops of the oil on the edges of their pillow or sheets, and the effect that they get is still the same with that of using the lavender oil in a diffuser.

There is no denying that web designers are some of the most creative and hardworking people in the world. However, as you strive for excellence, make sure that you don’t forget the greatest asset you have – your health.

Powered by WPeMatico

How to Create Predictable Revenue in Web Design

SUBSCRIBE

How Do You Create Predictable Revenue in Web Design?

Freelancing has its perks and advantages, like being able to control your time and becoming your own boss. But when it comes to having predictable revenue on a regular basis, say on a monthly basis, that is out of the question.

Being a freelance web designer exposes you to unstable and fluctuating revenue from month to month – good today, bad tomorrow. This fact can certainly drive you towards hopelessness.

But wait! There’s hope because you can actually create predictable revenue as a web designer.

The statement might sound bold, even preposterous, especially if you have been around the web design industry stuck in a rut trying to make ends meet. You might be thinking, “You are definitely kidding me!” or “You don’t know what you’re talking about.”

Paul Ryan of Marketslide, however, believes otherwise declaring boldly that you can definitely create predictable revenue in web design. He’s been standing by it, preaching it, and living it because he simply believes that web designers are in a fortunate and lucky position.

The Web Designer as a Hub

Again the declaration might be too overboard, but maybe we need to have a change in mindset when we think of ourselves as a web design professional. After all, half of the battle is won in the mind first.

Paul Ryan sees web designers as a hub, someone who brings all other professionals together and form a company. This company, then, brings into fruition all the shared ideas transforming it into a website which everyone can see.

The interesting part, however, is most web designers find themselves get stuck in one-time deals where they begin to wonder what or where the next gig is after the current project is done. A web designer is fortunate if they are able to get a monthly retainer fee to grow and update the website.

So where’s the advantage in that?

Since you’ve already created the hub, you can upsell the idea to your client stressing the fact that you can bring more value and more people who want to see and use their products. By creating a predictable revenue for the company, you, in turn, creates a predictable revenue to your web design business.

How to Sell the Right Way

Think about this: When you sell a website which will take you 50 hours to work on for $1000, it’s just like you have given it for free considering the amount of work and time that goes into it. This simply does not make any sense and you cannot live like that.

Before you get yourself into something, you need to know what’s involved in it; otherwise, you will be overworked and underpaid.

Paul Ryan shares that the right way to sell your products and services is to focus on the three areas of your business:

  • Sales and Marketing – how to sell your services and set clients’ expectations
  • Finance – how to charge and how to simplify charging for retainers on a monthly basis
  • Operations – how to manage your clients and how to get the work done

The keyword in all these areas is to learn how to simplify them so that you can focus on what you love to do best – web design and coding. This is possible by creating a hub where other professionals and creatives collaborate and work together to bring the idea to life.

Conclusion

Looking at what have been said, the biggest contributing factor is value. When you start to add value to your client’s business, that value will be reciprocated back to you. So when you help your client get predictable revenue, the same thing will be given to you.

Watch the video and learn more from Paul Ryan how to create predictable revenue in web design business. Don’t forget to share the good news to others as well.

Powered by WPeMatico

20 Most Interesting WordPress Business Themes

In the past, many business owners thought that having a fancy website was already enough. However, with the sprouting of websites here and there, having a website to promote the business that you offer is just not enough. Truth be told, for you to successfully market your business to highly scrutinizing consumers, you need to invest in a high quality and effective web design to make your business stand out among the rest.

Find some interesting WordPress Themes

Find some interesting WordPress Themes

Here are the twenty most impressive WordPress themes that will surely present the elements of your business to the rest of the world in the most awesome manner. Definitely, there’s going to be one that will do the trick for you and your business:

abundance

Abundance eCommerce Business Theme

1. Abundance eCommerce Business Theme ($58)

This is, without question, an elegant and flexible WordPress theme. This is most ideal for users and developers alike who have no knowledge of coding. It is created on top of the impressive WooCommerce shop plugin and comes with numerous options that will make it easy for you to customize your layout, color, styling directly from the backend. It also comes with 16 predefined skins, 5 slideshows, font, and color choices that will make it a great deal easier for you to come up with a design that you need and want. Additionally, SEO was factored in when this theme was created; its headlines are wrapped in headings, signaling their relevance to search engines. With this feature, you can easily secure a good spot on Google search.

Abundance Theme Key Features:

  • Mega Menu
  • 5 different Slideshows Any Number of Slideshows possible
  • Zoom feature for product images, as well as lightbox
  • Built on top of the WooCommerce shop plugin
  • 16 predefined skins, easy to edit and modify. Any number of skins possible
  • Color picker options for any number of gorgeous color settings
  • Supports Videos form any major video hosting service as well as self-hosted HTML5 Videos with flash fallback
  • Template Builder for unique page layouts
  • Translation ready with po files
  • Visual Shortcode editor with preview function
  • Custom Widgets like, Combo Widget, Recent News, Advertising, Twitter, Twitter + RSS follower count

View Demo and Purchase Theme Here

amber

Amber | Luxury Business WordPress Theme

2. Amber | Luxury Business WordPress Theme ($58)

Does your business cater to the high-end market? If yes is your answer, you should seriously consider using Amber WordPress theme. This theme is most ideal for luxury service providers and VIP businesses. Should you decide to unload some amount of cash for this theme, you will get a sleek and highly editable set up because of its drag-and-drop visual composer page builder. Additionally, it comes with WooCommerce, events and content pages, rental service items, and convenient modules that you can use in more ways than one. Without question, this is a luxury theme that is just right and fitting for your target clientele.

Amber Theme Key Features:

  • Cross-Browser Compatibility
  • WooCommerce ready
  • Responsive Layout on Bootstrap
  • Visual Composer Pagebuilder
  • More than 630 Google Fonts
  • Parallax and Video Background
  • LayerSlider

View Demo and Purchase Theme Here

Evolve – Multipurpose WordPress Theme

Evolve – Multipurpose WordPress Theme

3. Evolve – Multipurpose WordPress Theme ($58)

Evolve is most ideal for eCommece, portfolio galleries, or even just a blog because of its incredible and versatile parallax scrolling feature. Since it is fully responsive as well, people who use mobile devices can easily view your website, too. Furthermore, this theme was created using the latest HTML5 and CSS3 techniques that have been based on the recent standards provided by WordPress. Its other parallax features enable you to make use of its parallax blocks and rotate your text over parallax images. This results to an elegantly stunning website! Additionally, you can easily add widgets, images, text, and other elements to your pages, thanks to its mega option menu option.

Evolve Theme Best Features:

  • Custom skin creator
  • More than 2000 scalable vector icons
  • 5 Built-in sliders
  • Google and Adobe fonts integration
  • Unlimited colors and pattern variations
  • Drag and Drop web page builder

View Demo and Purchase Theme Here

corona

Corona – Business & Portfolio Theme

4. Corona – Business & Portfolio Theme ($53)

Corona is an elegant and flexible WordPress Theme suited for users, as well as developers, with no coding knowledge. The theme comes with a plethora of options, so you can modify the layout, styling, colors and fonts directly from the backend. Its 6 Slideshows, multiple skin, font and color options as well as dynamic template builder will help you create the Website you need in no time.

Corona Theme Best Features:

  • 5 different Slideshows
  • Supports Videos form any major video hosting service as well as self hosted HTML5 Videos with flash fallback
  • Template Builder for unique page layouts
  • All plugins included within the theme
  • Visual Shortcode editor with preview function
  • Custom Widgets
  • Color picker options for any number of gorgeous color settings.
  • Unqiue Sidebars for each page/category possible
  • SEO
  • Uses semantical valid HTML code and CSS so search engines can index the content of your site with ease

View Demo and Purchase Theme Here

Vortex – One Page Parallax Flat WordPress Theme

Vortex – One Page Parallax Flat WordPress Theme

5. Vortex – One Page Parallax Flat WordPress Theme ($43)

Vortex is a well conceptualized single-page parallax WordPress theme. It comes with a smooth parallax scrolling option that goes well with its smooth and contemporary layout. Since it is flat, it is most ideal for a corporate website, portfolio page, or a personal blog, furthermore that it is a fully customizable theme that enables you to tailor each section of your site basing on your personal preference.

Vortex Theme Best Features:

  • Live color changer
  • Supports image and video post types
  • 3 layout headers
  • Flexslider
  • Flat design
  • Logo and background uploader
  • Google fonts

View Demo and Purchase Theme Here

The Flavour – Restaurant WordPress Theme

The Flavour – Restaurant WordPress Theme

6. The Flavour – Restaurant WordPress Theme ($53)

As its name suggests, it is pretty obvious that this WordPress theme is ideal for any food-related websites such as restaurants, cafes, food carts, and many more. The Flavour theme comes with a neatly organized and crisp layout that is easy to customize. Apart from being responsive, this theme is retina-ready, too. What makes this theme ideal for food-related website is that it has numerous restaurant-specific icons, events calendar, and even reservation, too.

Flavour Theme Best Features:

  • Built-in page layouts
  • Mega menu
  • HTML5 animated slider
  • Unlimited sidebars
  • Automatic color picker
  • Sticky navigation menu

View Demo and Purchase Theme Here

Dynamix – Business / Corporate WordPress Theme

Dynamix – Business / Corporate WordPress Theme

7. Dynamix – Business / Corporate WordPress Theme ($58)

Dynamix is a striking WordPress theme with a commanding admin that allows the user to customize every single page of the website. This theme is fully responsive and runs impressively in all devices and sliders. It also comes with an option to disable. What makes this theme further remarkable is that installing it is a breeze with the use of a visual page builder, enabling you to drag, drop, and edit all the elements in a page. While it is true that the Dynamix theme can suit all types of website, this is most ideal for eCommerce, personal portfolio, or a one-page website.

Dynamix Theme Best Features:

  • Parallax
  • WPML Multilingual Plugin + qTranslate compatible and Translation Ready
  • JW Player 6.x Integration with Audio / Video
  • WordPress 4.0 compatible
  • 8 highly configurable stunning galleries
  • Multi-site compatible

View Demo and Purchase Theme Here

Plumber | Building & Construction Business Theme

Plumber | Building & Construction Business Theme

8. Plumber | Building & Construction Business Theme ($43)

Plumber Building & Construction Business Theme, without question, is most ideal for construction, plumbing, handyman, and other building-related businesses. This theme comes with drag and drop page builder, hence, customizing your own website comes easy. If you just know how to use all of its features, there is no way for you not to come up with something less than great. Since its design is 100 % responsive, it can easily load in any device. In fact, it can load well and be easily viewed on all major handheld devices; its layout appear awesome whether it is on a tablet or laptop screen. Since this theme comes with customization options, you can change the visual styles of any of the elements easily without affecting any line of codes.

Constructo Theme Best Features:

  • Amazing responsive design
  • Revolution Slider
  • Six portfolio designs
  • Booking form
  • Drag and Drop page builder
  • WPML-ready

View Demo and Purchase Theme Here

Constructo - WP Construction Business Theme

Constructo – WP Construction Business Theme

9. Constructo – WP Construction Business Theme ($58 )

Constructo is another WordPress business theme that is, likewise, ideal for construction company businesses. This theme also comes with a WooCommerce support and advanced admin panel. Hence, it can be easily used for any type of business.

Constructo Theme Best Features:

  • Vertical menu
  • Powerful admin panel
  • Visual composer
  • Multiple menu type
  • Demos installable

View Demo and Purchase Theme Here

Velvet - Minimal Business Theme

Velvet – Minimal Business Theme

10. Velvet – Minimal Business Theme ($48)

Despite being minimal, there is no denying that Velvet is simply elegant. Thanks to its zooming and scaling slider, image presentation with this theme is engaging. With the aid of its Template Builder, you can easily come up with riveting page layouts, even if you have little or no coding knowledge at all. There is no need for you to resort to plugins since this theme already comes with a built-in slideshow manager.

Velvet Theme Best Features:

  • All plugins included within the theme
  • Zooming/Scaling Slider
  • Aviaslider Included
  • Any Number of Slideshows possible
  • Unique Sidebars for each page/category possible
  • Template Builder for unique page layouts
  • Visual Shortcode editor with preview function
  • Color picker options for any number of attractive color settings
  • Portfolio Custom Post types

View Demo and Purchase Theme Here

Helmets - Ultimate WordPress Theme for Handyman

Helmets – Ultimate WordPress Theme for Handyman

11. Helmets – Ultimate WordPress Theme for Handyman ($58)

If you are into handyman business, then there is no doubt that you should go for the Helmets theme. This theme is basically ideal for handyman business and sites, but it can also be great for construction companies, plumbers, auto shops, carpenter workshops, mining services, architecture, engineering, renovation, electronics, gardeners, logistics, decor, movers, welding company, fuel industry and any kind of handyman business. This theme provides a great deal of ease if you customize or edit your site. The PSD files that come with it are completely layered while its elements are grouped. This makes them easy to identify.

Helmets Theme Best Features:

  • Widget ready
  • Compatible Browsers: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
  • Responsive and retina ready
  • One click demo import
  • WooCommerce Shop integrated
  • Powerful theme options panel

View Demo and Purchase Theme Here

Scalia Multi-Concept Business, Shop, One-Page, Blog Theme

Scalia Multi-Concept Business, Shop, One-Page, Blog Theme

12. Scalia Multi-Concept Business, Shop, One-Page, Blog Theme ($58)

Simply amazing. This is the best way to describe Scalia. After all, this theme is a very versatile parallax WordPress theme that oozes not only with innovative features but comprehensive documentation as well. It comes with 150 totally functional demo pages, hence, creating your own engaging website is a breeze. Additionally, it comes with various customization options that can be accessed on the administration panel. Hence, tailoring your website is a great deal easier. And, since it is fully responsive, it can be easily viewed even on mobile devices.

Scalia Theme Best Features:

  • Over 150 Demo Samples with Awesome Sliders Included
  • Lazy Loading Animation
  • Drag´n´drop Page Builder Visual Composer
  • More than 40 Custom Shortcodes
  • Beautiful Designs from Award-Winning Designer Kontramax
  • More than 400 Customizable Font Icons Included

View Demo and Purchase Theme Here

ECOBIZ - Business WordPress Theme

ECOBIZ – Business WordPress Theme

13. ECOBIZ – Business WordPress Theme (43$)

If you want to have a modern WordPress theme that is both clean and elegant, you should seriously consider ECOBIZ. Since this theme comes with 6 pre-defined skins and unlimited colors, achieving the look that is most suitable for your website is, without question, easy. The 3 types of slideshow, custom types for slideshow, portfolio, testimonials, and team that are packed in this theme will also make content creation stress-free with the help of the user-friendly shortcodes.

Ecobiz Theme Best Features:

  • Custom Page templates
  • Slideshow types
  • Unlimited background color option
  • 6 Pre-defined Skins (Blue, Green, Red, Orange, Dark, Brown)
  • Homepage with Blog
  • Multi-level Dropdown Menu
  • Custom Post type for slideshow, portfolio, teams, and testimonial

View Demo and Purchase Theme Here

Repertoire - Eco-Friendly Business Theme

Repertoire – Eco-Friendly Business Theme

14. Repertoire – Eco-Friendly Business Theme ($48)

Although Repertoire can be used for a variety of sites, such as presentation sites, portfolio, or simple blogs, this theme is most ideal for businesses that are eco-friendly.

Repertoire Theme Best Features:

  • Revolution Slider
  • Redux theme options panel
  • Responsive layout
  • 10 different custom starting skins
  • Easily create your own skin by just inserting inside the skins folder your own skin
  • Custom Gravatar
  • More than 600 google fonts to choose from
  • Built on Bootstrap 3
  • Contact form 7 ready
  • API 3 Google maps
  • Shortcode Generator

View Demo and Purchase Theme Here

Sirens Multi-Purpose Stylish Business Theme

Sirens Multi-Purpose Stylish Business Theme

15. Sirens Multi-Purpose Stylish Business Theme ($48)

Another excellent WordPress theme that can make your website a standout is Siren. This theme is most ideal for corporate, software, business, or portfolio website. One of the most interesting things about this theme is that it already includes a Live Chat Plugin, hence, your website can be more interactive even without paying extra for this feature. Sirens also comes with 7 Header Options which enables you to choose the best header type that will effectively advertise your brand. Although this theme already offers 10 skins, your choice is not limited to what has been pre-defined as you can create your own skin to meet the goals and standard of your website. The Content Builder Module will surely provide you the ease in creating and managing the content of your website.

Sirens Theme Best Features:

  • Content Builder Module for Page and Portfolios
  • Full-width and Boxed Theme Layout
  • 10 Standard Skins + Your Custom Skins
  • Live Chat plugin included
  • 7 header options
  • More than 300 Installable Google Web Fonts
  • Revolution slider plugin included
  • Advanced admin panel

View Demo and Purchase Theme Here

Brick & Mortar - A Personal Business Theme

Brick & Mortar – A Personal Business Theme

16. Brick & Mortar – A Personal Business Theme ($43)

This theme is another elegant WordPress theme that creative business professionals should embrace. Brick & Mortar is a perfect theme for creative businesses, personal service industry professionals, teachers, instructors, and small businesses. Since this theme’s homepage slider makes use of Javascript to display as many as 3 images, the result is simply amazing. In the items description page, you can easily make a list of the products or services that you offer with matching concise descriptions of each. You can then link them to the full-description page. Creating custom pages with Brick & Mortar will not drain you physically and mentally as the page templates and shortcodes are user-friendly.

Brick & Mortar Theme 

  • Drag and drop ordering for your products/services
  • 6 Custom Page Templates
  • WordPress 3.5 Ready
  • 35 Custom Shortcodes
  • Add widgets to your sidebar and footer
  • Custom Widgets
  • Robust and Intuitive Admin Area

View Demo and Purchase Theme Here

Office Responsive Business Theme

Office Responsive Business Theme

17. Office Responsive Business Theme ($48)

Without question, Office is the ultimate theme for any corporate business. This theme boasts of a very professional design with 7 custom post types, unlimited highlight color option, drag and drop homepage modules, optional navigation icons, and an optional responsive layout. This theme has everything that you want and need for your business website.

Office Theme Best Features:

  • 7 Custom Post types
  • Easily Change Post Type Names/Slugs (Portfolio, Services, Staff)
  • Unlimited Filterable Portfolio Pages, Services Pages, FAQ pages…
  • 4 Header Styles
  • Unlimited Theme Highlight & Menu Colors
  • Image Sliders
  • Powerful theme Options

View Demo and Purchase Theme Here

Scope: Agency / Business WordPress Theme

Scope: Agency / Business WordPress Theme

18. Scope: Agency / Business WordPress Theme ($53)

Scope is one of the most ideal WordPress business themes for the freelancer, creative agency, or general business websites. Apart from having strong lines and colors, this theme also enables you to customize the background of your every post, portfolio project, or even the whole page. Now, talk about the ease of getting creative with your website. Additionally, since this theme comes with a support for post formats, you can easily liven up your blog with your very own self-hosted videos, audio, galleries, links, or old-school posts.

Scoper Theme Best Festures:

  • Page Templates
  • Filterable Portfolio that supports audio, video, and unlimited images
  • Color Picker
  • Custom Background Functionality (Tiled, Static & Fullscreen Support)
  • 5 Custom Widgets
  • Post Format Support
  • Full Localisation Support
  • Archives

View Demo and Purchase Theme Here

Unite - WordPress Business, Magazine Theme

Unite – WordPress Business, Magazine Theme

19. Unite – WordPress Business, Magazine Theme ($48)

Unite is a premium WordPress theme that merges powerful communication and sleek design. It will be easy for the users of your website to find what they want because of this theme’s clean and organized approach of presenting content. Unite comes with 5 pre-made skins that are easy to modify and run. The PSD files included in it have been tailored, making it possible for you to skin your website fast.

Unite Theme Best Features:

  • 5 pre-made skins
  • Superfish Dropdown Menu
  • 2 different themed administrative login options
  • 2 slideshow options
  • QuickSkin file for fast and easy design customization.
  • PSD files included

View Demo and Purchase Theme Here

Momento - Photography and Business Theme

Momento – Photography and Business Theme

20. Momento – Photography and Business Theme (43 $)

This theme is the best choice that you can go for if you want to showcase your creative works to entice more clients. After all, Momento is not only a fully featured theme but is easy to customize, too. When you buy this themes, you will be properly guided to maximize its features because it comes with a step-by-step help file. It also comes with Unlimited color schemes and 2 slider options. You might find it strange, though, when you use its live-preview color picker as it removes the transparency from your header background. However, there is no need for you to raise the red flag as this only happens in the live preview of color picker, which makes the color transparency of any header background disappear.

Momento Theme Best Features:

  • Page-Title Background Image can also be a slideshow
  • Video Documentation with a detailed written help file
  • Demo Content included in an XML Import file for quick setup
  • Easily adjust the default heading sizes and colors from the options panel
  • Flickr, Twitter, & Social Media Widgets built-in to the theme
  • Layered PSDs
  • Adjust the header background to any transparency

View Demo and Purchase Theme Here

Regardless of the WordPress theme that you’ll pick, make sure that it will increase the value of your business. Analyze what message you want your business to cascade to your target clientele and what these clients may possibly expect from you. By knowing these things, you can better prepare ahead of time what you should include in your theme and what you should not.

Powered by WPeMatico

How to Add Value to Your Web Design Business

SUBSCRIBE

How Do You Add Value to Your Web Design Business?

You can become the best web designer in the world but if you don’t know how to get your business going, your talent can only get you as far.

This is how the interview with Brian Hoff starts. And his statement reflects the reality of most web design professionals – great talent but poor business acumen.

You might say that you aren’t running a business because you’re both the boss and the employee. However, it takes a lot of business savvy in order to get projects that will sustain you in the long run.

Aside from being business savvy, a great factor in building relationships with your clients is to be able to show them the value you bring to the business. However, you can’t help but not believe some of the information you read or acquired sometimes, simply because you are afraid it won’t work.

Brian Hoff, however, sheds to light how you can do this. Being able a web designer and entrepreneur himself, Brian has the inside knowledge in how to do this. He gained it from his experiences with different clients, including Derek Halpern and Outbrain.

The Value of Stepping Away from Work

One of the downsides of being a freelancer is you tend to overwork or spend most of your time in front of the computer. The common thinking is that when you put in lots of work, you are being productive. However, what happens is the opposite – overwork robs your productivity and efficiency while staying away from work on a regular basis increases productivity.

How does this affect how you add value to your web design business?

Taking a break from your work and things unrelated to web design make you happier and your mind more focused. Being excited about a certain project is great; however, this feeling does not last long. Stepping away from work breaks boredom and helps you back on track. When you’re focused, you can make plans and strategies that are essential to the growth of your web design business.

Adding Value When Web Design is Dead, or is It?

When the topic about “Web Design is Dead” became viral, it caused panic to some. With this comes the question why then do you have to spend a lot of money on web design when you can just get a template, specifically free, on WordPress.

Brian Hoff gives a good analogy to this issue by using the clothes retail industry – Target versus the high-end clothing stores. Target does a great job in selling low-end clothes, like a $3 shirt while, on the other end of the spectrum, Bonobos sells shirts at $20.

Why the price difference when they are just shirts? That’s because the other one takes great care in each design detail making the wearer feel great when they put it on. People notice how good the logo is or how well each stitch is carefully crafted.

So why would your client spend money on a customized design? Because it will make his business look good. Moreover, it is specifically crafted to meet his needs. When your client sees how your design solves his pain points, you add value to your work.

Conclusion

Adding value to your web design business isn’t about overworking yourself but also being able to stay happy and focused, which can be achieved by taking regular breaks from your work. This will allow you to re-strategize and re-focus.

Adding value also means creating design that will make your client’s business look good, a design that will help grow his brand and his business.

Watch the video and learn more from Brian Hoff how to add value to your web design business. Don’t forget to share the good news to others as well.

Powered by WPeMatico

25 Must-Have Pages in Building a WordPress Business Site

“Listen, this site is all nice-looking and cool, but why is it so empty? This certainly doesn’t convey the right message about my business!” This is something you’d rather not hear when you’re presenting your client with their all new shiny website.

must have pages

Obviously, every business has their own goals and their own reasons for launching a website.

Sometimes, the website effectively is the business. Sometimes it’s just meant to serve as a business card. And all other imaginable scenarios fall somewhere in the middle.

This makes your job, as a designer, quite difficult.

First, you have to properly identify those goals, make sure you understand your client’s visions, and then translate it all into specific structures and pages.

That’s a lot of work, and it’s way too easy to overlook some important details. Or to not notice an opportunity to present some part of the client’s business through a separate page. Or to not take care of some pages that WordPress generates automatically, leaving them looking odd and unattended to.

So just to make the task a bit easier, we’ve compiled the following list of possibilities – 25 pages you can choose from when building a business site on WordPress.

How to use it? I’d say treat it as a buffet. Help yourself to whatever pages make sense for your current project, and disregard the rest. This list is quite big, so having all of those pages on a single website would certainly be overkill and end up doing more harm than good.

Let’s get started:

1. Custom homepage

The custom homepage is no.1 on this list not without a reason. These days, it’s hard to imagine a business site built on WordPress that uses the default blog index as the homepage (unless you’re designing a classic blog, in which case … it’s still a questionable choice).

A custom homepage is an excellent opportunity to present the main information about the business, the offering, and everything else that’s important from a business standpoint.

Let’s not get into the details of homepage copywriting, but you get the drift.

Now, what I mean by custom? Basically, a homepage doesn’t necessarily need to have the same layout that’s used throughout the rest of the website. A homepage that’s its own thing is completely acceptable as long as it caters to the target visitor effectively.

For example, check out how Lewis Howes does this on his site. The homepage is a custom creation with individual content blocks one after another while the “Podcast” page is a standard WordPress listing.

2015_08_04_14_12_23_Lewis_Howes

Lewis Howes’ homepage has all the ncessary information about his blog

2015_08_04_14_15_06_Lewis_Howes

A standard WordPress listing

How to build it:

  • Dissect your client’s goals, and pick the main, most important goal.
  • Design the homepage in a way that’s meant to make this one goal a reality.
  • Don’t mind anything else. You can take care of the side goals on other pages.
  • Either build a custom page template by hand or use a starter theme that provides a ready-made, customizable homepage out of the box (like Parallax One).

2. About page

A very common type of page seen basically on all websites built with WordPress.

That being said, there are different schools when it comes to creating a quality About page.

Some say that the page should be built around the visitor and their needs – talking about what the website can do for the visitor. Others say that it should present “you” – the business behind the site – and focus on making the visitor more familiar with the site itself. Then, there’s the storytelling approach that mixes up the two methods (Neil Patel does this quite well, and he even uses a custom graphic created specifically for that page to make it even cooler).

2015_08_04_14_55_52_

What can be cooler than a custom graphic for your About page

No matter what the copy will end up being, the About page should remain simple, design-wise. A one-column or two-column layout is a safe choice as it’s not distracting and gives sufficient focus to the main content block.

How to build it:

Here are three great guides on how to craft quality About pages:

Also, About pages are usually created as standard WordPress pages, so they rarely require any additional design work on top of what you’re already doing anyway.

3. Getting Started / New Here page

Getting Started pages are a new thing in the blogging world. Basically, they are meant to cater to the first-time visitors. In that sense, they should present a kind of a road map to what’s on the site and where to begin consuming all its information.

You could argue that it’s just another version of the About page, but the real difference is all in the execution and what information you choose to put on the About vs. Getting Started page.

To get a good idea of what this is about, check out Pat Flynn’s site and his Getting Started page.

2015_08_04_15_12_18_Getting_Started_with_Smart_Passive_Income_Passive_Income_101

Your Getting Started page should serve as a roadmap to first-time users

How to build it:

  • From a technical point of view, the Getting Started page is usually a standard WordPress page. No additional design work needed.

4. Contact page

Sorry that I keep things obvious for now, but I really want to make this post a somewhat complete resource. For that reason, I couldn’t have missed the classic Contact page.

I’m sure I don’t need to tell you what a Contact page is, so let’s just focus on the individual blocks of content that you can include in it:

  • Intro. Things like general information about the website and who’s taking care of it.
  • Your address, phone number and other “real world” info.
  • A nice Google map of where the business is located. This can be done with the Intergeo Maps plugin.
  • Contact form. No contact page on WordPress can exist without this element. Contact Form 7 seems to be the most popular solution.
  • Email address. Display it or not, your call.
  • Links to social media profiles.

5. Blog

Even though a blog is one of the more effective marketing tools of today, many businesses still don’t see the value in having one.

Just to bring some hard data into the picture, according to eMarketer, 40 percent of US companies use blogs for marketing purposes, and 82 percent of marketers who blog daily acquired a customer using their blog. Whoever you’re building the website for should certainly be aware of these stats.

How to build it:

  • If the website uses a custom homepage then you need to assign a separate page to serve as the main blog listing. In the current WordPress implementation, to do this, you need to create a blank page and then assign it as the “posts page” in the Reading Settings section of the wp-admin.

6. Testimonials page

Testimonials are one of the most effective sales tools out there.

The idea is simple, people trust other people’s opinions more than they trust any traditional sales materials.

The must-have placement for testimonials is on the sales page itself, next to the buy button perhaps, but a separate page – a wall of testimonials can also be a good idea for some types of businesses.

A page like that provides overwhelming proof that whatever the website is selling does indeed work and is appreciated by a number of people.

testimonial

A Testimonials page gives proof to your products and services

How to build it:

  • Use a full-width page template (with no sidebar) and present each testimonial in its own separate block.
  • If you don’t want to design things by hand, you can use a plugin like Shortcodes Ultimate. With it, displaying testimonials is a breeze:

7. Portfolio page

Portfolios are very effective at showcasing the business’ achievements and previous successes. (Still probably a bit more suitable for service-based businesses than product-based ones.)

The design of a Portfolio page will depend largely on the type of work that the business is doing. If the profile is slightly more visual then you can safely go with a waterfall-like design borrowed from Pinterest.

For consulting businesses or any other scenario where showcasing the thing that has been done is a bit more challenging, you can go with a company’s logo and some text description on what was done.

How to build it:

  • Either take advantage of one of the free portfolio plugins, like: Portfolio by BestWebSoft or Portfolio Gallery.
  • Or, go with a portfolio starter theme and use it as the base of the whole website (if the portfolio itself is an important enough element).

8. Landing pages

Landing pages are an extremely effective tool when it comes to presenting the visitor with a specific offer and convincing them to go for it.

Not just my words. Data confirms. According to HubSpot, businesses with over 40 landing pages generated 12 times more leads than those with just one to five landing pages. And a little company you might have heard of, Dell, has seen conversion rates increasing as much as 300 percent when comparing landing pages to standard web pages.

In simple terms, landing pages are single-purpose, distraction-free pages. They usually don’t have a sidebar or a footer, and sometimes even lack a header. This is all done to give the visitor just one possible point of exit from the page – to click the main buy button (or subscribe button, depending on the offer).

In a way, the purpose of a landing page can be similar to that of the homepage. However, while you have only one homepage, you can create a handful of landing pages and use them for different marketing goals.

How to build it:

9. Services / Products page

This isn’t about individual sales pages, but rather about a directory/listing of all available services or products. In some ways, this can resemble the common e-commerce standards in terms of presentation.

Depending on the business you’re building the website for, such a page might be a good way to present the overall range of goods that the business has to offer to the customers. Particularly, if the products are straightforward and can be easily grasped, or if they all fall into the same category (like books). Every entry on such a page can then link to individual sales pages for each product or service.

How to build it:

The biggest challenge here is to create a page that would take each product on the WordPress business site you are building and then display it automatically on the listing page.

  • You might be tempted to handle this via WordPress categories and category listings. Although technically possible, this approach might cause some problems during development. For instance, you’d need to handle the WordPress loop in a custom way and probably complicate things unnecessarily.
  • A better solution is to create a whole new custom post type and then build a custom listing page for it. It does require some coding, but it leaves you with an overall better result that won’t interfere with the standard content types that are already in WordPress. You can find out how to do it here: Creating Custom Content in WordPress: Custom Post Types.

Which brings me to:

10. Sales pages

Sales pages are where the business happens.

In other words, they are often the pages that were the sole reason someone wanted a website in the first place. That’s why building a sales page requires extra care and thought.

Now, what I’m about to say might sound a bit counter-intuitive:

The most effective way of building sales pages is to not build a fixed framework for them.

The thing is that every sales page that a WordPress business site needs or will need in the future might be very different. In that scenario, creating a single template that will then be used for all sales pages doesn’t have legs.

How to build it:

By doing things this way, you will be able to step in later on and build new sales pages without having to rebuild any previous page templates.

(I also encourage you to check entry #8 on this list – landing pages. Very often, the concept of both is very similar.)

11. Master resources / ultimate guides

Here’s a really good example of what an ultimate guide is, as executed by QuickSprout: The Beginner’s Guide to Online Marketing (just one of many such guides there).

The difficulty with such things is that presenting them as simple blog posts doesn’t work that well. There’s simply too much content, which would make the whole publication difficult to read. Forcing the visitor to scroll endlessly without giving them any visual diversity won’t take you far.

How to build it:

The way Neil Patel does it at QuickSprout is rather expensive. He simply has each guide created by hand. An alternative that’s a bit more universal, especially if you’re handing over the site to someone else is to do two things:

  • Create a simple full-width post template along with a drag-and-drop content builder plugin. Through a setup like that, you will be able to craft each part/chapter of the master resource.
  • Then, use a plugin like Organize Series to tie all the parts of the resource together.

12. Quotes page

This is a cool idea taken from a website you might be familiar with, 1stWebDesigner. Here’s the page.

2015_08_04_21_03_22_Quotes_1stWebDesigner

A Quotes page increases your social media engagement

Basically, the page does a great job at presenting various quotes in an interesting and visually appealing way.

The reason for having such a page on a WordPress business site might be to encourage more social media sharing. Of course, the success of the Quotes page depends highly on the quality of the quotes themselves, the quality of the presentation, and the starting capital of social media following that’s already there.

How to build it:

  • From a technical point of view, the page can be a simple full-width page with no additional design elements. The trick is in designing individual quotes themselves.

13. Team page

Having a Team page is a great idea for businesses that want to be transparent about their operations. Also, such a page is an interesting way of making things a bit more personal, showing that there are indeed real people behind the curtain.

Check out these examples of two great Team pages:

2015_08_04_15_51_21_Meet_Ahrefs_Team

Ahrefs’ Team page

By Ahrefs.

2015_08_04_15_54_41_Meet_everyone_at_Basecamp

Basecamp’s Team page

By Basecamp.

They go for somewhat opposite approaches to team presentation, but both are excellent.

  • Ahrefs focuses on presenting each team member individually and telling a quick story about them.
  • Basecamp displays just fun doodles of each person and links directly to their Twitter profiles, with minimal text on the page itself.

How to build it:

  • The key to building a great Team page seems to be the presentation itself.
  • Make the page fun to look at and in tune with the company’s brand and culture.
  • Technically speaking, can be done on top of the default page template in WordPress.

14. Tools / Recommendations page

Such pages bring a couple of different benefits with them:

  • They help the audience make up their minds about certain common issues. For instance, if the WordPress business site you are building is about design, the Tools page can mention the top design tools according to the owner of the site (plus why those tools and not the others).
  • They give the site owner an opportunity to promote either their own products (among the other ones featured on the page), or to earn affiliate commissions when visitors hop over to some of the third-party tools.

Now, the key point here is to make the list actually useful to the visitors. The tools can’t be just a random set of things.

How to build it:

2015_08_04_15_58_03_Recommended_Blogging_Resources_ProBlogger

The Tools/Recommendations page lets you promote your own products

15. Deals / Coupons page

A Deals page is somewhat similar to the tools page, but this time it’s all about listing coupons for third-party products and services.

Here’s a great example by WinningWP:

2015_08_04_16_01_59_Winning_WordPress_Deals_Coupons_and_Discounts_WinningWP

The Deals page is similar to the Tools page

How to build it:

  • The blocky style looks really good on a Coupons page. The individual coupons usually need to be designed by hand, and the page itself can be a standard page template in WordPress.

16. Custom Archives page

WordPress isn’t all that great when it comes to archives pages. I mean, sure, there is the default archives listing that allows the visitors to browse through the category, date, and author archives, but the experience isn’t exactly reader-friendly.

A much better solution is to handle archives manually, and especially if the website you’re building will host a lot of content.

How to build it:

archives

Handling archives manually is much better on WordPress

(Custom archives page built on top of Twenty Fifteen.)

17. Support page

Based on the kind of business that’s behind the site, a Support page might be a requirement. And even if it’s not a requirement, it’s still a good idea to minimize the amount of email coming in about products and purchases.

How to build it:

A good Support page needs to provide mainly two things:

18. Newsletter Sign-up page

Yep, the good ol’ newsletter. The perfect way to keep the audience updated with what’s going on on the site, and also a great marketing tool in its own right.

There is a handful of ways in which you can integrate some form of newsletter sign-up on a WordPress website.

The first and the most straightforward approach is to use the homepage, like 1stWebDesigner does. You can also get the sidebar to work, or utilize any of the other empty areas throughout the site’s layout. There’s a number of plugins that can help you with that.

Then, there’s also the option to create a separate Newsletter Sign-up page – a page built specifically to convince the visitor to subscribe.

Apart from that, your selection of available solutions is also dictated by the email newsletter service that’s going to be used on the site. If it’s MailChimp, a popular choice, then there’s a number of plugins you can use, both free and premium.

If it’s one of the more cost-effective alternatives, like SendinBlue, then you can either go with their official plugin or work with the standard embed code.

(Additionally, if you want to look into the topic of cheaper MailChimp alternatives some more, here’s a nice comparison.)

How to build it:

  • Under the hood, a Newsletter Sign-up page is a type of landing page. Please check entry #8 on this list for more info.

19. “Best of” page

A “Best of” page presents an interesting opportunity to show off the site’s best content. The idea is that since some pieces of content have proven to be highly valuable to the readers, why not put even more eyeballs on them by linking to them prominently from a dedicated page?

As a side benefit, such a page can also be used for promoting new content that the site owner sees as exceptionally valuable.

Pat Flynn of Smart Passive Income does a great job at this:

2015_08_04_16_11_19_

This page highlights the best of your content

But there’s an elephant in the room…

You can’t really build such a page until the site is running for a while. How else would you know what content is truly the best?

How to build it:

  • Feel free to go with anything from a standard template for WordPress pages to completely custom creations.

20. “Hire Us” / “Work With Us” page

A great type of page for service-based businesses, but also for bloggers or freelancers running niche blogs.

The idea behind such a page is that not everybody will immediately know that the person running the site is available for work.

From my personal experience, I can tell you that placing a “hire me” link in my site’s main menu has brought the number of people reaching out to me from 0 to at least a couple a week (on the average; sometimes there’s nothing for a week, sometimes multiple a day).

2015_08_04_16_15_04_NewInternetOrder.com_Online_Business_for_Normal_People

A Hire Me page allows you to interact with a vast number of people

The most important part here is the name/title of the page. It’s not “services” or anything vague like that. It should be direct and to-the-point. Hence “Hire Me/Us” or “Work With Me/Us.”

How to build it:

  • The structure of the page? Make it a landing page. Please refer back to entry #8 on this list.

21. Careers / Jobs page

Having a Careers page is a great way to let the world know that the business is hiring, or could be hiring at some point.

An important characteristic of a good Careers page is that it shouldn’t necessarily assume that the visitor is knowledgeable about the business behind it. Therefore, it needs some of the same information that’s published on the About page, and only then should talk about open positions or other important aspects.

A great example of a Jobs page is the one used by Buffer:

2015_08_04_16_22_58_Join_the_Buffer_Journey

The Careers page should have some information about your business

It starts with a block titled “What is Buffer?” Even though it’s likely that most people wanting to work at Buffer already know what the main product is, it’s still worth emphasizing what the company is and what some of the important details about it are from a future employee’s perspective.

How to build it:

  • Standard WordPress page template will do, or a full-width template.
  • Additional custom content blocks linking to sub-pages presenting open positions.

22. Legal pages

Let’s just call them “boring pages” – pages that every business site needs (for protection) even though no one ever reads them.

I’m talking about pages like:

  • Privacy Policy.
  • Terms of Service.
  • Affiliate Disclosure.
  • General disclosures and other similar pages.

It’s best to consult with your local authorities to find out what is required of business sites in your area, and what kind of information needs to be presented on those pages.

How to build it:

  • Most often done on top of a full-width page template.

23. “You vs. your #1 competition” page

This is a clever type of page that can help address the elephant in the room for businesses that have entered niches somewhat dominated by one leading competitor.

This sort of page is simply made to present why the thing that the business has to offer indeed is better than the competitor’s. This achieves two things when done right:

  • It convinces the visitor that they are dealing with a better alternative.
  • It has the possibility to rank for highly profitable keywords for the business. Even though “we vs someone” certainly doesn’t have the best volume, it’s a pure buyer’s keyword because the searcher is actively looking for someone to convince them.

For example, the aforementioned email marketing service/tool SendinBlue uses this concept to compare their offering to MailChimp’s:

2015_08_04_16_26_53_Seeking_a_Cheaper_MailChimp_Alternative_

This page showcases why you are better than the competition

On that page, they showcase all the numbers that work in their favor.

How to build it:

  • Custom page template with modular or standard layout.
  • Testimonials block.
  • Buy button or subscribe button.

24. Demo

If the business offers anything that can be demonstrated online then it should have a Demo page on the site. This is especially important for theme shops (WordPress or otherwise), online tools, and software.

That being said, embedding a live demo isn’t always possible (when dealing with a desktop software, for example). In that case, simple screenshots or demo video will do as well.

An additional tip for WordPress theme stores or any other business offering visual products:

Use the demo of your product to expose the visitor to additional copy convincing them to get/buy the thing.

For example, here’s one of our – ThemeIsle’s – theme demos (click the “live demo” link):

2015_08_04_16_30_23_Zerif_Another_lovely_WordPress_theme_by_Themeisle

Use your Demo page to convince clients further to buy your product

Instead of using some standard “lorem ipsum,” there’s actual copy in the demo itself. The split testing software tells us that this copy-rich version delivers better conversions (statistically significant). I can only imagine that the same thing should be true for demos of other similar products.

How to build it:

  • Embed live demo if possible. If not, use screenshots or videos on a standard WordPress page.

25. 404 page

Default 404 pages are not fun. They have this “we messed up” feeling about them.

You’re a lot better off creating something custom and actually good-looking.

For instance, take a look at some of these pages:

How to build it:

  • Use attractive imagery. Give the visitor a next step. In other words, don’t leave them right there, tell them where they can go next.
  • For the technical how-to, visit this post.

This isn’t the end

Whew – that was a lot of pages. I hope that this list will get you out of a creative block and help you build an awesome business site on WordPress.

And remember, this is a buffet. Choose only what makes sense for your current project.

But wait, there’s more.

I actually have 10 more pages that I’d like to share with you. You can get the whole complete list here (link-to-come TK).

The resource includes:

  • The 25 pages listed here, all presented in an accessible way that can be used as reference when you’re working on a new project.
  • 10 additional pages, just as important, or maybe even more … wink wink.

Oh, and lastly, feel free to comment and let us know what you think of the whole list. Also, what should find its place here as entry #26?

About the Author

Karol K. is a published writer on publications, such as Smashing Magazine, ProBlogger, ThemeIsle, and Adobe.com. You can visit his profile if you want to know more about WordPress or you need some help writing unique and high quality content for your website.

Powered by WPeMatico

How to Use Ghost Buttons Effectively

Although ghost buttons were predicted to be a web design trend for the year 2014, it is obvious that it just didn’t stop there. These days, the number of websites adapting this hollow button design is on the constant rise. When you come to think of it, there’s nothing really special about these buttons, but, since they are a practically a new concept, many website owners and designers incorporate them in their web designs.

ghost buttons

Learn how to use ghost buttons effectively

Understanding the Ghost Buttons

Transparent and shadowy elements are not new in the world of web designing as these started at almost the same time when the flat style design was embraced. However, because they are simple, and many web designers have acknowledged the importance of minimalist designs in strengthening web page designs, it is safe to say that ghost buttons will maintain its popularity as an inclusion in many design pages. Additionally, understanding the anatomy of these ghost buttons are not above your head:
• thin button frame or outline
• transparent button background
• light font for call-to-action

Trendy yet Simple

Ghost buttons, without question, are trendy. Nonetheless, this doesn’t mean that they are complex in terms of design. In fact, it can be said that their popularity can even be attributed to the simplicity that makes them up. Additionally, this simplicity of design is celebrated even by novices in the field of web designing because the ease they provide when they are made. If you try to compare the ghost button designs by pros and by the new web designers, you can never tell the difference. However, this simplicity can be both a blessing and a curse. Okay, it’s a given that they are easy to design. Nonetheless, this also makes it easier for designers to place these buttons anywhere in the design. If you are a web page designer, you need to have a clear understanding of how ghost buttons work; they are more efficient in specific areas of the design and if they are used for the right purpose. Therefore, bear in mind to never abuse the ease that comes with creating these ghost buttons.

Find the Best Location for the “Ghosts”

2015_08_03_19_05_50_Bilder_Partners_in_Imagemaking

The middle of the homepage is the perfect place for a ghost buttons

One of the best locations where you can place your ghost buttons is the home page, at the center of the home page to be more specific.” Why”, you may ask. This is because this spot will give the ghost buttons a high level of visibility which can impact the number of visitors who will actually click them. You need to remember that, on the whole, the home page is the center of attention of many website users. This is where they gaze for a while before finally browsing the rest of the website. Take a look at the following website and notice how your eyes move.

You can see in this website that the ghost button is right at the center of the web page. Doesn’t it catch your attention immediately as if calling you to click on it? It surely does, right? But, of course, this particular ghost button is way bigger than other ghost buttons of other websites.

Calls to Action

As already mentioned, one of the primary advantages of ghost buttons is that they call on the visitors to your website to act. Generally, they have that 3D effect, hence, they are much better than the usual CTA buttons. While it is true, though, that this innovation in buttons may not have a significant impact on your sales (if you are a selling website), ghost buttons will certainly change your users’ perception of your website.

Navigation Menu

Apart from being a great call-to-action button, ghost buttons are also ideal for navigational menu and tabs, too. No matter how simple your web page design is, if you have functional and highly usable buttons, these may be enough to satisfy your web page visitors. Take a look at the placement of the ghost button of Visage.

The Awesome Functionality Ghost Buttons

When a new design trend emerges, as a designer, you may not stop thinking how you can use it in your web design, isn’t it? The same thing can be said about with ghost buttons. However, these buttons are the most ideal for the following websites:

I. Business Website Designs

Beyond any shadow of a doubt, ghost buttons are the most ideal for business websites. While they are the most popular type, unfortunately, they are also the most restrained. Generally speaking, business websites steer clear of trendy features and common design techniques, but some just can’t resist using ghost buttons. Here are some of the business websites that use ghost buttons.

How Ghost Buttons can Affect your Business Website:

2015_08_03_19_15_11_The_Prince_Ink_Company_Premium_Screen_Printers

Price Ink’s ghost button changes color

1. Your business website can look more trendy and creative at the same time if you use a ghost button that changes color when the user hovers over it. Visit the website of the picture above to see how its ghost button works.

parallax

Ghost buttons complete the professional look of a website

2. Ghost buttons can make it more professional and unobtrusive, especially if you use it as a CTA.

3. You can engage your users to sign up for a product beta, much more if you place it above the fold section. This will enable the visitors to take notice of its presence.

II. Ghost Buttons for Creative Studios Websites.

If there is one type of website that almost always adapts the trend, it’s got to be the creative studio websites. Does this mean that they have embraced the ghost button trend, too? Take a look at the following websites:

2015_08_03_19_36_57_

Black and white work well with ghosts

1.Create Conquer. This web site makes use of black and white colors, and its ghost button has the same colors, too. Some of the borders and the text of the buttons are black, some are white. It all depends on the background that they have.

2015_08_03_19_41_03_Audrey_Azoura_Architecte_d_intérieur_Paris

Ghost buttons add to the elegance of this page

2.Audrey Azoura. This furniture and interior design website just oozes with elegance. Apart from embracing the image-focused design, which is also the current trend, this website also makes use of ghost buttons with a color palette that compliments its theme.

III. Ghost Buttons for Software Websites

Many software companies have also incorporated the use of the ghost button to their websites. Many of these websites can give you a hint on how you can use the creative buttons creatively. Some of these websites come with only one ghost button, while others use colorful buttons and conventional shades.

2015_08_03_19_48_14_Philosophie_digital_product_consultancy

Traditional still works

1. Philosophie. This site makes use of the traditional black and white colors blended with the tone of pink. The designs of the buttons are dependent on the color used as their background.

2015_08_03_20_04_44_SketchMyApp_Prototype_Driven_Design_for_Photoshop

Using empty buttons work amazingly

2. ShopMyApp. This website makes use of empty buttons that have a white outline; they turn into green once you hover over them. Additionally, the menu tabs make use of ghost button as well. Cool!

IV. Ghost Buttons for Education Website Designs

Many educational websites have, likewise, adapted the ghost button trend. Well, this is not really surprising as this type of website aims at attracting the youth.

2015_08_03_20_15_07_Providence_College_Vantage_Points

Ghost buttons can be placed in other parts of your website, too

1. Vantage Points. Apart from featuring a video on its landing page, this website also makes use of a ghost button over it. Ghost buttons can also be found in the other pages of the website.

2015_08_03_20_26_45_Campus_Bubble_Technology_Solution_for_Student_Engagement_and_Retention

You can try different colors for your ghost button

2. Campus Bubble. This website makes use of different colors and so does its ghost buttons. Specifically, the ghost buttons make use of green, blue, and orange colors. Without question, the buttons make the website more engaging despite being simple.

V. Ghost Buttons and Ecommerce Websites

More often than not, ecommerce websites are content rich. Since ghost buttons are simple and thin, they are most suited for these websites.

2015_08_03_20_40_04_Industry_Standard_About

You can also use the double outline for your ghosts

1. Industry Standard. However, Industry Standard’s double outline ghost button, without question, looks awesome on its website design. Double borders simply makes the button more visible.

2015_08_03_20_53_33_DSTLD_Luxury_Jeans_Essentials_No_Retail_Markup

An image-focused website can also use ghosts

2. 20 Jeans. This online business website is another validation that it is perfectly okay for an image-focused website to employ ghost buttons. The models in the photo are situated at the right, which makes the black text on top of the white background on the opposite side attract attention. It would have been better, though, if the color of the text was different from that of the ghost button. Its bold text works as if manipulating the eyes to gaze to the direction of the ghost button. Additionally, it only has one ghost button on the homepage above the fold, making it easy for the CTA to be noticed. Furthermore, the CTA makes use of the word “shop”, making it clear to the users what’s going to happen once they click the button.

Without Question, Ghost Buttons are Ideal for CTAs

With the above-cited examples, it should be clear to you by now that that ghost buttons are ideal for almost every type of website. However, it is also obvious that many designers of the mentioned websites made of the ghost buttons for the call-to-action purpose. Who knows how the ghost buttons they have made use of work on their advantage in terms of the actions that they desire? If you are into business, maybe these ghost buttons can help you rake in more sales. Again, who knows? However, always remember that, when adding buttons to a website, there are several things that you need to take into consideration if you want to improve the conversion rates that you’ll get. It is normal to see a bold button over a simple background or a button whose color contrasts to that of the background where they are placed. This has long been a proven strategy to gather high CTR.

Ideal for Image-Focused Design Website

While it is true that ghost buttons can be employed in many different types of websites, in terms of webpage design, they are most ideal for those that make use of the image-focused design. How many website examples given above made use of the image-focused design with ghost buttons? Several of them! After all, with the simplicity of ghost buttons, they cannot disrupt the aesthetic value that the large images provide, as compared to the traditional buttons do. Additionally, this type of button is also ideal for one-page sites.

Ghost Buttons and your iPhone

Have you ever noticed the round buttons on your iPhone that runs on iOS 7? Well, if you haven’t, it’s time for you to realize that those are actually ghost buttons. Experts have said that the emergence of ghost buttons can be attributed to the fact that people are more passionate about making full screen backgrounds that have 50 % opacity. These backgrounds also make the interface form over them. It is an opportunity for the users to divide their attention to the background image, the reflecting styles, and the ghost elements, which may not be that visible but are, definitely, still visible.

Elements of the Ghost Button Design

As already mentioned, the most basic elements of a ghost button are a transparent outline, button background, and a light font for CTAs. However, these are not just the elements that you need to consider when your incorporate ghost buttons into your web design. You should also make sure that your ghost button is:
• contains simple and readable text
• larger than the conventional buttons
• placed in prominent areas of the page
• placed alone or in a group
• used with flat or almost flat designs
• makes use of geometric icons inside the borders sparingly and if needed

The Advantages of Ghost Buttons

Should you incorporate ghost buttons in your design? Here are some of the good points about this trend that may make you decide to go for it:

• Undeniably, ghost buttons look and feel clean. The simplicity of the buttons allow the main layout of your page to standout.
• Since ghost buttons are transparent, they can go with almost design that you can think of. This transparence enable them to adapt to the designs where they are superimposed.
• Ghost buttons are a continuation of the flat design. The only way for design trends to maintain their popularity is to continue the change as they adapt the new concepts.
• Ghost buttons can deliver an element of surprise as they are different from what many users have been accustomed to.
• Ghost buttons provide a great level of ease to those who will create and design them as they are meant to be simple. If you are a designer, make sure to make them subtle and steer clear from anything that may make them flashy.
• Ghost buttons have a way of calling people to act without being obtrusive. You may have already encountered many websites that feature ghost buttons that are large or larger than the other elements on the screen. Because they can be made large without affecting the other elements, they can easily attract users to perform the action that the buttons tell them to do. Now, talk about an effective interface.
• The transparent and linear design of ghost buttons gives the designer a subtle freedom as it enables the visual weight on the design to lighten.
• Ghost buttons make a web design sophisticated, no matter how simple the overall design may be, much more if the designer knows how to make use of the right color combination and where to place the buttons.

The Disadvantages of Ghost Buttons

• While it is true that ghost buttons have a lot of advantages, there are some disadvantages as well. Hence, before you start working on any design, make sure first to analyze if a trend is suitable. Here are some of the disadvantages that come with ghost buttons:
• Ghost buttons may be placed in the part of the design that can make it difficult for non-savvy users to notice them. In fact, there are people who even have difficulty identifying the normal buttons and don’t know how to use them. How much more with the non-traditional buttons?
• Using ghost buttons over images that have varying or contrasting colors can be a bit tricky. You may have a hard time figuring out how to play with colors that can still make the ghost buttons noticeable despite the background where they are placed. More often than not, ghost buttons are either black or white. However, you may have difficulty using these colors if they are to be placed over an image or background that makes use of the same shades. You have to remember that the efficacy of ghost buttons rely much on where they are placed and how visible they are, despite their transparence.
• There are times when ghost buttons can overpower the image that they are paired with.
• While it is here that ghost buttons are simple, the truth of the matter is that they are more complex than “click here”. Since the buttons, more often than not, are small, you need to be very careful in choosing the text that you will use so that it can call a user to act. Additionally, the text has to jibe with the design.
• Ghost buttons can sometime lead to legibility problems, much more if they are placed over photographs or colorful backgrounds.
• There is a tendency for some designers to overuse ghost buttons. While it is true that ghost buttons are trendy, always make sure that you know how to limit using them. Use them for a purpose and not just for the sake of jumping at the bandwagon.

Where did the Ghosts come From?

No one is really certain how ghost buttons came to existence. Design experts can only suspect that they are a result of the combination of different factors that have prompted them to exist and be embraced by many websites. As for its name, is believed to have been coined by Tumblr.
Here are some of the different contributing factors that may have given inspiration to the birth of ghost buttons:

1. The HUD

HUDs (head-up displays) have been in existence from the 1960s and were primarily used in military aircraft. However, it was only in the past couple of years when these became a part of the popular culture and have been used in movies, video games, and car dashboards. Since the data projected by HUD is seen on top of your viewpoint, it is important that this data has to be presented in a basically lightweight and transparent style so that the viewpoint will not be obscured. Sure, these HUDs are not buttons, but take notice that the elements of the interface are clear and their text-based units are bordered by thin lines. When it comes to introducing the HUDs to the general public, there is no denying that Hollywood films such as Ironman, Ender’s Game, and the Star Trek reboot have provided inspirations to the emergence of ghost buttons.

2. IOS 7

When Apple’s iOS 7 was introduced to the market, users were not as ecstatic about its interface filled with minimal buttons and icons that were bordered by grey or blue lines. However, it is widely believed that these contributed to the eventual emergence of ghost buttons.

3. Nexus 7

Eventually, Google also tapped the use of the ghost trend. Since 2013, it has also used the ghosts in their Nexus 7 website. It made use of a transparent button bordered by a white line, providing a good contrast to its background.

4. Bootstrap

Another contributor to the popularity of the ghost buttons is Bootstrap. It was in August 2013 when Bootstrap 3 was introduced to the market, and it was in its homepage where what seems to be a prototype of the ghost button was seen. Although it was not necessarily transparent, it had a monochromatic background and very simple characteristics. Many people started using what Bootstrap has started as Bootstrap itself is considered an efficient way to develop a website. As a result, more and more websites were developed with the inclination to flat designs and minimal buttons.

Conclusion

In conclusion, beyond the shadow of doubt, ghost buttons can really be remarkable if you know how to apply them correctly. The examples given above demonstrate that a good background is important for the visibility of the ghost buttons. It is also important to use colors that will make these buttons more noticeable. The more simple and basic the designs are, the more abridged they must be.

Powered by WPeMatico