January Think Piece: Web Design And Development News

In this issue, you will learn more about UX principles, font pairing, new releases of Firefox and Bootstrap, Project Spartan (rebranded IE for Win 10), and you will discover a new collection of design resources as well. We’ve also included several articles for inspiration and entertainment.

Welcome to our January Think Piece. Each month, we’re going to publish some of our favorite articles and resources we’ve discovered. In this issue, you will learn more about UX principles, font pairing, new releases of Firefox and Bootstrap, Project Spartan (rebranded IE for Win 10), and you will discover a new collection of design resources as well. We’ve also included several articles for inspiration and entertainment. Hope you’ll enjoy the reading!

Education

Understanding Web UI Elements & Principles

The design of any commercial website is about conversions, sales and leads. That’s why every good designer should know at least some UX basics. The more principles you know and apply to your designs, the more benefit you’ll bring to your customers and the more new orders you get.

This article talks about some of the most important principles of web UI design. The main idea is that the interface is not just a set of beautiful buttons and elements, but the funnel to guide a user towards some certain and fixed goal to complete (usually sale or lead generation). When drawing some innovative interface, please note that most users are quite close-minded and tradition-bound, and they might not accept some radical innovation, even if it promises them more convenience in the future. Your designs should pass the so-called MAYA-principle test (Most Advanced Yet Acceptable). All practical hints in this article have interesting and funny examples.

6 Tips for Perfect Google Font Pairing

There are no strict rules for fonts pairing; however, there are some basic principles for doing it properly. This article outlines several generic recommendations on how to pair fonts. The first rule is that no font can rescue bad content. Second, keep typography simple so it doesn’t become overwhelming. Third, use contrast fonts, but use them right. Don’t forget about readability; ensure the text remains easily readable. Do not limit yourself with several fonts you are used to working with – use online resources for new fonts, new pairing samples and inspiration. Be creative and do not be afraid of experimenting with new pairings.

Prepare for 2015 with 1000s of New Artistic Resources

This fresh collection of design resources will help you prepare and complete new challenges in 2015. Design effects, custom scene creation packs, Photoshop kits with styles, brushes and textures – these resources will help you create new, beautiful design effects and save you time. This collection has received several enthusiastic comments and you will definitely love it, too.

Photo from Designcuts.com

Inspiration for Text Input Effects

Opportunities for form input customization are undeservedly overlooked in most cases. The majority of input forms are, by default, just dull. Mary Lou shares some experimental styles and effects for text inputs in her post. Almost all of the effects use CSS transitions, pseudo-elements and CSS properties that will work on modern browsers only. The post itself was written more for inspiration rather than for practical use, but it is still worth reading.

Inspiration & Entertainment

How To Transform Your Problem-Solving And Creativity

Creativity is one of the most important things for any designer, but what, actually, is it? Is it some kind of God-given talent, or just a skill that can be trained and improved? Creativity is all about fresh ideas, and ideas are usually generated by thinking. So, theoretically, there is a direct relationship between mental capabilities, the level of creativity, and every person with a strong logic and strong ability for thinking, right? Well, the reality shows that is not always the case. Check out this article with an overview of five books that will stimulate and improve your thinking abilities, creativity and problem-solving skills simultaneously. They will teach you new methods and ways of thinking to remove any barriers and preconceptions of your mind, and free and improve your creativity.

8 Places to Prowl for Creative Inspiration

Every designer knows that inspiration is not something that can be bought or summoned to appear exactly when you need it. That means you need to look for it, and this article will help you in your search for places that waken your creativity. It introduces eight sources for inspiration available in any country, region and environment. The first place is nature, which, for example, inspired Nike to create a modular design of shoes (similar to the structure of microscopic water creatures). Music also works pretty well for inspiration. In some cases, you can use words for inspiration and try a so-called title-first approach (like Sting, who sometimes invents a title for his future song first, and then starts composing the music itself). All sources of inspiration in the article have very interesting, and sometimes funny, practical examples of famous people. We highly recommend you read this article in its entirety.

A Browser-Based Illusion Made all in CSS

As it turned out, CSS is applicable not only for ordinary styling; you can also do some magic with it. James Louis Walker introduces illusions with impressive animated effects. The illusions themselves were inspired by videos with optical illusions made by Brusspup on Youtube. But the feature of James’ illusions is that they are all completely done in CSS. The post gives you some hints on how this illusion was created, so if you want, you can do your own and send them to us for publishing on our blog and in our social groups to get some promotion in our community.

30+ Examples of Login Form Designs

Login and registration forms are very important elements of any design. They have to be easy to notice and easy to use. But when they are creative and beautiful at the same time, it’s a triumph for each designer. Here you can find examples of creative and efficient (and sometimes quite funny) forms. We hope this collection will inspire you and contribute to your own projects.

For Developers

This is Spartan! Project Spartan is Microsoft’s new web browser for Windows 10

It seems Microsoft will give up Internet Explorer in Windows 10 and introduce a new default browser called Project Spartan. According to Christina Warren and Mashable.com, it’s more like an attempt to rebrand IE rather than an intention to develop completely new and different browser. It’s quite logical step, because more and more developers pay little to no attention to IE compatibility at all. They mostly focus on Chrome and Firefox now. The new browser will be based on a new rendering engine with a cleaner user experience and a more streamlined appearance. More information on this topic can be found here.

Firefox Version 35 Has Been Released

Mozilla has also released a new version (version 35) of its Firefox browser recently. In addition to lots of bug fixes, this release contains several features that will make the life of developers easier. For example, they enabled CSS source maps by default. This feature was initially added into Version 29, but now it is enabled by default. Check Mozilla’s developer network for a full list of all the bug fixes, improvements and changes.

Bootstrap 3.3.2 released on January 19

According to the Official Bootstrap Blog, this release contains more than 300 commitments from 19 contributors. It doesn’t contain any significant new features, but it does include lots of bug fixes, accessibility improvements and documentation updates. As always, the post contains a link to a music video. This time, it’s Ace of Base – “The Sign”. Enjoy it!

That’s all for now. Subscribe to our blog updates and we’ll keep you in the loop.

Web Design Awards Worth Participating in 2015

Are you ready to let the world know about you as a web designer? If your answer is yes, then this post is for you. We’ve compiled a list of awards you might want to participate in this year.

Are you ready to let the world know about you as a web designer? If your answer is yes, then this post is for you. We’ve compiled a list of Web Design Awards you might want to participate in this year. Some of those awards are free and some require registration fee. Some of them are conducted just once in a year; other nominations are done monthly, weekly and even daily. Choose the ones you like the most and may the force be with you. Good luck!

1. European Design Award

Submission Deadline: February 21

Submission Fee: starting from EUR 40 (for students) and EUR 140 per single standard submission.

The European Design Award is the most reputable design award in Europe. It has 35 separate design nominations and you can take part in all of them simultaneously. The only limitation is its cost – you pay EUR 140 per submission. For multiple submissions, you get volume discounts. Each nomination has three levels of distinction: Gold, Silver and Bronze. Gold winners receive a trophy during the official Award Ceremony. All winners additionally get some recognition and promotion, as they will be published in the ED-Awards catalogue and on the website itself.

2. D&AD Award

Submission Deadline: February 18 (may be extended until February 25)

Submission Fee: starting from GBP 105.

The non-profit British Design & Art Direction organizes this prestigious international award each year. If you are between 18 and 23, you can participate in their New Blood Award section. Otherwise, you have to register for the Professional Awards section. There are many nominations available with different categories. All winners get a Yellow, White or Black Pencil as recognition of their achievements. New Blood Award winners can use their Pencil Marks in their portfolios, CVs etc. The winners’ works will be showcased at the D&AD Awards Night, as well as their international exhibitions and events. This Award is a great opportunity to get some buzz around your name in a designer community. However, it’s not the cheapest one.

3. Awwards Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: EUR 40 for a one-time single website entry, EUR 120 for an entry followed with a featured profile in the Awwards directory.

According to the site, they get more than two mil unique visitors per month. So if your website is featured as “Site of the Day” you will theoretically get visible for at least 100K visitors. All winners will be published in an annual book “The 365 Best Websites Around the World”. Depending upon the category, you have an opportunity to get official Awwwards certificates for the following nominations: Site of the Day, Site of the Month, Site of the Year and Honorable Mention. Judging criteria include 40% design, 30% UX, 20% creativity and 10% content. Once per year, Awwards.com holds a conference, as well as price-giving. So in addition to online exposure, you have a great opportunity to get featured at that event.

4. CSS Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: USD 30 per submission.

CSS Design Awards is a global platform showcasing the best web designers and their works. They say they are one of the top two most visited online web awards in the world (according to Alexa) and the most followed awards group on Facebook. The winners for Site of the Day get site badges and certificates. The winners of Website of the Year and Designer of the Year additionally get a handcrafted trophy finished in brushed chrome and gold. Judging criteria include the design itself, creativity, functionality, usability and code.

5. CSS Winner Award

Submission Deadline: no deadlines, sites can be submitted all the year round

Submission Fee: free of charge.

CSS Winner is an international platform awarding best designs on a daily, monthly and yearly basis. The main evaluation criteria are the design, user experience, creativity and content. All winners get exposure on the website and through social media network and obtain a CSS Winner certificate. The main jury consists of nine designers from all over the world, and 80% of the total ranking for each website takes the opinion of those designers. The community can also participate and vote – their opinion is taken into consideration as 20% of the total ranking.

6. Favourite Website Awards (FWA)

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: free of charge.

FWA is a UK-based design award portal for designers from all over the world. They were the first online award program that received over 200,000,000 website visitors. FWA accepts websites, online games and online movies/animation for nominations. The main criteria are creativity, originality, design, and content. A remarkable feature of this portal is their collaboration with Google’s Creative Sandbox. The winners of the Site of the Day nomination are reviewed with Google, and if Google finds the website suitable for their program, this particular website is featured on Google’s Creative Sandbox.

7. Promotion & Marketing Design Awards

Submission Deadline: Early-bird entry March 20, regular submission deadline – April 17

Submission Fee: starting from USD 40 for early-bird student submission, up to USD 85 for regular single entry.

