.. yay, it’s Saturday! Here’s a new roundup with last week’s best tutorials and articles found on the blogosphere. It’s all about HTML, CSS, PHP, responsive web design, branding, SEO, WordPress 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. These hand-picked articles and tutorials 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.
Raw JavaScript, jQuery-style fadeIn and fadeOut functions – Well today, let’s take this step further and create our very own fadeIn() and fadeOut() functions in order to avoid loading jQuery just for a little smoothy effect.
Reconciling SVG and Icon Fonts – In this first article on SVG, I’ll explain how to set up a powerful design workflow, going from Sketch (my new favorite SVG editing app), all the way to the browser as Icon Fonts, all automated.
Advanced cross-browser flexbox – There are limitations to using flexbox at the moment, and it will be much easier when flexbox is just supported across all modern browsers in the same way. For now, it is much more effective to just stick to simpler, single line uses of flexbox.
quotes – The quotes property in CSS allows you to specify which types of quotes are used when quotes are added via the content: open-quote; or content: close-quote; rules. Here’s how to use it ..
Extending Placeholder Selectors with Sass – The concept of mixins seems simple on the surface, but if we’re not careful, things can quickly get out of hand once our Sass starts to grow because they duplicate a lot of CSS.
Responsive Retrofitting – Responsive retrofitting, at it’s core, is about compromise for this reality. It’s about finding a way to use responsive techniques on legacy sites to create a better experience for more users.
List of Pseudo-Elements to Style Form Controls – Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization.
Preventing the Performance Hit from Custom Fonts – The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources.
Feature Detection and Styling For The HTML5 details Element – The details and summary elements are excellent ways to create accordion interfaces on web pages. Until recently, features like this have required a mass of JavaScript.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
How web posture affects user experience – Web designers can use a handful of quantitative data that will help them determine if the web design is effective, especially for e-commerce where the added value to a business is measurable.
The usability error you don’t know you’re making – Failing to speak the user’s language is an easy trap to fall into because you may not know the user’s vocabulary and because technical terms often become second nature to the design team.
Content Parity on the Web – There’s a belief that mobile users exist in a specific and limited context: busy, distracted, and focused on only one type of information. That particular context is just one of many that can and do apply to mobile users.
Improve Your User Experience with This Simple Design Trick – White space refers to the empty space between paragraphs, pictures, buttons, icons and other items on your web page. In web design, it’s one of the many areas that can affect customer perception and their subsequent experience.
Responsive Images: Clown Car Technique – The magic is that SVG supports both media queries and rasterized images. In our SVG file, using the <image> element, will include the all the images that we may need to serve, and include all the media queries.
21 Simple Tips to Improve The Usability Of Your Website – Simple yet effective techniques that you can use to improve the usability of your website. Take advantage of these techniques to improve your performance and make your website more appealing for customers.
Responsive Layouts – There’s way too much friction between the idea in your head and it’s execution in HTML and CSS. That slows down innovation and hinders easy exploration. I think that can explain the resurgence of really simple “single-column” websites that are, in my opinion, a bit boring.
Designing for a Responsive Web Means Starting with Type First – Making responsiveness only about grids, responsive images and media queries is a disservice to customers and brands. It needs to be about providing readable content for any device, and that means starting with type.
Tackling Accessibility on The Web – Unfortunately accessibility is one of those topics that often gets overlooked by a lot of developers. In this article my aim is to show you just how easy it is to make your websites accessible.
A Detailed Overview Of Media Queries And How To Use Them - This feature is really important because it is in every web designer or project manager’s mind to make the visitor have the best experience while browsing a site.
The Danger of Assuming Context in Responsive Web Design - Very often I see designers creating responsive websites that utilize media query technology to cut down on content once the site reaches a certain size. It’s a lazy approach to responsive web design!
Five reasons to use jQuery mobile - The jQuery Mobile framework is able to improve websites through adding touch-friendly form inputs, more efficient page loads and wider device support through the use of progressive enhancement.
Typography in Mobile Design: Important Aspects and Examples - Most people would agree that there are three big components that help making mobile typography great: size, contrast and spacing.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
7 Key Design Tips for High-Converting Landing Pages – Here’s some food for thought: Companies see a 55% increase in leads when increasing their number of landing pages from just 10 to 15, according to our 2012 Marketing Benchmarks Report.
How to design minimalist websites – Minimalist website design entails the removal of unnecessary elements to create simple, functional and elegant websites. Although getting minimalist website design right can be somewhat challenging, the finished product is usually worth the effort.
Six Reasons Your Website Will Fail – Addressing those six areas will allow SMBs to deliver traffic to their website, engage with their audience, and acquire monetizable information. Of course, those six items cover only the basics.
What Your Footer Says About Your Business – You can tell a lot about the health of a business from its footer. Sounds crazy? But it isn’t. Our footer has and continues to evolve along with our business.
Swift Web Development Techniques for Startup Landing Pages – I want to use this article for sharing a few tips and techniques on building startup landing pages. The process is not easy and doesn’t provide any foolproof method.
What’s new for designers, April 2013 – The April edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, mobile apps, educational resources, mockup kits, frameworks, etc.
A Website’s Design Can Influence What You Buy – From user ratings and endorsements to scarcity sales, the evidence suggests that when it comes to shopping, we’re far from immune to hidden persuaders.
Data Driven Design: A Simple Primer – Web apps are becoming ever-more prevalent on the internet. Some may argue that they are simply more complicated websites. Regardless of their definition; what happens when you are designing for large amounts of constantly fluctuating data?
Detect Unmatched CSS Selectors with Helium – A great tool called Helium is available to help developers detect selectors in their stylesheets that are unmatched or malformed.
17 Things You Should Stop Doing to Your Websites – We see dozens of guides and tutorials on how we should make our websites better to rank, convert, and perform. I’ve outlined the 17 most popular “sins” I’ve identified on my customers’ websites within the last 2 years
Hover is dead, long live hover – Hover is a useful UI element for desktop users, but it doesn’t work with touch devices. What had previously been a reliable tool in an interaction designer’s toolkit suddenly lost its shine.
5 jQuery Plugins to Breathe Life into your Texts – Texts are primarily made for reading. Yet, at least sometimes, we want them to be apparent, eye-catching. A set of jQuery plugins provide possibilities to animate texts in various ways.
HTML5 Tips For Web Designers – With the release of HTML 5, webmasters now have even greater control over their content and can design websites more efficiently. However, there are several important things to keep in mind while developing websites in HTML 5
Designing a Better Contact Page – A good contact page can benefit any type of business. It can improve customer satisfaction by helping users with their problems. It can also help a business improve its products and services by providing an avenue for valuable feedback.
Is Your Website Built for CONVERSION? A 10-Point Checklist – As your brand’s virtual sales rep, Internet storefront, and online distribution hub, your website must convert on a number of levels, enticing would-be prospects, nurturing new leads, and servicing existing customers.
Background Slideshow – A simple fullscreen background slideshow with auto-play and controls to navigate and pause.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Improve Your Layouts by Working With Columns in Adobe InDesign – There are many great features for improving your typography in Adobe InDesign when you are using columns.
Making Sense Of Type Classification (Part 1) – This article again deals with terminology, probably more specifically than most designers are used to, and the title gets to the heart of what I’m communicating in this article.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Designing a modern email – The quality of rendering engines is totally inconsistent, most modern development techniques are unavailable, and even images – an essential element of many emails – are turned off by default in many clients
A dozen tools for removing almost any malware – On-demand scanners are typically quick to download and easy to run. Usually self-contained, they might detect and remove malware your regular scanner missed. On-demand scanners are active only when specifically launched.
How to Extend Your Blog Reach Via Facebook and Twitter – Without getting the word out about your blog, your content will never maximize its reach. To this end, leverage Facebook and Twitter to support your promotional blog activities.
6 Pillars of a Successful Blog – Every year I like to take a look back at my blogging efforts and examine what I’d do differently if I was building my platform today. These mistakes have helped me to determine what I consider the pillars of a successful blog.
3 Common Mistakes to Avoid with Your Social Media Marketing – The real premise of social media is adding value with content that engages your customers which inspires, educates, informs and maybe even entertains. This means forgetting about “you” and thinking about “them”
WordPress
Create WordPress Shortcodes – WordPress shortcodes are super handy, especially when handing off a WordPress-based website to a client. The alternative to using shortcodes is creating complicated templates, and even then, you cannot adequately replace what shortcodes can do.
How I Reduced My WordPress Comment Spam to Zero – I looked at anti-spam plugins like captchas, but I really don’t really those are the best use of time for commenters and they can often be hard to read.
The Beginner’s Guide to WordPress SEO by Yoast: Configuration – This is a series of tutorials, in the first one we will be configuring and understanding different sections of the WordPress SEO Plugin.
How to Start A Blog – A WordPress Tutorial – If you are convinced that blogs are important for the success of your business or online presence, then congratulate yourself because most of your competitors still have static websites and you are way ahead of them.
How To Improve The Deployment Of WordPress Websites – This article documents the results of the survey and draws some conclusions about where education is needed and how we can help each other become more professional when deploying our WordPress websites.
What can you Embed in a WordPress Post with oEmbed? – The list of providers that WordPress supports is quite extensive and should cover most of your needs. You can embed media from any of the following services
Restoring and Backing Up WordPress Databases – In this article I want to share a few brief points about restoring your WordPress install. But the whole procedure begins with a regular backup of your database and WordPress files.
Open Source Tools and Scripts for WordPress Developers – There have been a number of cool inventions and tools released over the past few years. Frontend web developers are enjoying the control granted with open source plugins, scripts, libraries, and other similar release packs.
How to Optimize Your Business Blog [Checklist] – Your business blog is one of the most powerful tools in your toolbox. But how do you know that your lean, mean lead generation machine (aka your business blog) is running as efficiently as possible?
Never Say WordPress When Selling a Web Design Project – If you are having a hard time building value for your website services, then I have a challenge for you: stop selling the technology.
Improving the Default Search Experience in WordPress – In this article, we shall be taking a look at the drawbacks of WordPress’ default search mechanism as well as useful tools that can help you get the most out of it.
A Preview of WordPress 3.6 – WordPress 3.6 is right around the corner, due to be released in early May. What can you expect from the next version of this popular blogging and CMS platform? A lot!
Search Engine Optimalization, Conversions, Analytics, etc.
Five steps to more usable links – As a set of guidelines to help improve the usability of your links, I’ve dug through some research on the topic and added my own thoughts.
Creating The Most Effective SEO Friendly Content – Here are a few tips to make sure you are marketing your content effectively so that you can be found in search engines.
How to spot a bad backlink – The SEO industry has undergone something of a renaissance in recent years, with the focus shifting from building links by any means necessary to an appreciation of the power of quality content.
How to use Google Analytics advanced segments: a guide for beginners – Google Analytics is a great tool, but its standard reports can be limited, so a little customisation is necessary to improve the quality of insight you can gain.
15 Best SEO Tools to Improve Your Site – This is one of the most important undertakings that you can do to get online visibility, especially with the major search engines changing their algorithms all the time.
5 Ways to Protect your Website from Google SEO Penalties – I will review ways to protect your site so you can sleep safe and sound, knowing traffic to your site won’t dry up overnight. And if you’ve already been hit, Chuck Price gives some great suggestions for recovery.
10 Killer SEO Landing Page Tips – Here’s a checklist of 10 “killer” tips to ensure you’re able to add a bit of CRED to your SEO campaigns, as well as demonstrate campaign success!
Tutorials
Experimenting with Swiss Style in CSS – The first experiment I decided to create was a simple page with just text and texts rotated 45 degrees, heavily inspired in the Swiss Graphic Design Style. For this post I want to show you a little bit of the creative process behind this experiment.
25 Free Examples Of CSS Drop Down List And Menus – Here is a list of 25 free examples of CSS drop down list and menus that will provide you better ideas and insights on implementation of CSS in web designing.
UI Design: Creating Cool OS X Flip Effect with CSS3 3D Rotation – we are going to look into transform elements in 3D space and specifically in this post, we are going to also create the OSX Flip Effect.
Pure CSS3 breadcrumb navigation – the pixel perfect way – The solution is to use rotated squares lying half inside the link and half outside giving a triangular shape – not just in appearance but also in functionality.
Responsive Full Width Grid – A layout for a full width flexible grid layout for images or other content. The items have a percentage width and some example media queries show how to adjust the items shown per row.
CSS Tutorials: Web Design And Development Techniques – Today we have assembled a stunning collection of the latest CSS and CSS3 tutorials from around the Web. These web design and development tutorials will arm you with all the necessary techniques.
Slide and Push Menus – A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.
Responsive Multi-Level Menu – A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
Freelance, Business and Workflow Related Stuff
Why people don’t buy what you sell – There are TOO many people who think their products will sell themselves. They think, “if I just create something that’s GREAT, the rest of it will fall into place.” .. Wrong.
How to create great work for clients: 6 pro tips – In this article I’m going to offer to six quick but useful tips to do the best work for your client you can do, forging a lasting relationship that will keep you in well-paid work for years to come…
Put More Personal Work In Your Portfolio – Personal projects are not only fun and inspiring to you – they can also have the same effect on your paying clients. Having interesting side projects in your portfolio can help you make the leap from forgettable, all-purpose designer to industry superstar.
10 Questions to Ask Before Determining Your Target Market – The better you understand your customer, the faster your business will grow. But new ventures often struggle to define their target market and set their sights too broadly.
Why Your Web Design Portfolio Isn’t Getting You Work – There is a reason why some designers seem to get “all the work” and others are stressing to find their next project. We’ll go over a few important aspects of your portfolio you might be missing that could be costing you future jobs.
Money tips for freelancers – According to research by Bacs, freelancers and small businesses are being paid later and later. In 2010 the average late payment was 22.5 days overdue. That figure grew to 25.6 days in 2011 and again to 29 days in 2012.
Marketing Yourself as a Designer is All About Making Stuff – Throughout this article, we’ll discuss a few approaches to creating things that can help build your swag in the design sphere, and maybe even get you a few clients along the way.
Common Mistakes Freelance Designers Make - To help you start out on the right path, read and learn from the following six most common mistakes that freelance designers often make.
F*cking Brilliant, a great Read or just magnificent Tips!
7 Design Principles, Inspired By Zen Wisdom – To understand the Zen principles, a good starting point is shibumi. It is an overarching concept, an ideal. Its meaning is reserved for objects and experiences that exhibit in paradox and all at once the very best of everything and nothing.
Oh, I’m not a… – “I’m not a designer”, “I’m not a developer”, “I can’t code”. We all hear it, we all say it. But it’s wrong. Skills can be acquired, acquired by anyone who seeks them.
Why you should move that button 3px to the left – As designers, we are held responsible for the overall quality of the experience. Yet we’re at the mercy of our teams. We can design beautiful, intricate, delightful details — but we can’t build, test, and deploy them all.
I hope you have enjoyed these hand-picked great articles? Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign