.. time for a new roundup with the best design-related articles and tutorials of last week’s blogosphere, hand-picked for you. It’s all about webdesign, graphic design, SEO, tutorials, social media and more. A broad scale of topics, but never-the-less the underlying focus is on Design.
Also I see this as my personal bookmarks of great articles from the Community of the last period. The different articles and post are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
How to Build a Website Using Twitter Bootstrap and SASS – Part 2 - In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!
A Look Into: CSS3 :First-Of-Type Structural Selector - The :first-of-type selector will target the first child of the specified element, for example, the snippet below will target the first h2 on the web page.
18 Useful Web Based Code Editors for Developers – There may be times which you are not with your computer so the below web based or let’s say browser based online editors will help you to do almost every. Today we selected most preferred online code editors by developers ..
10 Latest HTML5 Tags to Get Professional Skills - In a word, HTML5 offers a number of new unique features aiming to change the way websites and users interact. Let’s revise the key tag innovations of HTML5 markup.
10 things web developers mustknow to become truly amazing – Developers need to be more than code-generating grunt workers. We’re expecting more of our digital life and it’s these guys who build it, so what do the best devs need to know?
Async Sharing Buttons (G+, Facebook, Twitter) – Some of these services already (smartly) provide their scripts in an async fashion, this just combines them into more efficient, organized, and understandable code.
Mastering CSS3 Box-Shadow - This post want’s to bring up one of the great features introduced in CSS3, the box-shadow property. Now you can stop using images for displaying box-shadows, with just a few CSS lines you can create awesome effects.
The Pain of HTML5- Not all of the things we would like to do are possible yet. That’s what this post is about; places where HTML5 currently falls short that have hurt us in the last month.
Best Practices For Efficient HTML5 Coding - HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list of ..
Judging CSS / Spotting Bad Code - Perhaps you’ve hired someone to write CSS for you and you want to have a gauge of how good they did. Perhaps you’re looking through someone’s CSS that you may potentially hire. Perhaps you want to gauge your own CSS somehow.
New blending features in CSS – The first blog post only talked about blending between HTML elements. However, the CSS box model and the CSS3 background spec define a stack of content and sometimes you want to blend within this stack.
CSS SELECTOR PERFORMANCE/front-end myths - No matter where you look, no matter what sources you follow, if you read up on front-end development you cannot escape the reign of performance. Performance testing has become a necessity but we should take care it doesn’t turn into an obsession.
Shoot to kill; CSS selector intent – Keep your key selector as explicit and specific as you possibly can, preferring for it to be a class over anything else. Applying specific styling through a vague selector is dangerous.
Using CSS3 Attribute Selectors – In this tutorial we will outline how to use these new substring matching attribute selectors. You are most likely to find attribute selectors of this kind useful when styling links, so that is what we will focus on here.
WebGL Essentials: Part I – WebGL is a JavaScript API that renders 3D content to an HTML5 canvas. It does this by using two scripts that are known in the “3D world” asShaders. In this tutorial I will cover all the essentials you need to get started using this framework.
Chain CSS animations together with JavaScript – Using CSS animations and transitions, henceforth known as CSS animation, has already been well covered, so in this tutorial I’m going to show you how CSS animations can be chained together using JavaScript event handlers, which really increases their potential.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Luke Wroblewski on mobile first - The core idea is elegantly simple. Rather than the traditional approach of starting with the ‘desktop version’ of a website and then simplifying it for mobile, Wroblewski proposes we begin by building sites that work well on small-screen, portable devices, then build up from there.
Things to Consider in Creating a User-friendly Mobile Website- Since most websites are considering having a mobile version, we will be giving some valuable tips for those who are planning to design one.
Advantages of Responsive Web Design - The first question you need to ask is the importance of having an efficiently designed website for your company. A study by Compuware has found that almost 57% of users will never recommend a company with a bad website.
iOS safari resizing issues - Here is the interesting problem. iOS safari seems to randomly trigger resize events when the page first loads. The only way you can stop it doing this is to fix the height of your HTML and Body tags: height: 100%; overflow: auto; margin: 0; The problem ..
Responsive Web Layouts For Mobile Screens: Intro, Tips And Examples - With such a fluid design scheme there are obvious benefits and drawbacks. Consider my examples below for how responsive web design can make the transition into mobile devices a smoother one.
10 Ultimate Usability Guidelines for Web Designers - Gather some good knowledge on usability nitty-gritty and ways to put them into practice. Continue reading and you will learn how to implement usability basics on your website without having to spend a fortune.
A/B Testing Lessons Learned: 4 Marketing Case Studies - A/B testing can turn around a marketing campaign from sucky to awesome, and I’ll show you how with the following four examples showcasing how others have done it.
Managing JavaScript on Responsive Websites – jRespond is a script that holds a list of user-defined functions that are fired based on the browser’s width compared to a list of customizable breakpoints. Entry and exit functions can be defined so transitions ..
Why We Chose HTML5 Over Native Apps – HTML5 apps offer tremendous business advantages. We were able to reduce development time and cost, both up front and for the future. We can literally build once, deploy everywhere, as opposed to having to update several platforms at once.
Building responsive 2-to-1 column layouts – While one-column HTML email layouts are generally the way to go when optimizing your newsletter for mobile devices, there is an elegant way to create responsive 2-column layouts, without resorting to mile-long stylesheets in media queries.
How we learned to leave default font-size alone and embrace the em – But using contemporary responsive design principles is convincing us to leave global font-size alone and embrace the standard em.
Lessons for devs from a responsive build – I’ve built mobile-optimised, fluid and semi-responsive sites before, but this was the most complete responsive build I’ve worked on to date, so I thought it would be worth discussing some of what we learned and had confirmed.
Do Mobile And Desktop Interfaces Belong Together? – The term “responsive design” has gathered a lot of well-deserved buzz among Web designers. As you probably know, it refers to an easy way to dynamically customize interfaces for different devices and to serve them ..
Return to the garden – For what it’s worth I’m writing from the standpoint of working in a sizeable agency on many projects where RWD is not a practical option based on such factors as functionality and user profiling.
The Importance of Creative Design For Mobile App User Experience – UX defines the userflow and functionality of the product, while the UI is all about what visuals you see while using the app. Some additional apps that do a great job of giving users an intuitive UX coupled with a stunning UI
50 Useful Responsive Web Design Tools For Designers – Comprise of frameworks, services, and downloadble scripts, we think they are going to be a great help when it comes to responsive web development.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
How to Create Your Own Webfont Icon Packs With IcoMoon - IcoMoon is one of the most useful web development applications I’ve seen and it eradicates several issues associated with webfonts. Highly recommended.
Why you should use Adobe Illustrator to create user interfaces - Most choose a bitmap editor such as Photoshop. However, I believe vector editors are better suited for this purpose, especially when it comes to such a powerful application as Adobe Illustrator.
10 Best jQuery and HTML5 WYSIWYG Plugins - HTML5 WYSIWYG (What You See Is What You Get) is all the rage now! In today’s post we are going to present you what we think 10 of the very best jQuery and HTML5 WYSIWYG plugins just to save your time finding your plugin.
10 useful typography tips to improve your website readability - Typography is often neglected on websites. This is a shame, because by improving your typography, you’ll improve both your website design and readability. In this article, I have compiled 10 extremely useful typography tips.
How the Open Source Movement Affects Web Designers – In this article I want to share some ideas looking forward as to how web designers can start working within the open source movement and use it to their advantage.
Why And How To Use Icon Fonts - Icon fonts won’t be appropriate for all scenarios, but where they are they really are awesome. They offer so many benefits over using an icon image, most notably that they scale and maintain proportion and are easily manipulated in a numberof ways.
Latest Resources For Web Ninjas - Today’s release is mostly based on nice JS, CSS3 & HTML5 resources, they’re the current state of the art and therefore you should take a look to some of these resources to bring your project to the next level, and please don’t forget WordPress, ..
Decoding the ‘Hows’ and ‘Whys’ of Cross Browser Compatibility? - Cross browsing compatibility is a website defining feature. Capability to have access to various other web browsers and feature from which websites have increased visibility is an addition to website design and development.
17 Great Wireframing Tools for Web Designers – “Time is of the essence” is a bold statement that definitely applies to any design career. We all get paid by the hour, so the faster we can work, the more money we can make. This means that being able to get up and running on our design work has become a necessity.
Mobilising a CMS – It is important to remember that, as a platform, mobile provokes different behaviour and expectations from the user. Mobile is suited to certain task based activities such as our quick content creation tool for our CMS.
Build a Shopify themewith the Liquid engine – Shopify provides a fast, simple way to build an online store. Shopify uses a template engine called Liquid to output data from your store into your templates. Liquid is perhaps the one ingredient of a Shopify theme you haven’t used before and it can be offputting.
Boost Your Site’s Load Time with the Lazy Load Plugin! – lazy loading is a good thing. It is simply a design pattern that defers the loading of a particular element in a web. If you choose to load that particular element last, it won’t prevent the rest of the site from being loaded.
The 15 best tools for data visualisation – One of the best ways to get your message across is to use a visualisation to quickly draw attention to the key messages, and by presenting data visually it’s also possible to uncover surprising patterns and observations that wouldn’t be apparent from looking at stats alone.
Five killer ways to use buttons on your site – There are several guiding principles applied against this concept; Similarity, Continuation, Closure, Proximity, Figure and Ground. We can use these to our advantage when designing web page elements – specifically with the design of buttons.
Web typographers: embracetechnical constraints! – There is a lot of talk about how web typographers must adapt to the contemporary demands of dynamic content and fluid designs. What is often not said is how primitive and laborious the techniques we have at our disposal still are.
The Letterpress Effect: From Fireworks To CSS – One of the visual effects that is a mainstay in my Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background.
You Only Have 8 Seconds – Do you know that an average website visitor takes just 6-8 secs to decide whether to stay on your site? Most of the visitors are not ready to grant you more time. So, what can you do in these 6-8 seconds to convey your real message, when you already know that other websites are just a click away?
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
The complete guide to fixing exposure in Photoshop - What is a histogram? How do you fix poorly exposed photos? We answer these questions and more with this guide to exposure in Photoshop CS6 and Camera Raw.
5 pro font kerning tricks you need to know - Some designers find kerning for fonts easy, others find it a tricky process where success is achieved more by luck than real judgement.
A Beginner’s Guide to Using Textures in Photoshop– A texture is something you apply over an element to give it more depth and add more realism to your design. Today, we’ll look at some sources of good quality textures and I’ll show you how to apply them to your own designs.
So You Want to Be a Graphic Designer? – There are a lot of people that think being a graphic designer is easy. Sure it looks fun and is fun at times, but what they don’t see is the behind the scenes work that takes place to make a success of the chosen career field.
Blogging, Social Media, Writing, Content Strategy, etc.
How To Transfer/Merge Your Google+ Accounts - Early adapters would have created a Google+ account with their @gmail.com addresses. When Google announced the support of Google+ in Google Apps, most users face a dilemma: Should I continue using the Google+ ..
Content Strategy for Small Businesses - Content strategy has always been a valued part of SEO and, with Google’s recent updates, it’s become increasingly important. No matter what size your business is, having a regular flow of good quality content on your site is essential.
Blog Planning: The Importance of Creating a List of Blog Topics for Future Articles- In order to streamline things and save time when it comes to blogging I highly recommend that blog owners take time to do blog planning whereby you pu together a list of article topics so that when it comes time to ..
The #1 Website Copy Mistake That Most Businesses Make – So the biggest website copy mistake that businesses make is focusing too much on themselves. They write about what it is that they do and how they do it, but they fail to talk about how their product or service benefits customers.
How and Why to Use Social Signals on your Website – Adding social signals to your website adds credibility to your business, letting users know that you are more than just a one dimensional site in the bottomless pit that is the internet. It gives users another place to visit and see your content.
WordPress
How to Merge Categories in WordPress - You might be surprised to learn that it can easily be done through the WordPress dashboard. Here’s a quick step-by-step guide for merging categories without using a plugin.
Style Your WordPress Menus With Custom CSS - WordPress offers you a lot of styling options for your menu right out of the box. By default, the menu comes with a ton of CSS classes applied to it already, which gives you immense control on styling it.
Create Your Custom WordPress Dashboard Widget - Today we’ll create a custom widget which displays the latest tweets from a custom user. To do this, we use the wp_add_dashboard_widget function to register a new dashboard widget for your blog.
About oEmbed & How To Embed SlideShare and Instagram in WordPress - WordPress started supporting oEmbed since 2.9 to make content sharing easier. Now users can just paste the URL of a youtube video (or any supported website) and WordPress automatically embeds the content.
Improve your WordPress search results with a Google custom search engine - With a Google Custom Search Engine, you replace the substandard WordPress search with all the searching power of Google, but limited to your own website, so that your visitors will always get the best possible results when they perform a search on your site.
Not Just Backup, Your WordPress Site Needs More – Any machinery, in order to work perfectly requires proper maintenance and fine tuning, without which you’re going to end up with a rickety one. This holds true for your WordPress site too or any website for that matter.
How to Optimize Your WordPress Development Workflow – As developers we should always be looking for ways to speed up and automate our workflow as much as we can but this isn’t always an easy process. We have to remember to compile, minimize, concatenate ..
Building a WordPress Plugin to Create an AJAX Contact Form – Besides providing us with features like creating post and pages, WordPress also offers good support for enhancing site functionality through plugins. In this article we are going to see how to create a simple contact form plugin in WordPress and post data via AJAX.
Customizing Comments in WordPress – Functionality and Appearance – In this article we are going to see how we can change the behavior and appearance of the comments in our WordPress site.
Ten Key Ways to Secure a Typical WordPress Installation – There are a number of things that can be done to dramatically improve the security of a WordPress installation and thwart hackers’ attempts to take over a website’s content, database, and overall reliability.
Search Engine Optimalization, Conversions, Analytics, etc.
What a Canonical Link is and How to Use it Properly- some serious confusion has raised as just how this canonical link structure is implemented into websites, and where it’s appropriate for inclusion. Especially because it’s a meta tag, many developers have steered clear of canonical usage in their designs
10 Important Conversion Optimization Tips That Make Your Site Bad@$$ – Now you’re ready to move on to the next level. Again, this post barely scratches the surface, but it does provide you with some additional, important areas to consider when looking at your site’s usability.
Tutorials
20+ Best Collections Of Adobe Illustrator Tutorials - Adobe Illustrator is generally the primary option to consider. However, the software package itself is a pretty hard to study but thanks to graphic designers who created set-by-step tutorials for us.
HOW TO: Create a Simple Web Parallax Effect aka Javascript Animation - Guest post from Robby Leonardi, a designer and developer from New York and it’s based on his website. This tutorial will explain some of the techniques behind his website.
20+ Best Collections Of Adobe Illustrator Tutorials- Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow of applications such as Photoshop. In this roundup we’ve showcased “20+ Best Collections Of Adobe Illustrator Tutorials”
Designing an effective pricing table - Having an effective pricing table can help you a lot to increase the conversion rate for your product sales page. So, in today’s article you’ll learn how to create a nice and effective pricing table using CSS3.
11 Stunning CSS3 and jQuery Powered Tutorials – In this post, we have gathered 11 CSS3 related tutorials that show you how to make stunning effects, some are experimentals, but rest assure, these are the future of CSS.
Portfolio Flipping Slider Using jQuery & CSS3 – There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.
3D Flipping Circle with CSS3 and jQuery – In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
The Parallax Scrolling Effect: 40 Examples and Tutorials – In this round up, we have some fantastic examples and uses of the parallax effect for you. The parallax scrolling effect, now a firm design trend, is a technique that uses multiple background images that move at different..
Freelance, Business and Workflow Related Stuff
5 Rules to Drive Traffic to Your Site Using Email Marketing - Marketing any company or institution through email can still be the most effective method, both in terms of cost and of direct market penetration, of reaching out to clients, either existing or potential.
5 Ways an Online Portfolio Can Streamline Your Job Search - Online portfolios allow you to control how clients view your work, putting you in the driver’s seat on everything from the flow of your work to what parts of your business you choose to emphasize.
Keys To Better Communication With Clients- While they appreciate the provider’s knowledge of the profession and industry, they bemoan the reality that they cannot translate that knowledge into language that someone who is not a fellow Web professional would understand.
5 reasons why your portfolio website isn’t more successful - You’ve created your portfolio website, but it’s just not getting the interest that you hoped. We explain why, and what to do about it. Follow our tips and you’ll soon be fending off the enquiries…
Perfect Pricing Part Deux — More money from fewer sales – Choosing a pricing strategy based on competition is a natural approach, but also a flawed one. Price competition implies scarcity—supply and demand market forces. There is no scarcity for ebooks because digital files are replicated practically for free.
F*cking Brilliant, a great Read or just magnificent Tips!
How Creativity Can Prove Valuable - Designing is also a field of creativity if you aren’t able to present a new thing all the times you cannot become a successful, if you are a creative enough designer it means you are a professional designer.
Designing What’s Never Been Done Before - For today’s designer, much of the work we do focuses on improving designs that already exist. Whether what we’re working on is something we’ve built or we’re improving on a competitor’s idea, we can look to what users do today ..
The Personality Layer – Easily overlooked details are the ones that I’m particularly interested in because of the reaction they are capable of causing in users. These details trigger an emotional response, and if used purposefully and fittingly, they will help to form a personality that people will respond to positively when interacting with the product.
Big question: should we dropsocial media buttons? – In a recent article Oliver Reichenstein argued that social media buttons create clutter and don’t really boost traffic. We asked our panel of experts for their views
The Marketing Problem Is Simple: There Are Too Many Ads – As a brand, do you find it hard to put your message in front of the right audience? This used to be the major challenge. The entire construct of the advertising industry was built on the scarcity model.
I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. Did we miss a great article, please let us know ..