This award is held by the HOW brand, which initially started as a print magazine in 1985. With time, they grew into a bigger hub for designers providing design competitions, online design courses, job portal and more. The award itself contains several categories and supports single entries and campaigns. They provide discounted prices for students and are quite flexible with submission fees. The winners get a free trip to the 2016 HOW DESIGN LIVE event and will be published in HOW’s FALL 2015 issue.

8. CSS Awards

Submission Deadline: new submissions accepted at any time

Submission Fee: USD 9.99 per submission, or alternatively, it’s free in exchange for a Like or Follow on Facebook and Twitter.

This website accepts website designs from all over the world. They have quite a tricky system for submissions – you can submit your website for a small fee of USD 9.99 or alternatively you can like them on Facebook or Follow in Twitter and then send a message with your website URL + Agency / Freelance URL. This is partially the reason why they have around 43K followers on Twitter and around 7K Likes on Facebook. But at the same time, they have 1,192 followers on Pinterest and 2,127 pins, so they’re still worth your attention.

This website also has an additional website exclusively for submissions of one/single page websites. All terms and conditions are the same.

9. Webbyawards.com

Submission Deadline: January 30

Submission Fee: USD 345.

The Webby Awards is one of the most prestigious international awards, presented by the International Academy of Digital Arts and Sciences (IADAS). They have several categories, and each category has two honors – The Webby Award and The Webby People’s Voice Award . The winners for the Webby Awards are determined by the International Academy of Digital Arts and Sciences. The winners of the Webby People’s Voice are selected by the online community. For the previous year they received 12,000 entries from over 60 countries. This year, the submission deadline was December 19, but they extended it until January 30. Even if you won’t manage to participate this year, you have some time to thoroughly prepare for the challenge for the next year.

There are lots of other awards and contests worth mentioning here, but we’ve limited the list to an uneven amount intentionally. Hopefully, you’ll propose to us the tenth award you like best. So what award would you like to be mentioned here? Share your thought with us on Facebook and Twitter.

Converting PSD to WordPress and Joomla Templates in 4 Easy Steps

The most popular systems on the modern web are Wordpress and Joomla, since they are the most versatile – with these CMS at hand you can easily create a blog with expandable menu, galleries, sliding images and other interactive elements. No expert knowledge is required either.

Yet, you need to add personal traits to your project to make it popular.

Creating a modern website is a project that involves generations of unique ideas and requires the author to handle large amounts of information. It is rather typical to opt for CMS use to save time and cut the amount of work overall. Content management software allows you to get your blog up fast and easy, and more importantly, no special expertise is required to perform basic operations. The most popular systems on the modern web are WordPress and Joomla, since they are the most versatile – with these CMS at hand you can easily create a blog with expandable menu, galleries, sliding images and other interactive elements. No expert knowledge is required either.

Yet, you need to add personal traits to your project to make it popular. No one is falling for another typical website, so it’s up to you to create a stunning design for your project. Once you have your ideas ‘on paper’ (or rather, in a PSD file), it’s time to convert the image to a fully-functional website.

What’s the difference between Joomla! and WordPress?

The main difference between WordPress and Joomla! content management software lies in the way they operate templates. WordPress pages are composed from a number of blocks: every single element is stored separately and used in a particular case. Once you make a change to an element (for instance, you alter background image for a menu) it takes effect immediately everywhere it is used.

Such ‘modular’ systems allow for faster work with complex projects. You create a set of components and assemble them at your wish.

Joomla, however, uses a different approach and handles every page as a separate set of components. This means that if you plan to use an identical item on every page (for instance, a navigation menu), you’ll have to add a separate menu to each one. If you change this component on a page, changes won’t affect the other parts of your website.

Every template should contain all the necessary code to make proper use of every single module type – authentication, navigation, text, images, video etc.

How do I convert a design project to a functional CMS template?

Working with CMS means you get to work with a product provided ‘as is’ by developers. Of course, there are advantages – you don’t need to hire a programmer to create frames for you, yet there is a drawback; you have to adhere to certain rules. Standard systems can be altered, but it takes time and certain web development skills; you would generally want to use a content-management system to save time and effort.

Converting a PSD project to a fully functional CMS template takes several steps:

1. Analyze your project. Split it into parts (separate pages and items – menu, text blocks, galleries etc.) and see which of them can be implemented by means of CMS systems. Generally, a WordPress or Joomla! website contains a header, menu, main block and footer. It is generally a good idea to stick with these modules to make further work easier.

2. Cut the PSD image into elements – buttons, triggers, decorations. Group up separate components – CMS will generally require you to place images in certain folders for the system to access it properly. For now, you have to handle components as separate parts (that are none-the-less tightly connected) and make them interactive.

3. Make every element work with the CMS of your choice. Assign each components its place on the page, qualities, set up the way it works (when it is shown, how it reacts to clicks and interacts with the user).

4. Run your website and enjoy the results of your work! You might have to check your code to get rid of unnecessary elements (some of them are implemented in the CMS, but you might never use them) to optimize memory and connection usage.

Keep in that you will be using classes to make your components work. Classes are basically unit types with a range of properties and functions – if you want to create a brand new item type, it should be compatible with the existing system. This is one of the limits set by CMS systems.

Is it worth using automated PSD to WordPress/Joomla converters?

There are a number of sites on the web that offer to convert your PSD file to a CMS template automatically. This option is certainly attractive if you are on a low budget, but it will ruin the whole project.

The process might be fast, but the result will leave you wanting more. Automated algorithms work with every project by a standard scheme. This results in a lot of non-optimized code with unnecessary components. Websites created by an automated system run slowly and lack functionality.

If you want an optimized website that runs fast and stable, you will want conversion to be done manually. It is a type of work that requires skill and knowledge; it’s best to let professional web developers to handle the project.

Yearly Think Piece: Best of the Web and Design In 2014

2014 is now over, and that means that it’s high time to see the old year out and the new year in. Let’s have a quick look at what was going on this year and check forecasts on what will be trending in the next year.

Remembering 2014:

Best and Worst Web Design Trends in 2014

Jake Rocheleau, web designer and social media entrepreneur, collected the most propagated design trends for 2014 in his article. According to Rocheleau, minimalist flat design is still popular because it is easy to design and use. Fullscreen responsive background became trendy this year since it can scale naturally with the browser. Mobile responsive navigation is another trend this year, and this trend will persist.

Among the worst trends of this year, Rocheleau mentions modal window promos, as they are annoying and have the same effect as pop-ups. Another thing that you must avoid is overloading your site with social media. If you have too many sharing badges for too many social networks, it is confusing. Preloaders and customized scrollbars are also elements not worth using in 2015.

The Evolution of WordPress in 2014 and Beyond

WordPress remains the most popular CMS in the world, covering around 23% of websites, and will continue dominating the market for at least the next year. One of the reasons for their success is that they are constantly evolving. This article studies the most remarkable WordPress releases and features throughout 2014. The main focus of WordPress 3.9 “Smith” was on improvements to the WordPress Visual Editor and media capabilities. Now you can have media lists and drag-and-drop images directly into the visual editor. WordPress 4.0 “Benny” contained no significant new features, just some minor updates and fixes. According to the author, one of the main focuses for 2015 will be to make working with media files easier. Hopefully, WordPress will finally start to update itself automatically, like Chrome or Firefox. This would help to keep all sites as secure as possible. Moreover, since the whole world is moving towards globalization, WordPress would need a better support for international sites by providing more tweaks for non-English-language users.

The Fifth Revision of the HTML Standard is Finally Out

After 10 years of development (which took more than 50,000 email exchanges and more than 4,000 errors resolving), the W3C finally released the fifth revision of the HTML standard. New features, which simplify multimedia and graphics handling, help to avoid using proprietary plugins and APIs, and also provide additional features to enrich semantic content. In particular, HTML5 introduced <video> and <audio> tags, and implemented 2D graphics rendering via <canvas> tag and corresponding JavaScript API. Forms are improved now and have become more user-friendly without any extra JavaScript code. Thanks to the use of Cache Manifest, the content is stored on the client so that users get fully functional applications, even if they work in an offline mode. HTML5 introduces many new features, markup elements, attributes, APIs, DOM interfaces and extensions. It’s definitely worth to study all of them in detail.

The 5 Most Popular Front-End Frameworks in 2014 – Overview and Comparison

There are plenty of CSS front-end frameworks available on the market. Each framework has its strengths and weaknesses, as well as specific areas of application. Here is an article about the TOP 5 front-end frameworks in 2014. This rating is based on their GitHub popularity, and the TOP 1 is, of course, Bootstrap. Initially released in 2011, Bootstrap is the undisputed leader among frameworks for the moment. It’s hard to tell whether it is technically better, but its main strength is popularity, which means lots of educational resources, manuals, articles,third-party extensions and plugins.The second popular framework is Foundation, and the next one is Semantic UI framework, which utilizes natural language principles. Thanks to this feature, its code is easy to read and understand. Another framework mentioned in the article is Pure, a lightweight modular framework by Yahoo! and written in pure CSS for those who need only specific components instead of a full-featured solution. Last but not least is UIkit, an easy-to-customize set of components written by Yootheme.

The article also contains several tips on how to choose the right framework for your needs. Briefly summarizing a framework should be popular (it usually means lots of tutorials, samples, third-party extensions, etc.) and under active development to keep up with latest web technologies.

Google Subtlest Logo Change in the History of Logo Changes

This year, Google changed their logo a bit. The changes were so slight they were almost invisible. They moved the “g” one pixel to the right and the “l” one pixel down and right. The community says it was done to solve a problem with the kerning of the letter. You can compare “before” and “after” here. Not sure if they really solved the problem, but at least they can be nominated for the subtlest change ever done to a logo.

Preparing for 2015:

Web Design Trends in 2015

It’s important to keep track of current web design trends. However, if you want to outperform your competitors, you have to learn to predict and forecast upcoming trends. Let’s have a look at what the community suggests as the most trending things for the next year. Responsive design can still be considered as a trend, but it’s more like a norm now. Ghost buttons are minimal and stylish, and perfectly suited for fullscreen backgrounds. The author says they will gain more popularity this year, along with large background images and videos. More attention will be paid to typography this year. That’s because type kits became more affordable and do not require larger budgets for website development. At the same time, they allow building really nice websites. Scrolling over clicking will obviously be more and more popular. The reason is with the development of the mobile world, more and more people want to have the same experience on their desktops. Card design will continue, as cards are a clean and simple way to present information. Flat design may remain trendy or grow up into material design, which was introduced by Google this year. Micro interactions in form of pop-ups will continue to grow, as well. Then, there is Personalized UX – this is what we already have on Youtube, for instance, where Google displays more relevant content using our cookies. The idea itself is not new, but more and more websites will adopt it.

