It’s Saturday .. time for a new roundup with the best design-related articles and tutorials of last week’s blogosphere, hand-picked. 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.
CSS3 Substring Matching Attribute Selectors - The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.
Learning LESS: Mixins - We continue on our journey of Learning LESS today as we dig into an extremely powerful component of LESS: Mixins. If you haven’t read our first two posts on the topic, check out Learning LESS: An Introduction and Learning LESS: Variables.
Scalable Vector Graphics: Drawing Basics – An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily relate to pixels, cm, inches or other units because the images are scalable to any dimension. Optionally, you can define a viewbox which determines the co-ordinates your SVG uses.
Framework Fight: Zurb Foundation vs. Twitter Bootstrap - Both Bootstrap and Foundation seek to give you all of the tools that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies thrown in. They’re also both marketed with a ..
Get started with PHP - PHP is a server-side language. This concept may be a little difficult to grasp, especially if you’ve only ever designed websites using client-side languages like HTML, CSS, and JavaScript.
Forms In Responsive Site - Forms – are the only elements on the site, which help a user interact with the site directly. It is impossible to organize the work of the Internet store, blog, news portal or any other interactive site without forms.
How To Cache Ajax Request In Easiest Way Using jQuery - Anybody trying caching with ajax may find it difficult but the reality it is not. Rather its not at all hard and very easy to implement. There are many ways doing this. one is inbuilt option cache of function ajax of jQuery ..
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Why Responsive Web Design Matters For Your Website? - The recent proliferation of smartphones and tablets has changed the paradigms of design and user experience for good. Before the ongoing mobile explosion began, web designers mainly had to deal with one ..
Responsive Images/leave html alone - The problem with the proposed spec isn’t so much the syntax (or variations of it) though, but the choice to make it part of the html spec. I’m clearly not the only one that thinks responsive images shouldn’t be part of the html spec, the question is if there is still time left to do anything about it.
Why Responsive Design? - Responsive design has grown from an idea and a buzzword to a new approach to designing websites. As it’s gained attention, challenges in building responsive sites have emerged, solutions to some of those problems have been proposed, and patterns for ..
15+ Tips to Improve Web Accessibility of a Website - Web accessibility is one of the most unnoticed aspects that we often ignore while designing a website. Ideally, it should be considered as an important part of web design & development so that website availability can be ..
The problem with adaptive images - Adaptive images isn’t just about the issue about scaling images, which has already been demonstrated by Ethan Marcotte. It’s about dealing with other issues and variables to keep in mind when delivering the best user experience.
Website Image Usability And SEO Best Practices - Here are specific strategies and best practices for ensuring that your images are seen for not only the eye candy they’re supposed to be, but also for the often overlooked search engine juice they can give you.
The real conflict behind <picture> and @srcset – Since coming to the realization that the real conflict is between the lookahead pre-parser and responsive images, I’ve been wondering which we should prioritize. The lookahead pre-parser has been essential to providing a better ..
Tips and tricks for Retina images in responsive web design - These are handful of a ways to get around the need for raster images, and thus the need for multiple versions of the same image. Browser support leads to great visual designs and, more importantly, deal with saving ..
Web First for Mobile - My mobile performance research focuses on mobile web. I don’t analyze native apps. Why? I believe in the openness of the Web. I don’t like being forced to use a proprietary technology stack.
Exploring Responsive Web Design & Techniques - Responsive design has been brewing for a long time and is now starting to be fully embraced by the design community. In this article I’m going to talk about a few things: what responsive design is, why go responsive, and how to design responsively.
Responsive Typography - With the chaos of different screen sizes and a new generation of Web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom Web fonts.
Anatomy of a Mobile-First Responsive Web Design - this article will take a look at the responsive/UX considerations of the demo. To do this, I’ve created a feature on the demo that annotates (almost) every element on the page, explaining why the element exists on the page, ..
Webdesign in Common, Web Typography, jQuery, Tools, etc.
The Last Word on the Fold - A more accurate statement would be “There is no fold, but don’t make users scroll to find important stuff”. Sure it’s a mouthful but it fixes the main problem that exists in the original statement.
Optimizing Graphics with CSS Masks - It’s difficult to optimize your high resolution images for the web. It’s even more difficult when those images need to be transparent. In this video I show how CSS masks can help make this process easier on you and how to make sure you have ..
Fixing the Typography of Your Pages with CSS Hyphens - One of the ways that web page typography is not as evolved as printed typography is in how the rag is modified with hyphens. When you use a desktop publishing application or word processing program, it is ..
8 tools to manage an email newsletter - I recently encountered problems with a client’s email list, some emails are not sent, so I’ve been looking for new ways to manage their newsletter. In the following article I share some of the popular options you get to technically manage your newsletter.
How to Improve Your Website Trust Factor – Is your website harming the trust and credibility of your business? Are people worried or put off when they visit you online? Could your site be working against you rather than working as a business asset?
Typesetting Paragraphs on Web Pages - Somehow it was unanimously settled upon that the traditional manner of typesetting paragraphs — with indents and no spaces between paragraphs — is not as readable on a computer screen.
Caching Tutorial - This is an informational document. Although technical in nature, it attempts to make the concepts involved understandable and applicable in real-world situations. Because of this, some aspects of the material are simplified or omitted, for the sake of clarity.
Gestures-Sensitive Slideshow: Responsive and Touch-Friendly - The technique is based on some lines of HTML, CSS, JavaScript and (whole) jQuery framework. Notice that the slideshow is returning what means anchors do not perform their primary function on touch devices.
Type Study: Pairing typefaces - Pairing typefaces is much like choosing flavors at an ice cream shop. We approach the counter with a strategy. We know about common “go-to” pairings like chocolate with vanilla, but we try to find inspiring combinations where each flavor highlights something special about the other.
CSS3 Compatibility Tools, Resources and References for Internet Explorer - The main problem with CSS3 is its compatibility issues with web browsers, most of the modern web browsers have full or partial support for CSS3 and other related web technologies. If you are an Internet Explorer user or ..
HTML for Icon Font Usage - Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best.
10 Great jQuery Plugins for 360-Degree Image Rotation - In today’s post we have gathered jQuery plugins that allow you create 360 degrees rotating images.These plugins are mostly used in online shopping websites to show the products from all angles with detailed views.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
7 Typography Tools Every Designer Should Know - Here is a useful collection of top 7 typography tools for you. With these tools, you can create your own fonts and then can very easily insert them into your designs by simply pasting some special code snippets or using the ..
How To Choose The Right Face For A Beautiful Body - Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.
Photoshop Masking Techniques Everyone Should Know - This post describes the various basic and advanced techniques you should have in your arsenal, which will allow you to tackle any masking situation that comes your way.
DPI vs. Pixels: What Do I Use? - Simply, it all depends on your project. Knowing what medium you are creating for and how your images will be used is key to sizing and picking the right number of pixels or DPI.
Type Discipline You Were Never Taught - Let’s start with the basic form of a letter. Knowing the parts of a letter, terminology such as baseline or x-height is important. Start with the basics before you start to experiment. Here’s a fun little tutorial on some basics you should know.
Understanding the Rule of Thirds in Web Design - While the rule of thirds can be used intentionally in art, photography or design, it is also an ever-present concept. Even when you don’t plan or accommodate for it, the rule of thirds exists. Your job is to use it to your design advantage.
Your Logo Is Making Me Sick - This clearly suggests that negative experiences and error indicators probably shouldn’t be branded. The page is still branded, but the most salient visual element is a charming, non-brand illustration that can bring a small amount of pleasure to an otherwise irritating experience.
15 Examples of Logo Design Process - Here is a closer look at the design processes for 15 logos to give you an insight into what the design process for a logo is all about.
Business Card Design: 7 Essentials To Consider - your business card should also be designed well enough to leave a good impression. Below is a list of essential tips to keep in mind when designing the perfect business card.
Blogging, Social Media, Writing, Content Strategy, etc.
Quick Course On Effective Website Copywriting - Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives.
My Twitter Account Has Been Hacked – 7 How To Steps To Fix It - Whether you are building up your followers or just tweeting friends, having your twitter account hacked is not fun, but it can be fixed and back under your control quickly in just seven easy steps.
5 Horrible Reasons Why Blogs Fail Hard – And How To Avoid Them! - Blogging is about sharing things you are good at, or at least you’re enthusiastic about. Whether you are a web designer, web developer, a writer, an online marketer, or someone else who doesn’t have a ..
21 Resources for Creating an Effective Facebook Fan Page - Some resources that can help you to create fan page for your business or for your clients. Some of these resources can also help you to build a perfect and better Facebook fan page ever.
The Secret of Blogging: Make Writing Quality Contents Your First Priority - Believe it or not, visitors and backlinks will come to your blog automatically if and only if your blog is having valuable information and high quality contents that is hardly found elsewhere
WordPress
How To Update WordPress Automatically Without Using FTP - In some cases, you are not able to update/upgrade your WordPress and plugins to a newer version without providing your FTP connection information. This is a common issue whereby the WordPress system ..
Instant WordPress Development With WAMP - Speed up WordPress development by combining WordPress with WAMP. This tutorial will show you how to add a direct WordPress install of the latest version from within the WampServer. This will cut down on development time as ..
Removing PHP out of WordPress Template Files and Placing it in Dynamic Pages and Posts - Here’s how to enable the parsing of PHP code in dynamic website elements using WordPress and a simple plugin.
WordPress Custom Menu Styling, Advice and Help - WordPress comes with a powerful Navigation Menu system that allows the theme developers and website administrators to add beautiful navigational menus to their websites. Using the Menu Editor, users can add and remove ..
How to Code an Awesome Categories Menu for Your WordPress Site - We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.
Plugin Development for WordPress - If you cannot find a plugin of your choice, this article will introduce the basics of developing your own plugin for WordPress.
Turning a WordPress error into an opportunity with a custom 404 page - Creating a 404 error page is generally done using FTP to create the initial PHP file that will contain basic theme code. It can then be edited using built-in tools contained within the WordPress Dashboard itself.
The Rewrite API: The Basics - This is part one of a two part series looking at WordPress’ Rewrite API. In this tutorial we look at how rewrites work and the basic methods available to create custom rewrite rules.
Creating Mobile-Optimized Websites Using WordPress - If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design and might have heard of the mobile-first approach developed by Luke ..
Top 5 Mistakes for your WordPress Website Security - Website security has become a major subject nowadays, as the web is fast becoming the preferred way for attackers to spread malware, steal credit card details or carry out other illegal activities.
Spring Clean: How to Tidy up your WordPress Site & Make it Faster - WordPress is a rock solid web publishing platform, but it needs regular maintenance or it becomes vulnerable and slow. Firstly, there are some WordPress Security Best Practices that you need to follow in ..
Syndication for Articles Only: The How and Why of an Articles-Only RSS Feed - This is done by using conditional variables within a traditional WordPress RSS feed setup and it involves creating both a new PHP template file and a new WordPress page itself.
Search Engine Optimalization, Conversions, Analytics, etc.
Improving An Old Site’s Traffic – Quick and Easy - This article will focus on analyzing the traffic the site is getting and finding quick and easy places to make improvements. We are talking like 20 minutes here.
7 Achievable Steps For Great SEO After The Penguin Update - The Penguin update sent a strong message that not knowing SEO basics is going to be dangerous in the future. These updates are going to continue at a rapid pace and they don’t care what color your hat is, it’s all about relevance.
SEO Content–If You’re Going To Do It, Do It Right - Even if a brand ranks high in the search engines with tricks like this, what good is it to drive a bunch of people to a website who then click away because the content stinks? Here is how to do SEO the right way, using a simple approach
How to rock your Google Analytics: five tricks to help you out - Analytics gives us all the data we need to make our websites even better but it needs to be set up right first; here are some tips and tricks to help you on your way.
Two Weeks In, Google Talks Penguin Update, Ways To Recover & Negative SEO - Google’s happy the new spam-fighting algorithm is improving things as intended. But some hurt by it are still wondering how to recover, and there remain concerns about “negative SEO” as a threat.
9 Awesome Things You Can Do With Google Analytics 5 - Here are nine awesome things you can do with Google Analytics 5 that will help you get the most out of your analytics information and use it to improve your website’s content, conversions, and user experience.
Top 15 SEO Tips Every Web Designer Should Follow - In order to dominate the search engines, every business need to have on site SEO as basic building material for their website designing purposes. So, here are some ways by which the SEO strength of a website can be improved.
Post-Penguin SEO Advice for Beginners - It seems like the SEO world has changed and so will the internet marketing world. With the large amount of old and outdated content out there it can be hard for newcomers to find solid advice and gain a foothold.
Tutorials
Animated 3D Bar Chart with CSS3 - The initial challenge was to create a classic semi-transparent 3D box with 6 sides. The final challenge was to create a complete 3D bar chart which we will create in this tutorial.
Google Play’s minimal tabs with CSS3 & jQuery - The tab navigation is an element you often meet in your daily browsing. In this article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.
Animating CSS3 Gradients - Gradients, just like standard images, are subject to certain background-related properties that are animatable. To demonstrate this, I’ve created some CSS3 buttons that animate their gradients when you hover over them ..
The 67 Best Photoshop and Illustrator Text Tutorials of All Time - Some of the most popular Photoshop and Illustrator tutorials deal with making text look pretty. They range from the simplest layer styles to some extremely complex 3D rendering and compositing.
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - In this tutorial we will code an Upload Form. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing ..
22 Best PHP Tutorials For Developers - in this round up you will find some useful and PHP tutorials that are especially designed for latest technics for developers. We hope that you will get good help from these tutorials.
45 Fresh Must See Photoshop Tutorials from 2012 - Today’s blog post is a great round up, which consists of high quality Photoshop tutorials. The roundup has a nice mixture of awesome photo manipulation techniques, as well as beautiful text effects.
Freelance, Business and Workflow Related Stuff
Freelancers’ Guide to Balancing Work and Life - Balancing work and life is very important, and it is necessary to manage both sides perfectly to ensure success in the professional world. Although it sounds simple, managing both sides can be very difficult at times.
8 tips for making the most of working from home - Working from home sounds like a dream come true but unless you take the time to organize things properly, the whole experience can turn into a nightmare. Here are eight things you will need to pay attention to.
5 Biggest Freelance Mistakes You Can Make - As a freelancer, you know how challenging it can be to juggle your time between marketing your services, managing your budget, and tracking invoices – not to mention actually working on client projects. Being a freelancer means ..
What You Need to Know About Freelancing Before You Start - In this post, I’ll list some freelancing details that many bloggers and gurus “forget” to mention. By considering these details up front, you’ll avoid disappointment later on and get more from your freelancing design career.
8 Ways to Network Like a Pro - Just because networking events can make you uncomfortable or nervous doesn’t mean you shouldn’t attend. On the contrary—it can be great practice! Here are some tips on how to make your next networking event a success.
How to Create a Case Study and Why It’s Crucial For Designers - Creating and showing off a portfolio is such a fundamental part of a designer’s life, few people ever question its effectiveness. But the fact is, there are better ways to sell your services – and one of those ways is by using case studies.
Pricing Your Work Right as a Designer - There are a number of factors to keep in mind when figuring out what your worth such as what you think your worth, what you can get away with, your experience, the amount of work you currently have on, how badly you want an individual ..
Billing Yourself as a Local Freelancer: What You Need to Know - A lot of freelancers get excited about international clients these days. But you can create a niche for yourself as someone local — a freelancer just down the street who is happy to meet in person with clients.
What if I Don’t Like the Work? Dealing With a Design Project Gone Wrong - Designer/client relationships go both ways and just as often as there is a frustrated designer, there’s a disappointed client. Today we’re going to tackle the question of what to do when you hire a ..
How to be your own hardball agent - As freelancers, we have to go one on one and say how much it will be. At least until next year when we get famous. Here’s how to do it.
Contracts 101:abuse of relationships - When you know what your standards and expectations are, you have a professional obligation to articulate them fully for your clients as a condition for signing your contracts and working with you.
F*cking Brilliant, a great Read or just magnificent Tips!
You’re a terrible client - It’s not just me; I’ve asked around: You will probably be your own very worst client. Ever. Every trade has a similar story to the point where it’s almost cliché: the carpenter’s house is falling apart, the mechanic’s car is a rattling jalopy, and the barber is a ..
Why do you have a Website? - It’s not always easy to identify the purpose of things. And when something serves many purposes, it’s not easy to discern between them, or to prioritize them properly.
7 Visual Design Tips and Tricks that Boost Conversion - However, for your visitors to hang around long enough on your web page to appreciate that experience, you need to have something that immediately sticks: Something that instantly grabs attention and makes them want to find out more.
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