.. 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.
Standardizing CSS Property Order – I look at ordering CSS properties in the following way: by placing order of importance primarily on potentially visually-obstructive properties, then on structural properties, followed by element-specific, aesthetic, font, ..
Introducing the calc function – Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units.
REMs, Fallbacks and Support – I’ve been using REMs for font sizing exclusively (with a fallback) since Jonathan Snook’s article – font sizing with rem from 2011. So I’ve been (more or less) writing out the font-size property like this.
CSS Shaky Animation – Here I’m using a CSS animation technique i’ve used before to interpolate between frames of text that are slightly different to accomplish that shaky style in the browser. The images are svg so they should be nice and crisp at any size or ppi.
28 Beginner Tutorials for Modern API Web Development – For this post I’ve collected a number of free online tutorials which delve into API development. These are perfect for anybody new to the scene who wants to learn a bit more about typical web services.
When To Use The Button Element – You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it’s a bit more complicated than that. It’s not too bad though, let’s figure it out.
CSS: User Agent Selectors – Some of all the old hacks work just fine on older browsers: IE6/7 hacks. I found it harder to find hacks for the newer browsers: so less vulnerabilities, less hacks. I came up with this snippet of code to help me with newer browsers.
Extending silent classes in Sass – This is a shorter, tip-style post that covers a little thing I like to do when writing Sass. It’s something that I’ve been asked about in workshops, and something I hope to bring to the new version of inuitcss.
Gulp, Grunt, Whatever – In this article I aim to introduce Gulp, as it’s fairly new, having been released around 6 months ago. Then, I’ll compare it with Grunt, pointing out which tool does what better, and why.
Smooth state animations with animation-play-state – However, this means that when you hover out of the element, it abruptly snaps to its original state (no rotation). In many cases, it would be a more desirable to have it freeze in the last shown frame, until we hover over it again.
The Syntax vs The Spirit – All those languages have perfectly good reasons for why they do that the way they do. It is a minor inconvenience to maneuver the correct characters into place to get them to do the job.
Productive CSS Tips for Web Developers and Designers – In this article designers can find CSS trainings, CSS tutorials and CSS tips which will be helpful for make creative web layouts, how to learn web design, CSS menus, CSS hovers, CSS-MOZ and CSS browser compatibility.
Usability, User Experience, Responsive Web Design, Mobile, etc.
Succeeding With Content In A Mobile World – In other words, content that engages the user and retains their attention is key. And, as mobile users are different from desktop users, here are some key takeaways in mobile content creation.
The printer is a device too! – While not the snazziest of devices connected to the internet it STILL is a device that can render our web pages, and unfortunately this is probably the most forgotten and least styled of all the devices around.
Thoughts For The Future Of Responsive Images – Images have always caused performance issues and they continue to be a bottleneck. When you really think about it though, it’s a certain type of image under certain conditions that tend to cause most of the problems.
Performance techniques for Responsive Web Design – Here are three key techniques that you can use to optimise performance using mobile as your starting point. Let’s tackle these in order of the page load…
Understanding Retina-Ready Design for Websites and Mobile Apps – In this guide I want to share ideas about retina displays and their purpose. Building a native application for Android or iOS is much simpler than a retina-ready website.
Defining Responsiveness – When people say that something is responsive, what do they mean? I think many of us think we know what is meant, but when you dig deeper, there is disagreement about what it means for something to be responsive.
Beyond Responsive – Responsive design won’t fix your content problems. Considering screen size only while ignoring other factors won’t give you the best possible experience. Responsive design does not allow you to forget about performance.
Labels: Managing User Expectations – An article about how to manage user expectations by properly labeling UI components. The better users are able to predict what an interaction will do, the more trust can be built, enabling the user to smoothly navigate a website and perform actions in a comfortable way
UX Sketching – every surface becomes a sketchpad to jot out quick ideas. Sometimes its on the back of a sushi menu, the floor to glass ceilings at the Digitaria office, or the pages of a moleskin notebook.
The Lean UX Manifesto: Principle-Driven Design – This all boils down to something that I call principle-driven design. As stated, some lean UX is better than none, so applying these principles as best you can will get you to customer-validated, early-failure solutions more quickly.
10 golden rules for digital icons – Iconography adds invaluable assets to an increasing portfolio of interactions. While icon design abides by principles of good design, it plays by its own rules.
Eight things user-centred design can teach business – User-centred design (UCD) is widely regarded as the best way to design a great user experience (UX), with most UX professionals following the international standard ISO 9241 part 210.
Insights into responsive design and development – I want to look at what building responsively actually means for developers, and how it has changed over time, to where it might go in the future.
Useful Tools For Testing Your Site On Mobile Devices – Making your website accessible on a mobile device requires lots of extra work but in the end it will definitely payoff. If you proactively do this work now, then you will have a leg up on this growing trend.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
4 reasons I use large type – Most designers don’t even know that there is an optimal number of characters per line. Let me take you through some of my thinking so that you can consider if you can take away any ideas to use on a project of your own.
The Web Classics according to Paul Robert Lloyd – I decided to ask some of my favorite nerds to send me a list of classic articles that every web professional should know. Here’s the list of links to articles that Paul Robert Lloyd.
Weekly Free Resources for Designers and Developers [January 6,2014] – Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are mostly latest releases or the ones you might not have seen yet.
Fresh Resources for Designers and Developers — January 2014 – We have a couple of tools to help with typography, a jQuery plugin that sticks to the top of your web page no matter how far down your visitors scroll, and a personal assistant called Jarvis to help you navigate better in WP Admin and more.
CSS Blend Modes could be the next big thing in Web Design – What awesome “blend modes” do web designers have at their disposal for making websites beautiful? Opacity. Some blend modes have been available in SVG through filters, but these are limited and don’t see much use in the real world.
20 Useful Web Development Online Courses and Tutorials – Below are 20 online courses and tutorials on web development. Some needs registration, and some only needs downloading and watching class materials.
25 CSS3 Tutorials for Web Designers in 2013 – In this post we’ve gathered 25 CSS3 Tutorials for Web Designers in 2013, these CSS3 Tutorials are very recent and teach you the most recent features in CSS3.
Optimize Your Design Process – If you have a good design process, you’ll create better design and more of it. These tips are mostly applicable to designers, but developers can certainly benefit as well.
10 Fresh Handy CSS Tools for Developers – In this article I have rounded up a list of New Handy CSS tools for developers which will help developers to achieve creative and innovative results in certain deadline.
7 simple mistakes you’re probably making – I look back today on my mistakes and notice what I could’ve done better. Here are 7 huge mistakes I made then that I try not to make now.
20 Hottest Trends To Watch Out For In 2014 – In this article I want to share 20 growing trends I hope to see blossom over the course of 2014. Many have already been set in motion while others are just beginning to dawn.
Why design for web and apps is all about context – It’s delivering something without forcing the user to ask. At its best, contextual design is invisible to the user because the interface satisfies their needs at the moment, location, and situation that they need it.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Does Your Logo Need a Redesign? – Your logo has been there for so many years. It is your company’s representation which people have recognized and trusted. A logo is certainly more than just for visual appeal. That is why, redesigning it wouldn’t be an easy decision.
Why So Many Companies Get Branding Wrong – Patents expire, software ages, buildings crumble, roofs leak, machines break, and trucks wear out. But a well-managed brand can increase in value year after year. Despite this unique characteristic, branding has long been misunderstood.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
The Intrinsic Value of Blogging – Blogging is harder than it used to be. We’ve gotten better at counting and worse at paying attention to what really counts.
23 ways to be a more productive blogger – Being a blogger means making a commitment to serve your audience, even when you don’t feel like you have the time or you just don’t want to write.
Facebook is limiting your page’s reach – This recent move by Facebook is an attempt to get companies to pay to reach these audiences. And that’s bound to make some of them unhappy.
The Web Needs You To… STOP BLOGGING! – let me say that I don’t literally mean “stop blogging”, I mean to object to the meme that seems to have overtaken the zeitgeist of too many lately. The “You Should Blog Every Day” meme.
50 Things You Should Know About Tumblr – You should probably beef up your knowledge on the social networking site, because it’s not going anywhere anytime soon. So, here 50 things that you should know about Tumblr.
How To Style Specific Menu Items Conditionally – I found this code on the WordPress Codex recently which i think will be useful. The code enables you to generate custom classes for specific menu items conditionally.
Aesop Story Engine – ASE is an open-sourced suite of tools that empowers developers to build feature-rich, interactive, long-form storytelling themes for WordPress.
How To Make Twenty Fourteen (Or Any Other WP Theme!) Super – A pretty comprehensive makeover for the Twenty Fourteen theme and there are plenty of useful tips and techniques that are applicable to virtually any theme.
10 Free Blank WordPress Themes – Blank WordPress themes are boilerplates that serve as a starting point for developing your own custom theme, which is why they’re also called “starter themes” and (less commonly) “naked themes”.
How to Limit Access to Your WordPress Dashboard – In this post I’ll go over a few different methods, from simply using the permission settings built into WordPress to using code and installing plugins.
Search Engine Optimalization, Conversions, Analytics, etc.
Reducing Your Website’s Bounce Rate – Bounce rate is one of the key measures of a website’s success and is something which any website designer and owner cannot afford to ignore. High bounce rate is not a good thing.
Should You Remove Navigation From Your Landing Pages? – This A/B test revealed that removing links from landing pages increases conversion rates. Removing external links had a much bigger impact on the landing pages. The landing pages had a 16% and 28% lift.
How to create a slidable grid with jQuery – This grid is a fun and pleasing way to show multiple pieces of information in the same amount of space, by having each section of the grid slide away on click or hover, and display extra content.
Shape Hover Effect with SVG – In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.
Sticky Table Headers & Columns – How to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.
Freelance, Business and Workflow Related Stuff
10 Best Budgeting Tips for Freelance Web Designers and Other Freelancers – Are you struggling to make ends meet as a freelancer despite having a good annual income? If you are, this post is for you. I’ll share ten budgeting tips to help you make ends meet.
How to Improve Your Focus and Get More Done – You can make some fundamental changes in how you work and improve your ability to focus. In this post, I explain why focus is important. I also provide five tips for improving your focus.
How to Build Trust on Your Website in the Age of Transparency – Unlike profiles on any of the social networks, a self hosted website doesn’t live on rented land. You and your business control who sees the messaging and what that messaging will be.
F*cking Brilliant, a great Read or just magnificent Tips!
Web Standards Killed the HTML Star – In some ways, the Web Standards Movement killed the Web Standards Guru. The goal of the Web Standards Movement was for it to not have to exist — for the browsers to be good enough that there wasn’t a need for such a movement.
Ten reasons we switched from an icon font to SVG – We recently went through the task of transferring them from an icon font to SVG files. I wanted to share why we did this along with some of the current limitations to SVG and how we got around them.
The HTML Star Is Ignored (and Shouldn’t Be) – My advice is a bit different. Learn the fundamentals. Learn HTML and CSS and how to best apply it. If it interests you enough to specialize, then be prepared to make your case when looking for a job.
– § –
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