HTML6: The Next Big Thing After HTML5

This year, the W3C officially launched HTML5. However, they are always on the move, so moving forward to the sixth revision of HTML will not be long. HTML6 will be more than just creating containers and assigning them IDs. The new language is planned to be more human-friendly and define containers and elements in a way convenient for you. This will be achieved via a combination of HTML and XML. In this new version, you will be able to create any tag you want and W3C will reserve and use namespaces that will call the required HTML APIs. There will also be the introduction of some new tags, like the <carousel> tag. This will help you implement carousels on your web pages in an easier way. Check out this article for more details on the upcoming changes.

Web Development Trends in 2014 and Predictions for 2015

Shiju Varghese shares his observations on web development trends this year, and makes predictions for the next year. Since web development technologies are powering and affecting designs, this article will be useful for both developers and designers. Responsive web design is now a must-have feature, but it doesn’t solve all the challenges and is suitable more for content-rich website. In addition, if you have something more along the lines of a Web app with a lot of UI elements, you should still think of a mobile version. The mobile-first strategy dominates in web development, so APIs become a key component of Web apps. Since Mobile Backend as a Service (MBaaS) solution on the Cloud platforms have been introduced, they are becoming another trend of this year. The author believes that they will be used for both Web apps and Mobile apps in the future. Yet another trend is single-page applications.

As for programming languages, dynamic languages like Ruby on Rails and Python become less relevant for Web development, and many apps initially built with these languages are now being re-engineered due to performance and scalability challenges. According to Shiju, the Go programming language will heavily replace dynamic languages, Java and Node.js soon.

Knowledge Base & Resources:

10 Quick Tips for Re-Designing Your Website as Per 2015 Trends

Don’t think you’ve completed your website once and it will perform efficiently for many years. The Internet is an ever-changing world; smart entrepreneurs monitor web design trends and tweak their websites to meet ever-growing users’ expectations. If you don’t want your website to become out-of-date and lose customers in favor of your competitors, check these 10 tips for re-design of your website and start implementing them. The author writes that content is the king like never before, so you should pay special attention to it. SEO is still not dead, so it is still worth making your website SEO-friendly. An attractive logo and catchy tagline will help your visitors remember your brand and improve brand awareness. Make the navigation on your website as easy as possible and don’t make your audience think. If you don’t want that your visitors to leave your website and go to your competitors because then had no time to wait for your page loading, be sure to optimize your page-load speed. Blog management is one of the most promising methods of your website promotion, so set up a blog (if you don’t have one) and don’t forget about RSS tools. The last, but probably one of the most important, tip is to measure the performance on a regular basis.

10 Must-Read UX Design Books

If you are a web designer and your designs sell the products of your end-customers well, this is your added value and your competitive advantage. Although UX is not rocket science and it’s just about common sense, there are lots of specific processes, tools and techniques that will help you create such designs. Adham Dannaway introduces his TOP 10 UX design books to help you improve your efficiency and increase your value in the eyes of your customers. Some of the books listed are intended for newbies and explain UX basics, and several books deal with UX life-cycle processes and methods. It’s interesting that Steve Krug, with his Don’t Make Me Think is still there.

50 CSS Tools & Resources from 2014

Speckyboy editors have published their 50 favorite CSS resources. The post is huge and contains the most useful CSS resources, tools, libraries, UI kits and frameworks that have been released this year. For more convenience, the resources are categorized into several sections. Enjoy the list and get the most out of it.

Trim your sails to the wind and read our blog in 2015. We’ll work hard to keep you in the loop. Happy New Year!

Christmas is coming! Download a Free Holiday Email Template! (PSD + HTML)

In the spirit of the holidays we’re giving our customers and blog readers a free holiday email template. It’s a responsive email template in a fully editable PSD format, with the full HTML markup included, hand-coded by our own Site Slinger team. It’s available for free download for your personal or commercial use. Edit away and have your mobile-optimized email template ready to go for your next email campaign.

Download a Free PSD + HTML Responsive Email Template!

In the spirit of the holidays we’re giving our customers and blog readers a free holiday email template. It’s a responsive email template in a fully editable PSD format, with the full HTML markup included, hand-coded by our own Site Slinger team. It’s available for free download for your personal or commercial use. Edit away and have your mobile-optimized email template ready to go for your next email campaign.

Great for advertising your holiday news or sales!

As the winter holidays are already upon us, you’re probably gearing up for those Christmas sales and other holiday events. Whether you are in marketing, event planning, or just need to send out a mobile-optimized email to your mailing list, we’ve got you covered with this free responsive email template. We’ve designed a great looking email ready for viewing on all major devices and email clients, including iOS, Outlook, and Gmail.

Mobile-optimized.

