.. 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.
Email Design Workflow – For this post I’m going to look specifically at front-end implementation of the emails. What text editor are you using to put together your emails? What’s your workflow when it comes to sharing emails with developers, or integrating them into your code base?
Why you need to use CSS variables – It strikes me that there are still CSS purists who don’t believe that they need a CSS processor. Maybe you’re one of them? Perhaps you’ve already pulled together a process that you’re entirely happy with. Or perhaps you’re on the other side of that coin: you use CSS preprocessors and see no need for native/browser-processed CSS variables.
awesome-nodejs – A curated list of delightful Node.js packages and resources.
Using SVG to shrink your PNGs – The first is a regular JPEG without any transparency. You can compress this one as much as you like. The second is an 8-bit PNG (alpha mask). This is just a black and white image that represents the transparent areas of the can.
Used and Abused – CSS Inheritance and Our Misuse of the Cascade – We are abusing the CSS inheritance model. I know that the “C” of CSS stands for “Cascading”, but that doesn’t mean we need to cascade from the simplest selector all the way down to a complex component.
Ultimate SCSS, Sass Responsive Tutorials – In this Sass Responsive Tutorials we are about to create elegant, reprising responsive grid system using CSS. Once users come to know about its working style they can easily improve it with Sass, unfolding some core sass features along the way!
Centering in CSS: A Complete Guide – Centering things in CSS is the poster child of CSS I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.
Installing and Using PHPMyAdmin for Web Development – In addition to offering a visual GUI for database operations, I also appreciate being able to run command line SQL operations via my browser without having to log in to the server via SSH.
The Holy Grail of CSS Centering – As standalone solutions they all have their caveats, but combined they’re an unstoppable centering tool which works cross-browser in IE8 and up consistently. It’s one more element larger than most centering techniques and completely bulletproof.
What ARIA does not do – ARIA is a set of attributes that can be added to HTML elements (and other markup languages) to communicate accessibility role, state, name and properties which are exposed by browsers via platform accessibility APIs.
Polyfills as a service – When you use reusable components, you might find that components ship with polyfills. Your page may end up containing multiple polyfills for the same feature. You might also find that these polyfills all use slightly different implementations, and it’s not immediately obvious which is a faithful emulation of the missing feature.
date input, with good and growing browser support… with the unfortunate exception of Firefox and Safari, at least right now.
Harmonious Animations – Throwing animations in randomly is a lot less damaging to a final product than just picking random font sizes, but it’s equally as fucking stupid. I treat animations now with the same care and attention I treat my typography. The similarities don’t end with the attitude, though, my approach to animations is rooted almost completely in typography.
Built-in Browser Support for Responsive Images – If you’re ready to start implementing
<picture> today but also want to add support for responsive images in additional browsers, refer to the <picture> element sample on Web Fundamentals for using
<picture> with a polyfill.
A Closer Look at SVG Path Data – The data within a
<path> element can make up the longest and most complex details of an SVG, but dissecting and understanding what exactly is going on within this string of code can really help to better understand the workings of your SVG and aid in the effortless editing and manipulation of these paths.
Switching to https – A step-by-step guide to enabling TLS on Apache. Now, here’s the thing with any of these walkthroughs; they’re all very specific to host/server combo in question.
An Introduction to Web Components and Polymer (Tutorial) – Modern web applications are not only complex to design but also quite difficult to develop. Given the range of tools involved, amount of testing required, and the combination of libraries/frameworks used, the development process has become harder.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Improving Smashing Magazine’s Performance: A Case Study – we’d love to share a few things that we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done recently. Over the years, our focus hasn’t changed a bit; however, that very asset that helped to establish our branding turned into a major performance bottleneck.
Consistency Counts: Never Forget Your User – “Reinventing the wheel” is a common trend in the UX field, as is it within the majority of creative disciplines. Keen designers want to leave their mark; to prove their creativity and talent through fresh concepts. Fair play to them.
Reducing image sizes – Images are the biggest culprit for bloated web pages. We often concern ourselves over compressing and minifying CSS and JS to squeeze out a few more bytes and follow that up with adding an oversized/unoptimised image on the page that weighs in at 0.5Mb.
20 Useful Tools & Apps For Everyday UX Tasks – There are so many online solutions useful for UX teams that it would be impossible to name them all here. Hopefully, this selection will help you in your search to expand your UX arsenal.
Need for Speed – Fast Loading the Key to a Satisfying UX – A website’s success can depend on several factors. Intuitive navigation, aesthetically appealing design, quality content, site maps, etc. – all play a vital role in making a website successful. There is one more very important factor that has a huge impact on the success of your website – page load time.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
CSS Shapes Editor for Chrome – I released the CSS Shapes Editor for Chrome. It is a Developer Tools extension which provides an interactive editor for shape property values like
Selecting typefaces for body text – Body text is most successful when it is unobtrusive, yet its tone can inspire the expressive qualities of other elements and the composition as a whole. When we choose typefaces for body text, we consider many things.
Designing Website Text for Readability – Text can be beautiful, simple, wild, engaging, exciting and a wide number of other things. It can stir emotion and helps users understand your message. Type can be a wide number of things but one thing is common – it must be readable.
Master web typography with OpenType – OpenType (OT) is a cross-platform font file format developed by Adobe and Microsoft. Its features add greater depth and variety by expanding the character sets of OT-enabled typefaces to include such typographic delights as ligatures, swashes, stylistic alternates and even real kerning.
Did You Think Designing A Call To Action Button Is Easy? – Button designs can be attractive as well being functional. The submit button at the end of a form, or any button that shows the user where to click is an essential part of website interaction.
How we built the new Wired UK homepage – You may have noticed some changes to the homepage and some other pages recently on wired.co.uk. In the interests of the Wired audience we want to add some visibility in the processes we used to arrive at what you see now, and where we may go in the future with subsequent iterations.
Contact Page is More Important Than You Might Think – Each page of a website is equally essential, but why then all noise is about the ‘About Us’ page, landing or home page? Contact page has the same meaning and impact on users.
How to make your code easily maintainable with living style guides – Living style guides contain always up to date documentation of the current code base and its use cases. With these documents we can write much more maintainable and reusable code while seeing instantly how optimized our code base is.
Hover.css – CSS3 Library With More Than 40 Hovering Effects – Hover is another best practice of CSS3 implementation. But as most of the effects such as transitions, transforms and animations are using new CSS3 features, you will need to do some extra work on old browsers that don’t support these features to make sure that the fallback hover effect works well.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Why Proper Brand Design Is Important – Exploring and understanding the science of good branding is what will help you set your or your client’s business apart from the competition, so that your users will be raving about their experience, no matter what.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
5 Tips for Running Successful Social Media Campaigns – Whether you want to build better campaigns or are ready to try your first one, there are certain pitfalls you should avoid. In this article I’ll share five tips for building and running successful social media campaigns.
How to Get Interviewed by Popular Blogs (Even If You’re Not a Big Shot) – Why do the same small set of individuals crop up time and time again online? Do they all belong to some secret experts club that gives them access to all the best opportunities? And if so, how do you get to be a member?
8 subject line formulas you can use in your next email campaign – So to help you write a great subject line that engages your readers and gets your emails opened, here’s 8 subject line formulas that you can apply to your next email marketing campaign.
Everything you need to know about WordPress 4.0 – WordPress 4.0 may be the most significant update in years. There have been changes to the UI, enhancements to the writing experience, and some intriguing additions that hint at what’s to come in the future.
Best WordPress Portfolio Plugins for Impressing Potential Clients – Some of the plugins offer very basic portfolio features such as the ability to display images, while other are more comprehensive and include filterable grids and project pages.
How to Add an Image in WordPress Sidebar Widget – By default, WordPress doesn’t have an image widget. In order to add an image a user needs to manually add the HTML code. In this article, we will show you how to add an image in WordPress sidebar widget.
Understanding and Working with Metadata in WordPress – By this definition, WordPress uses descriptive metadata. What we define as data in WordPress and what can be defined as metadata is a little blurry, and doesn’t equate directly to what’s stored in the metadata tables.
9 Most Useful .htaccess Tricks for WordPress – The .htaccess file is a powerful configuration file that allows you to improve your site’s security and performance. In this article, we will show you 9 most useful .htaccess tricks for WordPress that you can try on your site right away.
The Ultimate Jigoshop Ecommerce WordPress Plug-in Review – I’ve arrived at the conclusion that this professional WordPress eCommerce plug-in is best suited for small to medium-sized websites enterprises. Keep in mind, this plug-in is absolutely free to use.
Stop WordPress Comment Spam With These Pro Tips – Thankfully, tackling spammers does not need to be a time consuming endeavor. If you configure your WordPress website correctly, and install a good anti-spam plugin, you can eliminate the vast majority of spam from your website.
Useful WordPress Utility Functions – In this article we are going to look at some of the utility functions that you can take advantage of if your website is built using WordPress. If you have a look at some of these functions you will understand how you can use WordPress not just for a simple blog, not just for a CMS but for an application framework.
Building a Facebook Like Box WordPress Widget – Creating widgets for WordPress is easy — extend the standard
WP_Widget class, include the required methods and finally register the widget. We will go over the above widget development stages as we build our beloved Facebook Like Box.
Understanding and Working with Taxonomies and Terms in WordPress – Understanding how this relationship works and where the key data is stored will help you understand how taxonomies and terms work, and to use the functions associated with them.
Search Engine Optimalization, Conversions, Analytics, etc.
The 3 Types of Links that Send Legit Referral Traffic – I know for most of the year I’ve been telling you that links are going to lose value – and I still think it’s true. However, I’ve been careful to point out that for now, links are still pretty powerful stuff in SEO.
10 tips for an awesome and SEO-friendly blog post – Good content also leads to more Facebook likes and shares, tweets and return visitors to your website. Of course, you can do some extra things to maximize the SEO friendliness of your post, but most important is: just write a very, very good post!
Customize Your Ordered Lists with CSS and the ::before Pseudo-Element – Fortunately, by combining a couple of lesser-known CSS properties you can add numbers to your ordered lists that look just the way you want them to. In fact, after this tutorial, you’ll be able to change fonts, colors and nearly every other style attribute of numbers in lists.
A Simple Parallax Scrolling Effect Tutorial – In this tutorial, we take a look at a beautiful parallax scrolling effect in the simplest of ways, with stationary backgrounds and scrolling content. The beauty about this technique in its simplest form is that it only requires CSS.
Glitch Effect on Text / Images / SVG – I also made two more mixins, one for applying this effect to images, and on for inline SVG. They are different, because they don’t use pseudo elements to make the copies, coloring happens in different ways, positioning happens differently, etc.
Shine Bright like a Diamond: How to Create CSS3 Diamond Grids – Creating a diamond shape using CSS is cool but how about combining diamonds to create a grid? Today’s tutorial will show you how to do CSS3 diamond grids.
Freelance, Business and Workflow Related Stuff
Freelancing 101: How to Collaborate When You Work Alone – One of the biggest misconceptions of working as a freelancer is that it means working alone. It’s actually very much quite the opposite. How would you ever expect to do business if you don’t work with anyone?
33 Ways To Get More Clients – In this post, I’ve covered 33 strategies you can use to get new clients. You may be familiar with some of these at a glance, but read through because I’ve included helpful advice, resources, and tools for each.
For Designers, the Customer is Never Right (Even When They Are) – The longer you work in the field, especially as a freelancer or small business owner, the more you come to see that the customer is never right. Here are the four primary reasons you should banish the “Customer Is Always Right” rule
What I wish I’d known about running a startup – Running a startup is such a crazy, fast-paced, always-changing process that it’s impossible to know everything about it before you begin. And of course, your mileage will vary.
F*cking Brilliant, a great Read or just magnificent Tips!
For the Copy and Paste Programmers – For those who are copy and paste programmers, this ultimately disrespects others, undermines your own ability, and prevents proper problem solving.
Simplicity, It’s Complicated – Your smart phone would be simpler if it didn’t have a camera. But it would also be a lot less useful. Simplicity is an obvious virtue, but it is not the ultimate virtue. Sure, the fewer clicks, taps, steps, hurdles, fields, distractions, and doodads in a UI, the better.
Web Components – I have conflicting feelings about Web Components. I am simultaneously very excited and very nervous. The exciting thing about Web Components is that they give developers as much power as browser makers. The frightening thing about Web Components is that they give developers as much power as browser makers.
– § –
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