.. 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.
A (Not-Super-Technical) Designer’s Command Line Toolbox – One of the talks I most enjoyed was by Dave Rupert. He gave a thorough, but not intimidating, overview of tools to make the command-line do some pretty incredible stuff.
Implement Custom Gestures – If you have an idea for custom interactions and gestures for your site there are two topics to keep in mind, how do I support the range of mobile browsers and how do I keep my frame rate high. In this article we’ll look at exactly this.
Convert Images to Black and White with CSS – CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the most minimal of CSS
SVG `symbol` a Good Choice for Icons – An improvement is to use the
<symbol> element in SVG instead of directly referencing shapes (or a
<g>), because you can define the
viewBox directly on the
<symbol> and then not need one when you
<use> it later in an
25 pro tips to breathe new life into your CSS – There’s still plenty of excitement and life in the world of CSS, whether that’s in cutting-edge properties you may not yet have explored, or through using an aspect of CSS in a way you’d not previously considered.
Animating SVG Gradients – Within SVG linear and radial gradient elements there are several attribute options available for thorough customization. Animating these gradients takes this customization even further and presents a unique opportunity ..
Should we change the default for overflow? – For the CSS
overflow property, should
hidden be the default instead of
visible? There are several awesome benefits to one of these being the default, and in my opinion
Getting Started with SVG Gradients – Using SVG gradients allows us to almost effortlessly fill in a complex shape with custom gradients and has the advantage over CSS gradients of living in the DOM.
Automatically Maximize Text Contrast On A Page – An interesting UI challenge in which web app users will have the opportunity to change the background color of a page. At the same time, instructions on the page must remain legible, which is impossible if the text remains a fixed color.
Prefill Your Own Forms in Dev – Certainly just filling out the forms by hand is a good idea, but doing that over and over gets so tedious you (gasp) might just not do it very often. Perhaps we can just toss a little bit of code on our sites to prefill them when we need.
Inline SVG Icons – I wanted to convert all the little icons littered across the site from icon fonts to SVGs. I’ve managed to do this to my satisfaction and thought I should share my methods.
Load Scripts Dynamically With jQuery – A common tactic to help speed up your website is to use a technique called lazy loading which means that instead of loading everything your page needs at the start it will only load resources as and when it needs them.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
So You Think You’ve Built a Good Infinite Scroll – I think maybe this could all be made a bit easier by offering a quick checklist of what to test, expect, and review if you attempt your own version of an automatic infinite scroll.
The ultimate guide to email design – Understanding how HTML emails work, and knowing the tools and templates available to you to make creating them a lot easier, is vital for virtually any designer.
Designing with a (Performance) Budget – The web industry has been focusing on ways to improve performance, by applying the idea of a “performance budget.” A performance budget involves establishing a target page weight (usually in kilobytes), and then making sure no single page exceeds that value.
Testing Responsive Images – At long last, the native
picture element isn’t just coming: it’s here. We got the
picture element this far, and now that we’re in the final stages we have another opportunity to help things along: testing and filing bugs.
The Hamburger Icon – Whether you want to call it a hamburger, navigation or menu icon, that dear little thing looks like it’s here to stay. It’s our own fault, we created it
A Look at the Off-Canvas Menu Design Pattern – In general, the off-canvas menu design pattern is a great option for responsive websites that need to display a lot of links that wouldn’t otherwise fit in a traditional top horizontal navigation bar.
Abusing Ellipses – I want to bring up another pattern that has recently become a big problem also: the humble ellipsis. I started seeing ellipsis iconography show up more and more over the last couple of years in web applications.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
When Is It Ok To Break From Convention? – A recent change to Google’s search result page has me thinking about both links and convention. You may have noticed the change. Google removed underlines from all links. The underline shows on hover, but not by default.
50 CSS Libraries, Frameworks and Tools from 2014 – All of the tools and libraries have been categorized into the following categories: Animation Libraries, Spinner & Indicator, CSS Typography Libraries & Tools, CSS Frameworks & UI Kits, Icon Creation Tools, etc
Create Vertical Rhythm on Your Webpage – I hope that you know have a pretty good idea of how vertical rhythm can be set in your CSS. It is actually a simple thing to define and it does so much for your website design.
7 Simple Steps to Make Your Business Website Look More Professional – In this post I am going to tell you how to avoid common mistakes that website owners and inexperienced designers do. And here I give you 7 very and very easy steps how to perfect your website design if you have one or start making your first corporate site.
Prototyping Your Workflow – The way we create for the web is changing so rapidly that if you’ve attended enough conferences or read enough books and blogs these last couple of years, you may feel like we did: excited but a little overwhelmed, ..
You’re Not Emotional: Emotions and Web Design – Emotion has the power to foster a lasting relationship with your visitors. If you can elicit an emotional response from a visitor, he’ll remember the experience long after everything else has faded.
What a Website or Web App Should Actually Cost – Clients and web designers/developers are both getting a raw deal if we don’t figure this out. Given its importance to modern business, we need a more scientific method to determine the value of design and development work.
My Vector Workflow – I thought I’d share my workflow and give a few tips for how to make your designs a bit more future-proof and vector based in digital design. This article is about a workflow that is using vectors.
New For Designers in May 2014 – Here we are again, with another selection of new freebies for designers, either new or updated during May 2014.
50 Web Designer Freebies from May 2014 – The tremendous thing about the design community is that we all love to share. The sharing is what makes our community truly great! Here are this months web designer freebies
6 Signs Your Landing Page Needs to Be Redesigned – But how can you know for sure if your landing page are in good shape? Here are six signs that your landing page needs to be redesigned or optimized to get you as many high-quality leads as possible.
How to Tune Typography Based on Characters Per Line – With an “optimal” range that large, the CPL you use on your site ultimately comes down to personal preference. How can you tune your typography to an exact (or, at least approximate) CPL?
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
8 ways to add visual hierarchy – There are many ways to achieve a visual hierarchy. Below are a few that can add direction to your design .. Add direction to your design.
How To Create Typography Illustrations the Easy Way – The greatest benefit of this digital technique though, is that the text can still be edited and the new wording will automatically form to the existing shapes.
How to Use Warm Color in Design Projects – Today, we will look at using warm color in design projects and create a few color palettes with warm hues. We’ll also investigate the theory and meaning behind different choices.
Hands On With The Sigmund Freud Typeface: Making A Font For Your Shrink – As a typographer, I love handwriting, and in this article I’d like to share a hands-on overview of my creation process of a handwritten font.
The two great challenges of your agency site: Branding & the portfolio – Whether you are a freelancer or run an agency, one of the most painful things we have to do is design our own website. We procrastinate, nit pick and never quite get around to finishing it.
Best Adobe Illustrator Tutorials of May 2014 – Tutorials by professional designers come into play as these ensure to help you out in simple and easy to follow steps. Here, is the list of this month’s best Adobe Illustrator tutorials that you all would love checking out and try your hands out.
7 rebranding mistakes you should avoid – Rebranding can be a risky business. It’s more than just a fresh coat of paint on your company brand, it also signals your organization is embracing a new way of doing business.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Stop Doing That! THIS is How You Do Social Media – Be kind to social media. Use it as it was intended to be used. Only then can you look to shape it to your advantage. Here are 4 things you should not be doing and 8 things you should.
“Like”-able Content: Spread Your Message with Third-Party Metadata – Basically, Twitter Cards and OG are discrete sets of metadata. Certain social platforms look at that metadata and display parts of it, as appropriate. In Twitter, you might see them as summaries of news articles or images in your feed.
5 Simple tips for more effective cold emailing – We know that there are many effective marketing tactics, and lately we’ve been discussing how cold emailing is an effective strategy for growing your client base. This article will outline five simple tips for more effective cold emailing,
Should you change your site’s CMS? – Clients have only ever known one way to add content and simply don’t have time to learn another one. So the real question is: should you change the CMS?
Display the Full TinyMCE Editor In WordPress – The WordPress visual editor was given a decent trim in version 3.9. I’ll show you how to display more than the basic 14 buttons and also how to permanently show the buttons in the kitchen sink.
WordPress Just Got a JSON API. Here’s Why This Matters – This would make it drastically simpler to create third-party applications and websites that interact with WordPress-based websites in a way that is modern, and supported across a wide variety of languages and platforms.
Vulnerability found in the All in One SEO Pack WordPress Plugin – All in One SEO Pack just released a new version. It is a security release patching two privilege escalation vulnerabilities we discovered earlier this week that may affect any web site running it.
The best free WordPress plugins for June 2014 – Ladies and Gents, we’re back with yet more plugins for you to try out. As usual, we’ve got a little something for everyone; from improving your writing to improving your community’s code.
Security is nuanced – As a software vendor, there are many reasons to prefer responsible disclosure of security issues. But the most important reason is also less obvious: vulnerability reports need to be correct.
UX Hack: Making Long WordPress Posts Easier to Read & Scan – The problem with most 5,000-word posts is that they are structured no differently than a 500-word post. A 500-word post, even if it’s only marginally structured with some thought to presentation, is easy to scan.
WP Mayor Guide to WordPress Content Delivery Networks – Guide to WordPress Content Delivery Networks. I’ve written this guide keeping the absolute beginner in mind. I shall discuss the basic working principle of a Content Delivery Network and talk about its many advantages.
How to Choose the Best WordPress Ecommerce Plugins for Your Website – If you are ready to sell items online, help people find and buy what they are looking for by using the best WordPress ecommerce plugin available for your website and products.
An Introduction To WordPress Page Templates – This is a practical way of changing the style of certain parts of your website. It also allows you display information that you would not normally display on a page. Let us take a closer look at what page templates are and how you can use them on your website.
Exciting Improvements in WordPress 3.9 – Changes in these areas were done in order to improve the user experience of WordPress site owners in the backend. With this newest version of WordPress, more than 200 changes were introduced. Let us discuss some of the big changes.
The Definitive Guide to Evaluating a WordPress Plugin – But plugins can also save us lots of development time and provide cool functionality on our sites at the click of a button. So let’s walk through an example of how we evaluate WordPress plugins.
Search Engine Optimalization, Conversions, Analytics, etc.
Parallax Scroll vs. Infinite Scroll – A site can have either parallax or infinite scrolling, or both. These concepts are relatively new to the industry, but their conventions, or lack thereof, have been a challenge for UX and SEO.
7 Things I Wish Execs Knew About Link Building – So, in an effort to make both of our lives just a little easier, here are seven things I wish executives knew about link building and SEO.
45+ Fresh & Useful CSS3 Tutorials & Techniques – Here is a collection of the 45+ fresh & useful CSS3 tutorials & techniques, which will help you to learn this, to the point, quickly, and in the best possible manner!
How to use CSS3 to create an animated 3D menu – Legwork’s Sean Klassen reveals the key stages behind creating the main CSS3 3D-powered menu.
Inspiration for Inline Anchor Styles – Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.
Freelance, Business and Workflow Related Stuff
How to Attract Great Clients With LinkedIn – LinkedIn is little more than a place to keep track of contacts and post our resume online but LinkedIn can be so much more than that. It can be a powerful tool for connecting with your target market, creating strategic partnerships and building your business
Design Dilemma: Who Owns My Design? – Our designs are our babies, otherwise we wouldn’t care how clients change them. So, every now and then, the question arises between designer and client as to who owns the files and rights to a design you’ve done.
How Important Connections Are and Why You Should Start Networking – The whole point is about making connections that will be with you forever. Keep on searching for the opportunities to get in touch with those people who can help you in getting to the next level of your career.
F*cking Brilliant, a great Read or just magnificent Tips!
The Golden Section Revisited — Magic Or Myth? – The golden section is commonly found in nature and has been used since antiquity in both art and architecture. Or has it? You can find information suggesting it’s the most magical ratio in the universe or that it’s complete nonsense.
Are we getting too Sassy? – ” If I took over maintaining a project and all the Sass looked as complex as that, I’d feel a little out of my depth maintaining the project.”
– § –
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