This email template was designed and hand-coded by experts to ensure a great mobile experience, along with full desktop viewing. Now days, more than half of emails are opened on mobile devices! It’s imperative your email reaches your audience when it’s convenient for them to view and act on it… without compromising the desktop aesthetics. We’ve put great effort into ensuring the email elements are mobile-optimized and appropriate for this holiday season.

We hope you’ll enjoy editing and using this free responsive email template, shared as a fully editable PSD and provided with hand-coded HTML – by our web development experts. If you need other PSD email designs converted to code, we can help! We’re experts at PSD to HTML, whether for emails or websites! Get your free holiday email template today!

Download

What’s Included:

Fully editable Photoshop file (PSD)
Hand-coded HTML template
High resolution image comp (JPG)

DOWNLOAD HERE

Preview

10 Proven Tips for You to Get Prepared for Holiday Email Campaigns!

At this time, when Christmas is coming, our main advice will be – do not try to just take from your customers (sell them something). Instead, give them as much as you can and your contacts will love you back. This approach pays off not only in Email marketing but also in life in general.

At this time, when holidays are coming, our main advice will be – do not try to just take from your customers (sell them something). Instead, give them as much as you can and your contacts will love you back. This approach pays off not only in Email marketing but also in life in general.

#1 Don’t Just Sell – Investigate and Communicate

Yes, your contacts database is still a source for additional sales to you. But why limit yourself to just selling? These people can become a valuable source of information, insights, and inspiration for your business growth. Beta test your new products or services on them. Ask what they find good about your customer service and what could be improved, etc., etc.

If you focus on selling to your current contacts database too much, you will miss a more promising opportunity. Use these contacts to better learn about your potential customers in general, their preferences and fears. This knowledge will help you get more new customers and get a bigger market share.

Stimulate your current contacts’ feedback by offering rewards in various forms. Take criticism even more gladly than the praise.

#2 Use Permission-Based Lists Only

Never ever purchase any contact databases for Email marketing. If you are just starting your business it may look like an attractive opportunity. But in reality unsolicited Emails will more likely damage your reputation and not bring any sales.

People usually share their addresses with those who can provide some value to them. So offer this value in the form of educational materials, tips, hints or any other valuable pieces of information. It is surely easy to say but harder to do. But it is worth doing.

#3 Use Email Marketing Automation Software

Even if your contact database is small there are still several reasons to apply specific Email marketing automation software like Mailchimp, Act-on, etc. right from the start.

With this software you’ll be able to reduce the guesswork to a minimum as these solutions provide very valuable statistics regarding your campaigns (such as Open Rates, Click Rates, Unsubscribe Rates, Bounce Rates, etc.).

Another advantage of such solutions is that they use special technologies and methods to ensure the highest delivery rate. If you do it by yourself using your personal/corporate Email address, you are at much more risk to be blacklisted for mass mails (even if you use permission-based lists).

Yet another advantage is that Email marketing software allows you to manage targeting and timing of your messages, schedule campaigns, and automatically send out Emails at the specified time.

#4 Test, Test, Test

Before sending your message to your end consumers, try it on your own test accounts including Gmail, Yahoo, Hotmail, and any account using Outlook client (especially if you have lots of corporate addresses in your list since many organizations still use Outlook as the default Email client). Check the layout of your Email message on your desktop, tablet, and cell phone.

You may also want to test some of your offers on a limited number of contacts from your database before sending them to the whole segment or a complete database.

If you want maximum efficiency, you can split one segment of your contact database into several sub-segments randomly and try several different messages to find the highest performing one (A/B testing).

#5 Use Responsive Email Template

Mobile Email usage statistics show that more than 50% of all Email opens occur on mobile devices nowadays. In some industries this ratio is up to 90%. So even if mobile traffic doesn’t take any significant share on your website according to your Google Analytics, you still need to make your Email responsive.

For this reason the ability of your Email message to be properly displayed on mobile devices is a must. If you already have a PSD file with your template, The Site Slinger will slice it to a responsive HTML template to save your time and efforts.

If your Emails contain links to some landing pages on your website, don’t forget to make those landing pages responsive, too.

#6 Get the Length Right

The length of your subject line and the Email itself is critical. The main rule is the more frequent your Emails are, the shorter they should be. Of course there are always some exceptions, especially if content is the feature of your business and consumption of that content is the feature of your customers. However, keep the volume of messages to the minimum possible.

The same is valid for Email subject lines. General recommendation and best practice here is to keep your subject line length under 50 characters. Such Emails always have higher Open Rates and CTR. Besides, longer subject lines are cut off on the majority of mobile devices, which additionally decreases efficiency.

#7 Keep Your Messages Easy to Scan and Perceive

People get lazier about reading and tend to pay more attention to rich media containing images, audio and video. Statistics show that rich-media messages generate much higher response rates. But it doesn’t mean you don’t need a text version anymore. Bear in mind Tip #4 Test, Test, Test, and experiment on your audience segments.

Use paragraphs, bulleted item lists, font bolding, columns. This will make the life of your readers easier and let them quickly scan your message for key points without going too deep into detail.

#8 Keep Track of Your Competitors and Industry Best Practices

Your competitors may become a wonderful source for inspiration and insights. You need to monitor them to keep track on what they do and how they do it. Do not afraid of borrowing and adopting their best features and know-hows. Your competitors’ achievements and best practices may build a good ground for your own strategy.

Keeping an eye on your competitors often helps to learn from their mistakes and avoid these mistakes in your own campaigns.

Keep track of latest design and Email marketing industry trends. Use free modern templates if you feel they perfectly cover your current needs. But craft your own personal designs as well.

#9 Keep Your Active Email Lists Clean

Pay attention to your bouncebacks and clean your lists accordingly. Distinguish between so called soft bouncebacks and hard ones. Soft bouncebacks mean that the Email address is generally valid but unable to receive your message because of temporary problems on the recipient’s side. Hard bouncebacks usually mean that the addresses have typos or the mailbox no longer exists.

Do not hesitate to delete hard bouncebacks from your active lists permanently, but keep them in inactive lists just for statistics and for the history. Otherwise you have the risk to be blocked by your ISP.

General recommendation for soft bouncebacks would be to categorize them in a separate list and make several attempts to deliver the message to them as part of your next campaign. If it doesn’t help, you should also move them to your inactive list.

Such categorization may help you understand your customers’ turnover and your minimum need for new contacts in order to maintain your database.

#10 Find Your Own Way to Success

Do not take industry surveys, best practices, and all those industry-related statistics too seriously. Of course you should take them into account, but in the end they all are just reference points, some kind of milestones and not verdicts.

Avoid copycatting your competitors’ strategy blindly even if they are well ahead of you. If you want to outperform them, you need to stand out from the crowd and invent your own unique features and style.

Do not afraid of experimenting and A/B testing, as they are the only means to find out what will work best for your business.

And don’t forget to wish your contacts Happy Holidays!

50% Christmas Discount on PSD to Email Conversion Services

This Christmas we’ve prepared something really special for you. Starting from December 04 until December 25, 2014, you can order our high-level PSD to Email and PSD to responsive HTML email conversion services with a 50% discount!

Christmas Is Coming – The Site Slinger Has Got Presents for You!

Dear friends,

Do not loose this one shot! This amazing Christmas offer is available for a limited time only.

High-end packages are now available starting at $149 (usual price is $299) and they are as follows:
– Easy to update flexible table structure;
– Deeply commented HTML code;
– Inline and embedded CSS versions;
– Easy to customize template;
– Tested and working with all major mail clients & devices;
– Retina 3x Support!

The offer expires on the 25th of December, so hurry up and grab your 50% discount! Request a free quote to get started – no credit card is required!

Click Here to order your outstanding PSD to Email Template.

Enjoy the Holiday Season with The Site Slinger!

Download Yours Now: Free Email Template! (PSD + HTML)

It’s Valentine’s Day and because we [HEART] our customers and blog readers we’re giving away a free email template in a fully editable PSD format, available for download for your personal or commercial use. Edit away and have your mobile-optimized template coded and ready for your next email campaign. Perfect for advertising your next event!

Download a Free PSD Email Template!

It’s Valentine’s Day and because we [HEART] our customers and blog readers we’re giving away a free email template in a fully editable PSD format, available for download for your personal or commercial use. Edit away and have your mobile-optimized template coded and ready to go for your next email campaign.

Perfect for advertising your next event.

SXSW 2014, anyone? Whether you are in marketing, event planning, or just need to send out a modern email to your mailing list, we’ve got you covered with this free email template – created for marketing and promoting events. We’ve designed a great looking email ready for viewing on all major devices and email clients, whether iOS, Outlook, or Gmail.

Mobile-optimized.

This email template was designed with mobile in mind. As of now, more than half of emails are opened on mobile devices! It’s imperative your email reaches your audience when it’s convenient for them to view and act on it… without compromising the desktop aesthetics. We’ve put great effort into ensuring the CTA button is thumb-clickable, the text is legible, and the imagery makes an impact, all within a minimalist and modern layout.

We hope you’ll enjoy editing and using this freebie email template, shared as a fully editable PSD and provided with example markup – we’ve included the HTML for a variation of this template so you can see how this might translate to code. If you need your completed PSD email design converted to code, we can help!

Download

What’s Included:

Fully editable Photoshop file (PSD)
Example HTML markup of a variation we made
Image comp (JPG)

DOWNLOAD HERE

Preview

Placeholder image used in design is shared under Creative Commons. Source: Unsplash.

Top 5 Web Design Mistakes of Modern Websites

These days, when we stumble upon a website that doesn’t grab our attention or immediately meet our needs, we surf away faster then you can say “HTML.” So how do new sites grab and keep a user’s attention? One of the first steps in creating a compelling and useful website is by avoiding the 5 remarkably common web design mistakes detailed in this post.

In 2013 U.S. internet users spent nearly 70 hours online per month, and U.K. users spent 43 hours online per month. We are so tied to the internet that many of us would rather lose a toe then our modem. Consequently, to some extent, we have all become web experts — or at least, very good at knowing how to find what we want.

1. The site is outdated

While webpages don’t need to be trendy, they do need to be current, both in terms of aesthetics and information. A webpage is the public face of your company. If it looks outdated, consumers may assume that you no longer offer the services you claim to offer, or worse, that you are no longer in business. Unless you’re going intentionally retro, you don’t want images of flip phones or clunky computers. Use bright, contemporary images and design. And be sure, of course, to keep your information up-to-date.

2. The site has no clear call-to-action

The call-to-action accomplishes two things:

It encourages users to further engage with your business.
It allows you to capture leads.

Place the call-to-action on your landing page. Often, the call-to-action is a form where users can leave email and request further information. But if a form is too complicated, at least be sure to encourage users to contact you. And be sure to make your contact information very accessible.

3. The site has no social media component

Facebook now has over 1 billion active monthly users. Twitter and Instagram are undeniable forces, along with Pinterest and LinkedIn. With the rise of social media, traditional disruptive marketing has been further replaced with the concept of content marketing: attracting customers by creating and curating useful and relevant content. You may do this by creating a deep library of texts and tools in your field for your customer; this, however, is not an immediate requirement. What is essential is that you begin to create a community around your field — a community in which you are the experts. Social media is the best tool available for this project.

4. Your site has a non-responsive web design

See our earlier post, “Why Responsive Web Design? Here’s 3 Reasons.” Non-responsive web design limits SEO, discourages on-the-go users, and can cost unnecessary time and money. Moreover, non-responsive web design is outmoded — users have come to expect, and need, responsive websites!

5. Bad UX: Your site is cluttered, incoherent and/or inconsistent

It amazes me how many websites still throw up incomprehensible walls of text. Or they use difficult-to-read fonts. Or they ignore the value of empty space. You want your information to pop, and usually, it will do so with the help of good graphic design. But unfortunately, good graphics don’t solve all of your design problems. Sites may look gorgeous, but because they are inconsistent in their use of font, color and general tone, they become unreadable. Moreover, if they lack good web-sense — that is, interactivity and smart layout — they can become just another pretty picture to surf past.

Remember that by the time you have collated all of your website’s content, organized it in a useful manner, and thrown in some nice graphics, your eyes have become tired. Ask for help. New eyes will see typos and inconsistencies. Moreover, outside experts can bring in new ideas that just may solve intractable communication issues you didn’t even know you had. There are several services you can use to test your site, such as Amazon’s Mechanical Turk, UserTesting, and TaskRabbit. We here at The Site Slinger also help out designers all the time with courtesy design or development feedback for a project you’re prepping. Want us to review something? Just let us know.

The Benefits of Flat Design

Flat design, which is often touted as the future of web design, is a trendy, minimalistic design aesthetic that eschews more complicated design techniques for a more simplified, classic appearance.

If you are planning to design a new website and are trying to decide what type of design is right for you, check out this post. It contains many of the benefits you will reap if you choose to design with flat design.

If you’ve paid attention to what is happening online, you’ve probably heard the term “flat design” – but what is flat design, exactly? Flat design, which is often touted as the future of web design, is a trendy, minimalistic design aesthetic that eschews more complicated design techniques for a more simplified, classic appearance.

Flat design is easy to identify when you spot it; it is often described as clean, and it incorporates straight, crisp edges, bright colors, and 2D illustrations (hence, the name “flat”). Not only is flat design appealing to the eye and easy to read, it also is known for its emphasis on usability and user-friendliness, and it is a great choice for anyone who wants their website to be easy to use for all of its visitors.

If you are planning to design a new website and are trying to decide what type of design is right for you, check out the list below. It contains many of the benefits you will reap if you choose to design with flat design.

1. Great for usability.

It’s just a fact that messages communicated simply and clearly are more easily digested by a viewer. Thus, flat design trumps in terms of usability, since it shuns complicated design elements and excess decoration for the bare essentials – just what the user needs to grasp or see to make the site function. Sites with flat design choose functionality while espousing modern style.

2. Better for Small Screens.

In today’s digital age, people are accessing the Internet via a huge range of devices – from desktops to laptops to tablets to mobile phones. Flat design is helpful because it tends to be both aesthetically pleasing and functional when adapted for a smaller screen. The reason flat design adapts well is because it incorporates a lot of white space and often uses large, clear buttons — which tends to “work,” and appear clear, even when viewed on a smaller screen or device. The latest developments with iPhone have even incorporated flat design, finally.

3. Alleviate Technical Issues.

Flat design can alleviate common technical website issues. Websites designed with flat design require fewer images to design, and they also need far less complicated coding, which often results in faster loading times and a site with less risk for glitches.

4. Better SEO.

A site’s SEO ranking determines how high it appears in search engine results – which in turn increases the likelihood of new customers finding it. There are countless variables that go into calculating a site’s ranking, but one important one is a website’s speed (Basically, faster websites have higher rankings). When a site uses fewer images and smaller images, it takes a lot shorter time to load – which means, in general, that a site designed with flat design will have a shorter loading time and a higher SEO ranking.

5. Focus on content.

One of the best benefits of flat design is that it puts the website’s focus on content or function and not merely its design. You don’t want people visiting your site only because it looks cool or because they want to play with all of its bells and whistles – only to leave after appreciating its style and design. A flat-designed website’s simplicity makes clear its sole purpose, ensuring that people who visit, use its functions or complete a business transaction – ultimately making your site a tool that serves solely to help you increase your business or cause.

Image(s) source: All images in this post were obtained via Creative Commons license from Pixels Daily.