.. 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.
This will be the last Tweet Parade of this year! I wish you all a merry Xmas and a very happy, successful and healthy New Year! See you again in 2014!
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.
Sass Media Query Helper For Designers – A configurable design tool that displays the current min-width media query in the bottom right corner of your screen and updates as you re-size the browser window.
Animation Principles in UI Design: Understanding Easing – We need to look deeper into the fundamentals of animation. We’ll take this step by step — we’ll learn the underlying concepts, explore ease-in and ease-out, break down easing curves and finally see how it all applies to UI Design.
Contributing To GitHub Projects is Easy – Contributing code, or even just text, like documentation, to a GitHub repository that isn’t yours is extremely easy. I’ve seen a lot of people including instructions in their GitHub readme files explaining how to contribute to the project.
50 CSS Tools & Resources from 2013 – All of the resources have been split into the following categories: Responsive CSS Frameworks, CSS UI Kits, Web Based CSS Tools, some indispensible CSS Reference Resources, and finally a mixed bag of resources that can’t be categorized.
25 CSS3 Tutorials for Web Designers in 2013 – We hope these CSS3 Tutorials teach you the many possibilities CSS3 has to offer, helping you become a better web designer for your future projects!
5 htaccess Snippets to Borrow from HTML5 Boilerplate – HTML5 Boilerplate is an awesome website template when you want all best pieces in place for you when you start your project. I want to feature a few .htaccess settings which could speed up, secure, and make your site very much more useful!
Application Layout with CSS3 Flexible Box Module – In this article we are going to implement a simple application layout, which fills the whole screen, resizes with the browser window and comes with the additional bonus of a draggable splitter.
The Beginner’s Guide to Emmet for CSS – Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text this is the
Six reasons why I love Sass – I had read a lot about LESS and Sass and the concepts of CSS pre-processors, and even dabbled with how they worked, but didn’t fully understand how powerful they could be in my daily development workflow.
Optimizing NGINX TLS Time To First Byte (TTTFB) – Network latency is one of our primary performance bottlenecks on the web. In the worst case, new navigation requires a DNS lookup, TCP handshake, two roundtrips to negotiate the TLS tunnel, and finally a minimum of another roundtrip for the actual HTTP request and response.
About Variables in CSS and Abstractions in Web Languages – Variables are coming to CSS. They already have implementations, so there is no stopping it now. To be clear, no amount of arguing on whether this is good or bad is going to change things at this point.
Turbo-Charge Your CSS With Emmet – Emmet uses common sense abbreviations to make code writing easier. It can help a little or a lot, depending on the amount of time you invest in learning the ins and outs. You’ll begin to learn new CSS properties and only have to memorize the abbreviations.
Create Floating Form Labels with FloatLabel.js or JVFloat.js – Floating labels are cool. People tend to have pretty strong opinions about floating labels, but overall, I like the idea, and have liked most implementations I’ve seen.
Using ARIA to enhance SVG accessibility – The desired behaviour is that the screen reader can navigate to the SVG image, identify it as an image, and that the accessible name and accessible description are announced.
Create an animated site with Sass and Compass – Add interactivity and animation to your site with CSS3 using Sass and Compass, and trigger the animations using jQuery. if you’re building responsive sites that still maintain most of your animation and functionality for mobile sizes, then this approach is especially beneficial.
Usability, User Experience, Responsive Web Design, Mobile, etc.
2014: The year we start developing for mobile first – Customers are in the driving seat because they know that using a smartphone is more convenient for them on a day-to-day basis. They’re going to start expecting businesses that they deal with to react in a mobile first fashion.
Responsive Web Design Trends – The larger point is that the craft of web design and development is in yet another phase of re-invention and it’s worth taking a step back every so often and trying to clarify what this means.
Mobile-first Responsive Web Design and IE8 – But when supporting older, buggy and incapable browsers, we have to wave some of the “good ol’ web best practices” goodbye… so, how do we make sure we don’t cripple our codebase with hacks for Internet Explorer so the other 95.5% of our readers still benefit from the best experience possible?
Challenges & Solutions for Your Responsive Navigation – Step back and determine what your specific challenges are, and what type of solution would be most effective for the project at hand.
Why Responsive Design Matters – Responsive design matters because it’s growing exponentially in the present. We can no longer classify responsive design as a subset of web design—for responsible designers, responsive web design and “regular” web design are synonymous.
Five Fundamentals of Accessible Responsive Web Design – What are the key techniques for building a responsive website that’s also accessible? I’ve been scouting the Web the last few days hoping to find clear answers to this question, but there’s precious little out there.
The Part and The Whole – We need to continue to break interfaces down into their component parts. But we also need to paint the whole picture. As we move forward, it’s going to be essential to consider both the part and the whole in the design process.
The Issues We Want To Solve – If you think about responsive design in general, much of it comes down to being flexible over a certain range of conditions and then making more significant changes at the end points of these ranges. It’s easy to see in responsive layouts and it also occurs with images.
Checklist for mobile website improvement – Several topics in the checklist link to a relevant business case or study, and other topics may have a video explaining how to make data from Google Analytics and Webmaster Tools actionable during the improvement process
The 8 biggest responsive web design problems (and how to avoid them) – Designers are faced with an ever-changing landscape of devices, code frameworks and scripts – and, of course, the need to work in a new way with clients to manage the process of creating responsive websites.
6 secrets of creating the best responsive content – Sites aiming to work on screens big and small must feature carefully selected images, effective text and sensible layout hierarchies. Content strategy is even more vital, and must be part of the earliest wireframing stages.
Breaking up responsive design – I encountered several front end discussions about responsive web design that intrigued me. The first thing I wanted to overcome was the issue of relative font sizes. What would be the best practice and why?
The Top UX Trends of 2013 – Researchers and designers are put to the test with every new product that appears on the scene, and we’re often left looking to what’s clicking in the marketplace for inspiration.
The Many Faces of ‘Adaptive Design’ – Lots of terms evolve beyond their initial definitions and become a catch-all for a general notion or idea. “Adaptive Design” is another one of those terms you see thrown around in various ways.
Creating a Simple Responsive HTML Email – In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
16 Tips for Balancing Website Design and Conversion – Poor website design is a conversion killer. It doesn’t matter how good your content is: If you don’t address design and usability issues, you’re wasting your time.
Weekly Free Resources for Designers and Developers [December 16,2013] – 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.
If You’re A Web Designer Or Web Developer You’ll Want These New Resources – With a lot of web developers working on various things today, great tools get created regularly. You can find a list of tools on this website: use these new apps and resources to make your profession a bit easier.
How Optimized Are Your Images? Meet ImageOptim-CLI, a Batch Compression Tool – A number of popular tools can help us optimize images even further. We assumed, that our graphics editing software properly optimized our files, but what do we really know about our image optimization tools?
5 Things Every Coming Soon Page should Have – ‘Coming Soon Page’ is one of the most important element of website launch. As they say, first impression is the last impression. It is highly suggestive to come up with a coming soon page till your website is finally live.
Snow Fail: Do Readers Really Prefer Parallax Web Design? – As it happens, the parallax site was only superior in one sense–fun. None of the other survey measures indicated a significant difference in user experience between the two sites. Parallax didn’t even edge the standard site in questions about visual appeal.
Untangling Web Typography – Lower the importance of the decisions you are making. Our sites, like ourselves, are always a work in progress. We can choose one typeface today and a different one tomorrow. It is OK to experiment. Be brave.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
The best fonts of 2013 – We all love exciting new typefaces, and 2013 has been a bumper year for type design. So, with 2013 coming to a close, we’ve put together this list of the best fonts in the last 12 months.
10 free typography apps for designers – So typographers, this one’s for you – our pick of some of the best free typography apps that can make your font-oriented life a little easier and in some cases a lot more fun.
12 steps to creating the perfect logo – Logo design is a tricky business, but there are some rules all the best logos adhere to. We asked leading logo designers to tell us what they are. They may look simple but don’t be fooled into thinking logo design is an easy task.
75 Best Free & Premium Fonts Of 2013 – This font resource is a must have for your bookmarks, today I wanted to bring you some of the best free & premium fonts I have come across during 2013. Within the 75 fonts there is a mixture of serifs, sans-serif, scripts and geometric fonts
5 Common Big Mistakes of A Logo Designer – Logo designers are put under high pressure, which could be translated as the best context to make mistakes. It’s a vicious circle and cold blood is required, in case you want to escape from it.
The Present And Future Of Adobe Fireworks – In this article, we’ll take a close look at Adobe Fireworks, explaining why it is a unique and powerful design tool, how we can continue to use it effectively, and what our alternatives are for the future.
10 pro tips for perfect typography – Typography is an essential element of almost every design discipline. But however keen your skills, there’s always something new to learn. Here we bring you 10 essential tips to boost your typographic knowledge
10 Hidden Typography Truths: Art vs. Functionality in Type – In order to help you sharpen your typographic claws, we’ve put together a list of 10 tips and tricks that you should remember when setting type.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
11 Common Blogging Mistakes That Are Wasting Your Audience’s Time – Avoid the 11 common blogging mistakes below at all costs. They waste the time of your readers by contributing to information overload without offering value in return …
How to Increase and Engage your Followers – Arora has a few suggestions for designers, like himself, who yearn to gain a following too. In an age of #followme and #tagforlikes though, he reminds, “developing a community that cares is always better than having a group of people who don’t engage.”
The Disappointment of Writing on Medium.com – Medium is meant for collaborative writing, and not blogging. We blog because we have something worth saying. Most bloggers seek subscribers, readers and attention.
Get Inspired: Blog Writing Tips by Famous Writers – With some of the advice from folks who have published and (sometimes) prospered from the craft of writing, you will be better prepared to succeed in the brave new world of the blogosphere.
8 things I’d drop from WordPress core to remove bloat – Let’s face it – there are some features in WordPress which are unloved and rarely used. Ever used Press This? I’d love to see WordPress cutting out some bloat to make core lighter, and as a consequence easier to use.
How To Backup WordPress: Guide to Free & Premium Services and Plugins – Putting in place a backup procedure for your WordPress site should be one of the first things you do. You can either wait for something to go wrong and learn the hard way, or install a free or very affordable premium plugin.
A Complete Guide On How To Protect Your Self-Hosted WordPress Website – While we cannot actually completely protect any website, not just those running with self-hosted WordPress, we can still make it very difficult for the botnets and hackers to try to hack our site.
Search Engine Optimalization, Conversions, Analytics, etc.
10 Tools To Improve Your SEO – As time goes by, there are more and more tools that become available for online site owners to use. These are tools that help make your SEO efforts more effective. Here is a short list of Effective Tools To Improve Your SEO.
What were the most significant developments for SEO in 2013? – I’ve been asking folks in the industry about their thoughts on SEO in 2013, and the most significant events over the past 12 months. It’s been another eventful year in search, mainly thanks to Google.
How Simplification Saved Our Website and Increased Conversions by 4x – With recent changes in how customers are accessing information (and to take advantage of the mobile trend in particular) we decided it was time to give the website a fresh look and feel.
What to Expect for SEO in Coming Months – Google’s head of web spam Matt Cutts has just released a new series of webmaster resource videos. Featured below is the most recent video in which Matt shares some insight into what we should expect from Google in terms of SEO in the coming months.
How to Design Animated Sliding Page Elements With CSS – There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.
CSS3 Slider Timeline Menu – A slider / timeline menu with a dial that slides over as each new section is scrolled to. You can click on each link as well and it will smooth scroll along with adjusting the dial to the selected section.
Perspective Page View Navigation – Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.
Quick Tip: Create a Simple URL Shortener With 10 Lines of PHP – If we are to create a link shortening service that you are the only user of, we might omit things like user registrations and admin panels. Here are some of the features of our link shortener:
Responsive Photosets – Creating a photoset is complicated, but only in a mathematical sense — once you have figured out how a minimum height can be easily derived from the proportions of individual elements as well as the actual width of the parent container, nothing will hold you back.
Freelance, Business and Workflow Related Stuff
19 Mistakes I Made As A Small-Business Owner – My mistakes taught me how to be a better business owner. I’m sharing them with you so you can avoid making the same errors. I want to help you find your version of success as a small-business owner.
Tips for Balancing a Digital Freelance Lifestyle – In this post I want to share a few tips for keeping yourself in balance. Freelance work is unlike the commonplace 9-5 office jobs everybody seems to have. You can set your own hours, do work as you please and still setup some play time.
7 Ways Freelance Specialization Is Completely Overrated – What I am saying is that there’s a wrong time to specialize and there’s a right time to specialize. Specialization isn’t right for every freelancer and it’s especially not right for most brand new freelancers.
Use social media to get design work: 25 pro tips – Social media isn’t just for annoying famous people or wasting time when you’re supposed to be working. Used in the right way, it’s a great resource for boosting your career
F*cking Brilliant, a great Read or just magnificent Tips!
Project Hubs: A Home Base for Design Projects – A project hub consolidates all the key design and development materials onto a single webpage presented in reverse chronological order. The timeline lives online, so that everyone involved in the team has easy access to it.
A Moment to Breathe – Burning both ends of the candle night after night, weekend after weekend, has long been part of web design and development culture. Especially in the startup subculture, we pride ourselves on working long hours with little sleep.
Evaluating a redesign – So, when evaluating a redesign you have to know what you’re looking for, not just what you’re looking at. How the new design compares to the old may be the least important thing to consider.
Why I create for the web – It’s the power to communicate anything I can imagine, instantly. It’s the capability to reach anyone with access to the web, instantly. And it’s the ease with which I can send you off on your next journey to anywhere I wish, instantly, all with a little link.
Create a Simple URL Shortener With 10 Lines of PHP – This problem can be solved nicely with a URL shortener. Such services have been around for a long time, but there are a few problems with them
– § –
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