.. finally weekend! Here’s a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.
Manipulating content with CSS3 transforms – Transforms produce static visual effects, but they can be easily combined with CSS transitions and keyframe animations to produce vibrant animated interfaces. This tutorial first introduces simple two-dimensional transforms, then shows you how to extend transforms into three-dimensional space.
Getting Started with Sass – There is an exciting new world of front-end code out there and this is just a very small part of it. Start using Sass now! It’s made my code writing more efficient and it’s made writing CSS a lot more enjoyable.
We’re Gonna Need A Bigger API! – We’ve learned that users don’t want websites to look like a CSI console having a personal crisis; instead, we go for smooth transitions that enhance the experience, rather than being the experience themselves. In terms of animation APIs, we’ve been poorly catered to, leaving us to hack around with timers that weren’t really built for animation.
HTML5 code snippets to take your website to the next level – HTML5 is the newest revision, and by far the most interesting, of the Hyper Text Markup Language. is In this article I have compiled awesome HTML5 code snippets to take your website to the next level.
How to Build a Better Button in CSS3 – I tend to opt for
<button> tags rather than
<input type="submit" />. We’re going to apply our styles to every button but, if you’d prefer not to do that, add a class and target it in the CSS accordingly.
How to shrinkwrap and center elements horizontally – Fortunately there are several other ways to solve this problem. I’ve found no less than four different techniques, all of which are used on the shrinkwrap and center demo page.
Make your website printable with CSS – Hopefully this tutorial will give you enough comfort with making print styles that you’ll be able to add them to any project without blowing up your budget.
Using SVG – SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.
Horizontal centering using CSS fit-content value – As we all know, centering this kind of stuff can be quite tricky sometimes. With this common example in mind, Roger made an awesome list with solutions you can apply in order to achieve horizontal centering.
CSS Box-Sizing for Noobies – Box-sizing basically is an alternative to the standard box model we have in CSS. To fully understand box-sizing you need to understand the box model. Practically, they work just about the same but there is one key difference ..
Tips And Tricks For Print Style Sheets – Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Design Patterns, Components, And Frameworks – Design patterns, design components, and design frameworks are all related concepts. They share the goals of modular design to reuse code, be flexible, and separate concerns. They aren’t the same, though.
Hacking the brain – Gaining an understanding of how our users think and act enables us to tailor wonderful user experiences that improve conversions and encourage repeat visits! With a little borrowing from disciplines such as cognitive psychology and behavioural economics we become able to ‘hack the brain’.
Mixing Responsive Design and Mobile Templates – You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.
15 Mobile Web Navigation Patterns – The choice of navigation determines the usability of your site. It’s the way the user interacts with the website, and it should be short and easy. When it comes to designing the layout of mobile version of the site, the question of navigation becomes of the key priority.
How to Optimize Responsive Design for Conversions – What’s interesting is that even though conversion rates for smartphones are still below 2%, the smaller the screen, the more money users spent on average.
Building A Better Responsive Website – In this article, I will detail the process we took, including some of the changes we made along the way, as we worked to build a better responsive website.
5 Ways to Handle Long Drop-Downs In Mobile Forms – Web usability guidelines suggest dropdown menus with more than 15 items should be avoided. This guideline is also recommended for mobile. On iPhone, for example, only 5 selections are visible at a time while scrolling through a long menu.
6 Key Factors To Consider When Designing A Call To Action Button – The importance of the CTA button cannot be overlooked, and even small tweaks in design and wording can have a big impact. So before you design or re-design your buttons, consider the these 6 key factors.
The Foundation for Responsive Design – Flexibility – Then I had the pleasure of listening to Mr. Marcotte speak at In Control 2011. He discussed responsive design as a theory and then dove into practicalities, like the fluid grid.
Design for People, Not Interfaces – Interaction Design has been practised long before the digital revolution, but under different guises and representing many other facets of today’s design language. Considering how we can use the basics of interaction design to ensure that we’re creating designs that work for people — not just interfaces.
The Five Worst UX Mistakes Websites Make – We often forget that at the end of it all waits a person who wasn’t in on all these decisions, and just wants to get the information they need, buy the product, or be entertained for five minutes while waiting for the train.
Getting started with RESS – This tutorial will teach you the basics of RESS (Responsive Design + Server Side Components) and how you can build a responsive page that works well on small screens with the help of server side technologies
The 10 Steps of Responsive Web Design – Responsive web design (or RWD): it’s everywhere at the moment. Content may well be king, but the way in which that content is displayed to perfectly suit the device you’re viewing it on is getting pretty close to the top of the digital marketing agenda.
The Good & Bad of Level 4 Media Queries – This article discusses a bleeding edge browser feature in a state of flux, with pretty much non-existent browser support — beware! CSS3 introduced media queries: the ability to make styling decisions based on features of the media a web page is being served on.
Better Navigation Through Proprioception – Unfortunately, these explicit navigational components are difficult to handle in the responsive era. They don’t fit well on small screens, and are falling out of favor as recent trends demand their deprecation in the interface.
Do You Need Responsive Design? – With the proliferation of handheld and mobile devices, the word on the street would have you believe that you must have a mobile site and responsive design to go along with it. But do you really?
Prioritizing Performance in Responsive Design – A few more responsive sites’ small views weigh less than their large screen counterparts. This may seem like progress, but Guy also mentioned that page weight overall is on the rise, so in my eyes any victory is quickly negated by overall page size increase.
I Have No Idea What I’m Doing with Responsive Web Design – One day we’ll look back at this age of the web and be proud that we had the opportunity to be pioneers in this space. We don’t have it all figured out, but that is the beauty of it.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
[How to] Use Design Principles to Increase Conversions – I’m taking this post old-school, to show you how fundamental design principles can be used to increase conversions on your landing pages, breaking it down into two important aspects of conversion centered design
10 Myths about Startups – I’ve come to learn that there are a few preconceived notions, stereotypes, clichés, and commonsense knowledge about startups that simply aren’t true. I’d like to share some myths that I’ve discovered while working at a tech startup.
Designing Custom Github Demo Pages – In this article I would like to go over the process of creating a Github page and styling for your own codes. It is important that you offer any support and installation steps along with these pages. Plus a live demo of the template or plugin will pull more interested users.
How to Use Images Successfully – Web Design Usability Guide – There are some very good examples out there on how to deal with images in a website from different points of view, but most of the websites do not showcase positive examples.
The Most Underrated Web Design Tools of 2013 – As the demand for Web design grows, so to do the number of technologies used to create Web designs. Here are some of the most underrated website design tools, many of which you have likely heard about, but never tried.
Vital Tips You Must Know When Designing E-mails – When designing and developing email newsletter campaigns you need to be aware of the fact that they play by their own set of rules, and are fairly different from designing and coding a website.
Six Components of a Killer Personal About Page – I have seen plenty of About pages that suck and I have seen a lot of interaction (or not) through tracking what folks are doing on them across various sites I either own, have owned or have consulted with as a marketer.
How to improve site navigation – It’s clicking links that take you to other pages with more links. The main navigation of your site is such a crucial part of this as it represents the persistent doorway to the most important pages of your content.
Web Designer Tools – The Most Useful Recent Ones – In this article you will see various tools that I have gathered in my shortlists in the past two months, tools which I selected for me, but which could help you also on your work.
Creating Wireframes And Prototypes With InDesign – I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.
Do HTML And CSS Limit Photoshop Creativity? – The code isn’t limiting what you do in an image editor. It’s informing your decisions. There’s absolutely nothing you can do in a graphics editor that can’t be turned into a web page. The tools you use affect the way in which you express your creativity, but they don’t make you more or less creative.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Create Highly Detailed Braun Radio Icon from Scratch in Photoshop – In this tutorial I will lead you through the process of creating a detailed, relistic radio icon from scratch, using Photoshop’s vector editing capabilities. We will use fundamental Photoshop tools and techniques.
The 20 biggest logo design trends – Part of the challenge is looking current and contemporary without shortening your logo’s shelf-life. In other words, you don’t want it to look old-fashioned, but neither do you want it to look so ‘of the moment’ that it will quickly date.
The Anatomy of Web Typography – It’s therefore pretty darn important that you’re able to articulate your typographic opinions and decisions. We’re not going to worry ourselves with the minutiae of ball terminals and tittles, but instead let’s discuss the anatomy of typography as it matters to web designers.
Master Photoshop: 120 top tutorials – From graphic design and illustration to typography, 3D and beyond, these Photoshop tutorials will help you level up your skills and create amazing images.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Linkedin Leveraging: How to Tap Groups for Traffic, Leads & Sales – There’s a reason those people are getting big deals, while you are left feeling like LinkedIn is a waste of time. They know the proven strategies for driving leads from LinkedIn to their own site.
Designing with context – Context will remain a slippery subject because context itself is changing. To improve the shelf-life and sustainability of the digital products we design, we must think about flexibility and emergent use. How will people be able to create their own uses for what we build?
How to Engage Readers Into Effective Discussions – Do you want to be an owner of a blog where no one is interested in providing their feedback about the articles or content? Or, do you want to be an author where your posts ends up getting no comments at all?
Build an App With WordPress – The compulsory todo list – With that in mind, there aren’t many posts around that teach you how to make an app. I thought I’d start with the compulsory “How to make a to-do list app using WordPress!” It even works across all platforms- that’s right. Mobile, Tablet and Desktop!
11 Steps To Speed Up Your WordPress Site – Google takes speed into account when ranking you in the search results and visitors tend to leave you site if they have to wait more than a couple of seconds. For both these reasons you can see how important page loading speed is to the success of your website.
SEO Friendly WordPress in 12 Steps – However, out of the box, WordPress is not as SEO friendly as you’d think. This guide will show you the necessary steps to optimize a WordPress website, focusing on modifications that apply to SEO.
Best Custom Meta Box Tutorials & Resources – Here’s some of the best tutorials and resources for building custom meta boxes that I’ve come across in the past two years. I’m posting them here to have a handy reference for all those building plugins and themes.
10 Common WordPress Theme Issues & How To Fix Them – I’m sure theme developers and community members are pretty board of answering these questions over and over again, so I’ve decided to write the following post which addresses some of the most common WordPress theme issues
Why You Should NOT Remove Dates from Your WordPress Blog Posts – I will provide in-depth details on why I chose not to include dates at first and what changed my mind later. I will also cover if/what are the SEO impacts of having dates on your blog posts (post-penguin and panda).
How to Create Custom Taxonomies in WordPress – In this article we will show you how to create custom taxonomies in WordPress as well as how to display custom taxonomies in your WordPress theme.
Understanding WordPress Pluggable Functions and Their Usage – The real power of pluggable functions comes with the ability to declare custom functions and make them pluggable for other developers and designers. It’s a widely used technique in extending the functionality and features of WordPress Child Themes.
How to Handle WordPress Hosting Issues – WordPress Hosting Tutorials – In order to get rid of WordPress hosting issues, we have listed some of best hosing techniques like how can you speed up your blog or just development. It’s all about tips and tricks to handle WordPress hosting problems.
Building a Mobile First Responsive WordPress Theme – In this tutorial I’m going to show you how to build a Mobile First WordPress theme, which starts with the styling for the smallest screens and works upwards.
DIY Truly Responsive Images on Your WordPress Website – If you simply use CSS’s max-width: 100%; attribute, mobile sites will still be downloading full size images. That’s an issue, because if your desktop site has images 920px wide, the mobile version will still be downloading this massive image, making loading time slow.
Using Google Fonts in Editor Style – Editor style is a nifty feature that allows you to match look and feel of post content inside the TinyMCE editor to what’s shown to site visitors. It is extremely easy to use, but if your theme has font options and especially if it uses Google Fonts, ..
Search Engine Optimalization, Conversions, Analytics, etc.
Google Analytics and Responsive Web Design – Introducing Responsive Tracking – By reordering the hierarchy of the page’s sections and components, some parts will lose the precious focus of the user. To get an idea of how a user interacts with those components, we need a method to track specific events on mobile devices.
Beginner’s Guide to Conversion Optimization – Your traffic numbers and your conversion rate are two different things. Traffic is the number of people who visit your blog and conversions are the number of actions they complete.
Unique CSS3 Header Styles for Copyfitting Typography – For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page.
Horizontal Drop-Down Menu – This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.
Vertical Icon Menu – A very simple lateral icon menu with a hover transition. The fixed menu has an example for how to use media queries to adjust the size of the icons for smaller screens. There is also an example class for an active item.
Animating Circular Paths Using CSS3 Animations – This article will give the CSS recipe for implementing this in all CSS3 Animation enabled browsers with a walk-through on the math involved, as well as a fallback for older versions of IE that don’t support CSS3 Animations.
How to create a pricing table using only CSS3 – If you sell your own products or services online you will undoubtedly have created some form of pricing plan. Today we will show you how to create an amazing pricing table using only CSS3.
HTML5/CSS3 Image Thumbnail Gallery with Lightbox Effect – In this tutorial I want to demonstrate how we can use a jQuery Lightbox plugin to spruce up dynamic image galleries. You can find the documentation at this jQuery lightbox webpage created by Leandro Vieira Pinho.
Freelance, Business and Workflow Related Stuff
20 tips for a successful side project – Every designer should have a side project. But whether you are developing a world changing start-up, an enterprise to eventually replace your day job, or just something fun, you’ll inevitably be sacrificing your spare time.
14+ Ways to Escape Freelance Burnout – If you depend on freelancing for a living, you can’t afford to let yourself burn out. But you may not know how to avoid it. Here are over fourteen tips to keep you from burning out as a freelancer.
Network the Hell Out of People: 6 Expert Tips – Here are several tips to help you effectively expand your business network. Practice them and your network will act like a team of extra employees.
The Benefits of Offering an Email Newsletter for a Freelancer - But there’s a major difference between sending spam and sending newsletters. Your prospective clients need to choose to receive your email newsletters, taking the first step towards building a long-lasting relationship with you.
Web Designers Making Thousands of Dollars in Passive Income – Passive income is money you generate from things that require little resources and time in maintenance. You may need to provide customer support or updates to your product, but most of the work will be done in the production stage of whatever you’re selling.
How to get TOUGH with clients – Most designers… no… it’s ALL designers (and most people, for that matter) have a problem saying “no!” or are uncomfortable with confrontation. Here’s some handy tips to help you toughen up in negotiations.
Metaphor for the Design Process – A successful project starts with a complete understanding of the design process on both sides. If you’ve ever had trouble explaining your design process to clients, using a metaphor will help you get to a deep understanding quickly, without having to go into too much confusing technical detail.
F*cking Brilliant, a great Read or just magnificent Tips!
When Good Design Isn’t Enough – There is a lot to learn from how companies like Facebook, Airbnb and Yelp got their start. You need to think about a distribution strategy as carefully as everything else.
What to Do After You’ve Been Hacked – The best tactic of all is to do everything in your power to not be hacked: to run up to date software, use good password hygiene, and make backups of everything in your system.
We don’t need your CSS grid – If you are working on a simple layout, even a responsive one, you’ll find that you can do things by hand without much hassle. I was first using 1140px Grid on this site until I realized it weigh a few kilobytes for what could be done in about 6 or 7 lines of CSS.
Agressive browser spitting – The reason we still have to support these old crappy browsers is because we support them, because we spend hours and hours and hours creating the same experience for everybody. It is our fault we still have to support IE. Fuck it.
- § -
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