.. thank God it’s weekend! Yo all know what that means: 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.
Using SVG clipPath - One neat thing you can do with SVG, besides creating your own image filters, is creating a clipping path (or mask) that can be used to alter the shape of your images and the boundaries of links, the latter being what most excites me because you can now easily ..
10 things you didn’t knowJavaScript could do- In the following article, we will discover 10 use cases for JavaScript that are different from the common “in browser” ones, you’re used to.
CSS Tricks: How to Make your Website Load Faster - By writing your CSS effectively for browser rendering, you will allow your website or blog to take less resource memory from your visitor’s computer so that your website will display much faster.
Understanding HTML5 and CSS3 for Web Design - HTML5 and CSS3 gives a web developer even more tools with which to express himself, here is a basic overview of what they are so you can build cutting edge websites.
Quick Tip: Have You Heard About CSS Filters Yet? - The CSS filter property works just like any other CSS property. However, as usual browser support is pretty thin on the ground. The only browsers that support filters are webkit based. For this reason we need to use browser prefixes.
12 ‘Must-Know” Advantages of PHP - A popular choice in today’s web world is using PHP. PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server. Its clarity in design, well organized modules ..
Getting Started With Scalable Vector Graphics (SVG) - As a web designer it’s high time you knew how to implement SVG (Scalable Vector Graphics) into your websites. Let’s now take a look at the basics of SVG, as well as more complex designs such as logos or icons.
Rethinking HTML For CSS - To consider full benefit of CSS, the particular HTML code was required to provide a strong, well built foundation. This shows the right way to write much better, more CSS all through your site, html actually become simpler to write.
Animating CSS3 Image Filters - I’ve shown how to create cross-browser image filter effects with CSS and SVG:converting color photographs to black and white and sepia-tone, as well as blurring them. The next obvious step is to animate these effects.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Responsive Web Design: An Ultimate Guide - If you are running a website, you must have a responsive web design so that your website is accessible via mobiles as well. If you are not aware of all the hype responsive web design is getting, you should learn more about it.
Adaptive, Responsive or Mobile First? - There are arguments for using each mobile design methodology. When designing a site from scratch it’s worthwhile investigating mobile first. When resources are tight a quick adaptive site might meet your needs. If you want to serve ..
How To Maintain Readable Type In Responsive Design - As responsive layouts adapt to varying screen widths, one of these choices (line-length) changes. To maintain the same proportional relationships other aspects of the type need to adjust.
Using media queries to hide CSS3 from older browsers - While working on a lot of responsive layouts lately I’ve started using an approach that I’ve found reduces the risk of more advanced CSS, especially CSS3, tripping up older browsers.
Who killed the inactive button state? - Each disrupts the user and has the capability to break their flow. Online, where distraction is high (and time and attention are scarce) interfaces that lack inactive states can help designers minimize errors with less interruption.
Optimizing Your Site for Mobile Traffic - Using media queries and responsive design principles, it’s not only possible but normal, nowadays, to create a site that can display cleanly and attractively on any mobile device.
Expandable Mobile Search Form - today I’m going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form.
Why Google loves responsive design (and you should too) – This means that to ensure your website is optimised in the best way for mobiles and for search engine spiders,responsive design is the best way to go.
Responsive Menus: Enhancing Navigation On Mobile Websites - In this article, we’ll focus on one aspect of the user experience — navigation menus — and detail a few approaches to making them work better on mobile devices.
Picking a Mobile Strategy - Once you’ve prioritized your website’s content, your next decision is which approach—mobile-compatible or responsive design—to use. Each has its pros and cons, so a quick look at both may be useful.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
What’s new for designers, June 2012 - The June edition of what’s new for web designers and developers includes new web apps, jQuery plugins, grid tools, frameworks, productivity and business tools, responsive design resources, and some really great new fonts.
How to Properly Design a Services Page - The homepage is likely the most popular page on your website. But after the homepage there are one or two other pages of almost equal importance. One of those pages is the Services page.
15 jQuery Plugins To Improve Typography - There is a collection of superb jQuery typography plugins that provide web designers better control over their websites for web typography. At the hands of a competent designer, you can control jQuery in web pages to achieve a high level of typographic style.
The Best CSS3 Tools, Experiments And Demos For Web Developers - At the same time that the use of CSS3 has extended, there have emerged lots of tools and code generators poping up all around trying to facilitate coding work and to simplify the application of new properties to the developer.
8 Creative and Useful Web Font Javascript Plugins - We have a list of javascript plugins that able to help you enhance the look of text, for example text kerning, baseline, responsive text, radical text typography and as well as a few more text effects that you can use if you want a particular block of text looks more prominent.
Form-Field Validation: The Errors-Only Approach - Some of the frustration with validation error pages likely stems from the user being returned to the same page they came from. Being returned to the exact same page is problematic for a couple of reasons
Brackets: a Revolutionary Code Editor for the Web - While most code editors do a reasonable job, the majority have their roots in desktop development. They may offer reasonable tools but web development projects consist of multiple related files. You’ll often have HTML, ..
How to fix your rags, widows, and orphans - In this post, I will demonstrate taking control of your rags, widows, and orphans. How can the web designer obtain command over the rendered word avoiding unsightly rags, painful to read widows, and dreadful orphans?
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Typography: Common Myths and Mistakes - As graphic or web designers we work with typography all the time, and even if we don’t all call ourselves typographers, setting type in one form or another is unavoidable. It’s a very large part of our job.
Sizing type with Lucas Sequences – The relationship between text and the rest of a page is one of the key characteristics of any design. Rhythm, emphasis and tone are all compromised without correctly scaled type. However, selecting text sizes is often both a painstaking and ..
Color Psychology in Identity and Branding - We can certainly emit a recipe to cap with success the color choosing process in identity and branding: mix your client’s preferences with the subjective meaning of colors, your knowledge of color harmonizing and your mastering of the ..
10 expert photography tips for graphic designers - If you’ve ever had to provide photography for a client project, it can be tricky to get things just right. Thankfully, here are 10 hot photography tips for designers to help you take the perfect shot.
Blogging, Social Media, Writing, Content Strategy, etc.
Where you can stick your social networking buttons - Why is it that every website seems compelled to include social media buttons these days? More to the point, why do they do it with no thought as to the best place to stick them!
7 Foolproof Tactics to Write Better Blog Posts with Social Media - Fortunately, social media has made it really easy to find and study the language that your audience uses so you can write better, compelling blogs posts that lure readers in and keep them there until the very last word.
10 Ways to Keep Your WordPress Site Updated and Fresh- The best way to keep people coming back to your site is by providing them with fresh new content on a regular basis. There are a number of ways to do this, such as blogging, posting tweets, and building a forums ..
7 Blogging Steps Even Veteran Bloggers Forget - There could be many reasons why these basic blogging tips were overlooked. They could have been in a hurry, a little lazy, or maybe they think these things aren’t important any more, but they are often critical to the success of an article.
Seven more tips for getting retweets on Twitter - Twitter is the perfect medium for sharing links to your content and driving traffic, but it’s not enough to simply publish content and hoping for the best. To give yourself the best chance of gaining retweets and clicks you need to know when to tweet and how often.
WordPress
Planning and Building an Intranet with WordPress - Sometimes an Intranet only needs to be as basic as a password-protected reference site. For others, social profiles and real-time collaboration are important.
Adding Custom Navigation Menus in WordPress Themes - Navigation Menu was introduced in WordPress Version 3.0 and in a new WordPress Version 3.4 you can utilize these great features to customise the navigation menus into any theme. All you have to add few code segments in your theme.
Configure jQuery Plugins via WordPress Admin - This tutorial will utilise the Options Framework by WPTheming to create a theme options page. The options page will present any available settings (within the jQuery plugin) we make available.
18 Recently Released Free WordPress Plugins Worth Checking Out - In today’s post we have gathered recently released wordpress plugins which you might find useful for your blog.Just check out the new wordpress plugins,maybe you can find an essential one for your blog.
Build a Slideshow Plugin for WordPress - By following this tutorial, it is implied that you are running an Apache and MySQL server locally or remotely in order to be able to install WordPress. Also, that you have a 3.1+ version of WordPress installed that you have access ..
WordPress dashboard hacks for developers and freelancers - The dashboard is an essential part of WordPress, as it is the place where you write posts and install plugins. But as a developer and/or freelancer, you have to be careful about what your clients are doing on the ..
12 Must-Do Tasks for the New WordPress Site Owner- This post shares the top 12 power sources you can plug into with your brand-new WordPress site. It may seem like a lot to do, but they’re listed in order of importance. Work on the top of the list first.
Get to grips with shortcodes in WordPress - So why use shortcodes? Well, for a start they are a super short way to add all kinds of content in a shorthand way, it saves repeating blocks of code and running into issues and errors.
Do-It-Yourself Caching Methods With WordPress - One or both caching methods is easy and could significantly improve the performance of your plugin. If a user of your plugin decides to use a specialized caching plugin, all the better, but make sure that your code is optimized.
Custom Functionality Plugin for WordPress – Pros and Cons - This article introduces the custom functionality plugin as a modular and portable alternative to code’s copy/pasting into the theme’s functions.php file. There are advantages and disadvantages of such an approach, which are discussed from time to time in the WordPress community.
5 WordPress Comments Section Hacks - One thing that makes WordPress so dynamic is the ability for readers to easily post comments. This interaction between you and the readers is therefore an important element in your website and should be given the same attention as other sections of your website.
How to Create a WordPress plugin (Video Tutorial) - It is actually better to apply some tweaks to your site via a simple WordPress plugin rather than hacking your theme or an existing plugin. This approach can also help you keep the functionality separate.
How To: Add Images for Tags & Show Trending Topics like Mashable - In today’s post we will try to learn how to display tags as trending topics in the sidebar with images. Just like Mashable, except that our trending topics will not have a follow button below them.
Working with Many WordPress Installations in One Database – The configuration file for all versions allows for quite a few customizations that can enable multiple blogs in one database, and a new feature in the WordPress 3.0 Dashboard actually allows multiple blogs in an entirely new way.
Styling Simple Nested Comments with CSS - Today we’re going to have a look at nested comments. We’ll be styling ours so that they have a tree-like structure and we’ll look at a couple of ways we can approach things.
Integrating Simple CSS Grid Layouts Into WordPress - Getting a consistent, solid grid layout into WordPress can be a painless process if you use the right tools. In this tutorial, you will learn step by step how to quickly set up a grid system in WordPress that is very lightweight and easy to modify.
Shortcodes: Should They Be Done Differently? - Even though most of the time you WILL find helpful shortcode generators within plugins and themes, the same cannot be said to edit and maintain the content.
Search Engine Optimalization, Conversions, Analytics, etc.
SEO Your YouTube Videos in 10 Steps - In this article we are going to have a look at the various strategies and tactics that will help you rank your YouTube videos inside the YouTube video search engine.
20 SEO Tips for Your WordPress Blog - WordPress is known as the best blogging platform for a reason, which enables you to build Blogs, Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made WordPress the most popular blog software available.
7 Things Most People Don’t Know About the Google Penguin Update - Google Penguin rocked the SEO world, especially for WordPress site owners. Heck, a lot of us were stillrecovering from Panda – an update released a year before Penguin, then the mighty Penguin hit.
Dealing With The Increasing Complexity and Volume of SEO Tasks - We’re going to cover a LOT of ground here. Unfortunately, this means that we have to sacrifice a little depth to gain the breadth. This post isn’t meant to be a tutorial on every aspect of SEO, but rather a way ..
How Content Creators Benefit From The New SEO - This post describes five important developments that content creators should be aware of, and then we’ll outline several ways to capitalize on them.
10 Ways Coding Can Help Your SEO - However, ignoring the important role that your site’s coding can play in its overall optimization is essentially the same as building your home on an unstable foundation. Consider all of the following ways that coding can help your site’s SEO ..
Tutorials
Build an Awesome CSS Slider With Four Overlays - Today’s project is a fun one. We’re going to build a standard CSS image slider with a twist: the visible image area will be divided into four distinct sections, each with a hidden message that is revealed when the user hovers over it.
Timed Notifications with CSS Animations- A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.
Pull Off Awesome Scroll Effects With Scroll.js - It’s a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS.
Notification bubble with CSS3 keyframe animation - I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.
Responsive 3D Panel Layout - A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects.
CSS3 Pricing Table UI Element (Tutorial) - In this tutorial we’re going to create an amazing pricing table UI element using CSS3. It has a nice hover effect created with CSS3 transitions, when you roll the mouse over a pricing plan.
16 Best CSS3 Transitions And Animations Tutorials - So today we have a list of some Amazing CSS Transitions & Animations techniques. All these techniques allow creating enjoyable and practical effects for enhancing the overall look of your website.
Freelance, Business and Workflow Related Stuff
Why Blogs are Still Important for Freelancers - So, the question today is: “Is it still worthwhile for a freelancer to have a blog for their freelance business?” In this post, we’ll take a another look at freelancer blogs.
How to make a good first impression with clients - You only get one chance to make a good impression, or so the old adage goes. For designers, doing so can mean winning over a creative director to secure that dream job, or persuading potential clients or collaborators that ..
How to Sell the Most Important Brand You Own – Yourself- When you are a freelancer, you are free to build your own personality and your own brand. There are many ways to brand yourself. A few of the basic and simple methods of branding yourself ..
9 Things You Should Know About Freelancing Full-Time- The secret to succeeding as a full time freelancer is to treat it as a business. You’re the CEO of your freelance company. You’re the one responsible for everything related to it.
Conquer Big Creative Projects Using Past, Present, and Future Focus - I’ve found it possible to manage a huge increase in my workload without becoming frantic. Here are my secrets to using past, present, and future focus to tackle a large creative project with a fixed deadline ..
9 Symptoms, It’s Time to End One-man Show in Design Business - here is no need to push yourself really hard into running a one-man show and doing everything on your own. Taking help is always good because if you do not meet deadlines you will end up losing clients.
The Art of Separating the Bad Leads from the Good Ones - In this blog post, we want to give you a couple of valuable tips on how to manage incoming leads, and more specifically, how to separate the bad leads from the good leads that are worth pursuing.
F*cking Brilliant, a great Read or just magnificent Tips!
5 Ways to Improve Your Contact Form Conversion Rate - Contact forms are the rubicon for interactions between your company and the outside world. While there are many interaction points and forms on a site the contact form is the place where users come to connect directly with you.
how much does a responsive web design cost? - The fact is that that responsive web design costs more…than doing nothing. But this is 2012. At the very least a web experience should have at least some mobile consideration, and at the very most a site should be full-on mobile optimized.
Constraints & Affordances - In the digital space, our resources are limitless. Our canvas is infinitely large, and comes at no extra cost. We can be dangerously wasteful. What constraints exist in this world? Certainly not one of resources. That leaves time and money. But the web is cheap, and it’s always on. Even those constraints are weak and blurry.
A Comprehensive Guide to Planning an E-Commerce Website - Have you ever stopped to consider what makes an e-commerce website successful? Is it good planning? Investment? Good user interface design and consideration of usability? Security? I think it’s a ..
Have You Tried Talking To Your Customers? - Talking to your customers is one of the most important things you can do as an app owner, so shouldn’t it be easy?
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 .. To keep up to date with all the cool links, simply follow me @gonzodesign