.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! 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.
Introduction to Sass – If you already work with Sass, I’ll do my best to uncover a few details you might not know and at some point this series should catch up with your knowledge and skills.
A Sass Tutorial on How to Write Better CSS Code – Let’s see what Sass has to offer, why it is a preferable choice over other CSS preprocessors, and how to start using it in the best way.
Creating Cel Animations With SVG – What if you could take one base image and animate different parts of it separately, at different speeds? Well, the image format, SVG, already exists. It just needs a little gentle encouragement.
Less CSS mess – There’s basically 5 things that helped me shape up the way I code my designs enormously: coding guidelines, itcss, namespaced CSS, BEM and documentation in a front-end style guide.
5 Ways to think about CSS Flexbox – I thought I’d share a few ways to think about flexbox, and how it differs from other layout conventions like floats. Here are five, higher-level thoughts which have helped wrap my head around flexbox.
Sass optimization – 5 tips for faster work – Sass, less, stylus, css-crush, myth, switch css and DtCSS to name just a few of them. Today I want to help all of you using Sass to optimize it and reduce the amount of your code.
Using Modernizr with Flexbox – The Modernizr feature-detection script now includes four tests for flexbox support, which you can use to target browsers with varying levels of support more precisely.
High-Tech UI Elements with SVG and Border-Image – There’s something about clipped corners that screams “high tech” to viewers. Lea Verou outlined some clever ways to achieve clipped corners in her recent CSS Secrets book, but I thought up a few alternatives.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Front-End Principles for Designers – This mind set is dogmatic and fails to ask the right question, which is what principles do designers need to understand to create better designs?
Let’s Talk about the Web Animations API – About a year ago Google announced Material design with a representation in web through Polymer… using a polyfill for the upcoming standard Web Animations API.
Why is it so Easy to Get “Mobile First” Wrong? – There’s definitely some logic to the underlying philosophy of the “mobile first” approach to design, but there are also some hidden problems that cause even experienced designers to make fundamental UX mistakes.
Seven UX Design Misconceptions That Simply Aren’t true – Have we been exposed to too many fancy concepts that simply aren’t true? Here are some of the common misconceptions and mistakes found in modern design and how to avoid them.
Exploring the Long Scrolling Web Design Trend – Long-scrolling creates plenty of new opportunities for storytelling, navigation, creative visuals, and a more immersive overall experience. As a result, we find several common techniques and strategies start to emerge.
Designing Usable Web Forms – For the vast majority of modern websites, web forms are essential. The following tips and tricks will help you to avoid this and create web forms which are always useful and engaging.
Understanding The Process to Selecting The Right UI Design Patterns For a Website – Remember that to create an immersive user experience (UX), you need to ensure that you’re utilizing the right UI design pattern while designing your website.
Top 3 Mistakes People Make when Visualizing Data – A holistic approach to visualizing data in meaningful ways means our getting out of the way and letting what the story speak to us.
Redesigning the way we design – So this project was much more than a feature redesign — it was a redesign of the way we design, and it called for new processes to be put in place in order to keep from repeating our same mistakes in the future.
Webdesign in Common, Web Typography, Tools, Email, etc.
Let’s fix the “user” icon – As an icon, which should represent “the whole” and not just some small sample of it, it’s simply just lazy design (it’s likely that the designer of this icon was a middle-aged short-haired man).
Three app prototyping tools compared: Principle, Flinto for Mac & Tumult Hype – All three tools have layer-based animation and it was possible to recreate a pretty close rendition of the IF by IFTTT user onboarding in them.
Slider Design: Rules of Thumb – Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.
Web Development Mistakes That Beginners Make – Mistakes are really common in web development. That is especially the case if you are just taking your very first steps in the industry.
An Intro to Adobe Edge Web Fonts – Edge Web Fonts is free to use commercially, Adobe now provides an alternative to the once unrivaled Google Webfonts. Edge Web Fonts aims to provide a free service that is easy to use.
JPEG 2000: The Better Alternative to JPEG That Never Made it Big – JPEG 2000 is a fine alternative to using the original solution released in the early 1990s, but choosing to utilize it can bring about a world of incompatibility.
How To Design The Ultimate Coming Soon Page: 20 Awesome Case Studies – In this article, you will learn how 20 teams designed amazing coming soon pages that generated interest, signups and future conversions.
HTTPS Everywhere With Nginx, Varnish And Apache – Rather than debate those reasons, this article assumes you have already decided to move to HTTPS. We’ll walk through how to move your website to HTTPS, taking advantage of Varnish Cache.
Things I was unprepared for as a lead developer – I never before considered what it takes to lead an entire team of engineers. So to give you, the reader, a head start, these are the topics I was unprepared for, so you can hopefully be a better leader than I was.
How to Create The Perfect Call to Action – One of the main reasons why most landing pages and sales pages are not converting leads into customers is a weak call to action. According to Small Biz Trends, 70% of small business B2B lack a call to action.
Planning Market Research for New Website Launches – Today I want to present a few tips for budding entrepreneurs who are looking to build a new series of websites.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Why Logos With Hidden Meanings Work So Well – One way that clever designers have engaged their audience is to create logos with hidden meanings, subtly or not-so-subtly building a dynamic logo with which people can connect.
Create a Colorful Cartoon Hot-Dog Van in Adobe Illustrator – We’ll be using basic shapes and playing around with Blending Modes, adding semi-realistic shadows and highlights to our van to make it more glossy and three-dimensional.
25 After Effects Tutorials for Animated UI and UX Design – A popular trend in modern UX design is creating animated GIF images to demonstrate how an interface will behave with user interaction.
Back to Basics: Rules of Effective Typography – Typography is one of the most cherished parts about graphic design. No matter how seasoned of a designer you are, it’s always good to refresh your memory about the basics of typography.
27 Years at Nike: “What I Learned about Branding” – How much of an advantage would working at Nike give you in future endeavors? How much more insight to grow a brand? Or create the next great startup?
Blogging, Social Media, Writing, Content Strategy, etc.
8 Insider Secrets To Growth Hacking Your Blog – The social web is worldwide and is driven and defined by vast online networks. Over 2 billion people have social media accounts. This means that the potential for growth has gone from local to global.
The Art of Troubleshooting WordPress – It would be impossible to describe troubleshooting steps for every possible issue. The goal here is not to explain how to fix all of your problems, but rather to guide you through the basic process of troubleshooting stuff in WordPress.
Jonathan Torke Shares his Journey of becoming a WordPress Developer – Delving into the complexities of WordPress and his tips for young developers on how they can improve their knowledge of WordPress theme construction.
Things to Consider when Developing a WordPress Theme Framework – For any reason if you’re not satisfied with your current WordPress theme framework and planning to build your own custom framework, then you’ve come to the right place.
13 Plugins and Tips to Improve WordPress Admin Area – Want to customize WordPress admin area? Perhaps you want to change the default color scheme, add your own branding, or even add new help section for clients?
What to do when your site gets hacked – In this post, I want to share some important steps to take and things to keep in mind if and when you discover that your site has been hacked.
Search Engine Optimalization, Conversions, Analytics, etc.
Announcing the Web Developer’s SEO Cheat Sheet 3.0 – Today we’re excited to make freely available the new Web Developer’s SEO Cheat Sheet 3.0. Web developers and software engineers also find it handy to easily reference SEO technical standards.
8 Lies About Content Marketing You Probably Believe – Like other great lies, many of these half-truths and misleading ideas sound pleasant to the ears and come packaged as good advice from influential people.
10 Website Conversion Mistakes and How to Avoid Them – Optimising website’s conversion rate can significantly increase return on investment (ROI) on your marketing efforts.
Creating Material Design Ripple Effects with SVG – An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.
Responsive Sidebar Navigation in CSS and jQuery – Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories.
How to Create a Fullscreen Video Opening Animation – If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video.
Create an Apple TV Poster Parallax Effect in CSS3 & jQuery – In this tutorial, I will guide you in building something similar to Apple TV parallax effect using CSS, HTML, and jQuery.
Freelance, Business and Workflow Related Stuff
5 tips for getting started with Slack – Slack quickly moved front and center and took off as word of mouth spread among the tech companies that were using it. If you’re planning on deploying Slack within your organization, here are some pointers to help get you going.
How Web Designers & Developers Work Best Together – I want to share just a few ideas on how designers and developers can work best together. If each person at least has an understanding of what the other needs to do, it will become a much simpler experience.
Deadly Communication Sins Freelancers Commit – The truth is, people with poor communication skills often don’t even know they have them. A designer can be technically excellent, but if they fail to communicate with their client, they will not continue to get work.
Are You Selling Clients What They Want? – Without using your clients needs as selling points in your proposal, you’ll just mouth a pre-conceived list of things you say to every client.
F*cking Brilliant, a great Read or just magnificent Tips!
On The Future of Web Design Tools – If you’re not old enough to know what Dreamweaver was (and still is), then I consider you young pup, and I’m glad you’re here because I wish that I would have read an article like this when I was a young designer.
The Psychology of Numbers in Design – From framing methods to pricing details to data visualization — these examples illustrate just a few ways designers can make numerical information more meaningful, compelling, and actionable in their own products.
Design is about systems – A design approach is powerful precisely because we take into account the systems, requirements, and groups of users who will interact with the thing we design. We aim to help people accomplish their goals while minimizing potential frustrations.
On Advertising – Little boxes jammed into side rails on publisher sites have proven to be ineffective. They’re irrelevant, they’re dishonest, and if they aren’t, well, the countless others I’ve seen in that same spot in that same format were.
Design Thinking: Combining Traditional Methods with Empathy – ‘Design Thinking’ is a relatively new user-centred approach to design, which marries many of the tried and tested methods previously employed with a strong focus on empathising with the intended users.
Designers are Boring – Everything made by humans is designed. Digital design is a relatively narrow focus. Look to the wider world for context, and you’ll find it to be a much more interesting teacher.
Ad Blocking and the Future of the Web ~ Well, now, Apple has decided for us. Removing those ad networks may not be an option, but it’s happening anyway. How will it affect your site?
Give it five minutes – Learning to think first rather than react quick is a life long pursuit. There are two things in this world that take no skill: 1. Spending other people’s money and 2. Dismissing an idea.
– § –
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