.. 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.
SVG Basics: Circles and Ellipses – While most designers use a visual editor like Adobe Illustrator to create SVG drawings, knowing the basics of SVG syntax can allow you to create elements like lines, circles and rectangles easier and more precisely
Understanding and Manually Improving SVG Optimization – SVG should be optimized before being used on production sites. There are several great tools for that, but the best results come from a deeper understanding and a little manual work.
SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting – Fortunately SVG makes it easy to create simple and more complex patterns that can scale with your design and likely require fewer http requests.
Simplify Your Stylesheets With The Magical CSS Viewport Units – They’re now supported by all major browsers and offer unique functionality that can be very helpful in specific situations, especially ones involving responsive design.
10 Cool Things HTML Tags Can Do – At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. This post will remind you some of the HTML tags that you didn’t know you could use.
Nesting Components – Using CSS components is somewhat straightforward. We add the markup and give it the component’s class name and all is good. Where it gets trickier is when we try to nest components. And when they need to be tweaked based on the context.
Building a Better Gulpfile – I try to apply conventions and standards. For Gulp, I created Noise, which is a set of common tasks that I need when using Gulp. Additionally, it has a very customizable
Gulpfile.js file that can be used in various projects.
The End of Global CSS – Introducing local scope has had a significant ripple effect on how we approach our CSS. Naming conventions, patterns of re-use, and the potential extraction of styles into separate packages are all directly affected by this shift, and we’re only at the beginning of this new era of local CSS.
Revisiting :Visited – I see two causes behind today’s relative scarcity of :visited styling. I’m guessing most designers and developers don’t actually want to get rid of the :visited state, but have unwittingly lost it by overriding unattractive defaults.
How-To, Notes, Tips and Why We Need A viewBox Property in CSS – The
viewBox attribute is awesome. It is literally SVG on steroids. By using this attribute, you can save a lot of time when working with SVG, troubleshoot SVG quickly without having to resort to a graphics editor.
33 Open Source Sass-Based CSS Code Snippets – This gallery includes 33 free code snippets written with Sass/SCSS code. Feel free to dig through these examples and reverse engineer the syntax. You might be surprised how much you can learn!
What you should know about collapsing margins – Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin.
In CSS, the Only Wrong Answers are Definitive Ones – The very nature of CSS leaves many problems without an exact solution, and the right one for you won’t always work for others. If you’ve written CSS long enough, you run into these sorts of situations all the time.
Getting Dicey With Flexbox – What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Choosing performance – If a website is slow it’s because performance was not prioritized. It’s because when push came to shove, time and resources were spent on other features of a site and not on making sure that site loads quickly.
Is Mobile Friendly “Friendly” Enough? – The performance metrics were satisfactory for a cable connection speed, but on mobile connections it was considerably slower. It didn’t take long to realize that while the site was mobile friendly in the sense of design, it wasn’t mobile friendly in the sense of data/network usage.
text-rendering: optimizeLegibility is Decadent and Depraved – All this typographic power came with a cost:
text-rendering: optimizeLegibility is slow—and by “slow,” I mean that it can bog down an entire page, from initial render time to repaints.
Why ‘mobile first’ may already be outdated – So if you’re designing and building software to sell to employees or companies, and that includes everything from enterprise software to calendar and to-do apps, you better be thinking about big screens as well as small ones. It’s not just about mobile-first.
For Infinite Scroll, Bounce Rate Is a Vanity Stat – Unless someone who manages a content site with infinite scroll can show data to prove infinite scroll genuinely leads to greater retention and engagement, I won’t trust the measuring stick.
On mobile, slow speeds kill – Sometimes even a perceived faster performance can help boost usage and engagement. So it’s no surprise that Facebook is using speed to lure publishing companies to collaborate.
Why web design is losing its soul – RWD is the future, no doubt. I’m excited to see what we build as we continue to learn and master responsive development. Even more so, I’m excited to see some of you bring some soul to your work, and bring some magic back to the web.
Accessibility, Part 3: ARIA – If a user is using assistive technologies, one way of making that possible is to make it easier for those technologies to parse and understand your site and its content. In this article we’ll be focusing on one particular way of doing this: ARIA.
SCALABLE DESIGN vs RESPONSIVE DESIGN – SVG 2.0 has been a working draft since April 2015 (this year) and is not currently supported in any browsers. However, the roadmap seems to suggest that we shall soon encounter partial browser support hopefully this year.
The easiest way to find and fix usability problems – If you think your site has usability problems, you’re probably right about that. Every website has them and it’s a constant battle to find and fix these issues. The easiest way to do it is by watching people use your site in job-based usability tests.
Accessibility for Modern Responsive Website Layouts – With these tips it should be much easier for UX designers to craft amazing interfaces for responsive layouts. Web design is not an easy job but it does get easier with practice.
The Cost of Performance – There’s no better way to illustrate the cost of bad performance than the old story about every extra tenth of a second of load time costing Amazon millions. But good performance has a cost too: development cost.
Webdesign in Common, Web Typography, Tools, Email, etc.
Hamburger icon: How these three lines mystify most people – However while the button may provide a consistent way to find extra information, research suggests it is not as functional as some might like to think it is.
How to successfully combine typefaces – How you choose to combine typefaces doesn’t really matter, what counts is the end result. However, it’s when you take risks, and look for unexpected pairings, that you’ll discover the most satisfying results.
New Web trends: immersive interaction design – Here we’ve collected some of the modern IxD techniques that users are flocking to. Some are genuinely new, while others are just new takes on old ideas. Either way, they’ll help you stay ahead of the curve …
An Introduction to Static Site Generators – A static site is not some magical solution that will solve all the problems — they’re perfect for some cases, but terrible for others. It’s vital to understand how they work and what they can do in order to assess
Iconifying Content – This tutorial will walk you through the concept of iconification — taking content on a page and applying CSS to transform it into a simplified, icon-sized preview of itself.
5 Prototyping Tips That Will Improve Your Process – So before we talk about specific prototyping strategies, let’s first go over the topic of design fidelity in order to set the stage for our later discussion.
12 Creative Effects Created using CSS3 Box Shadows – CSS3 box shadows is an unique and power-packed feature of the language which can be used to make high impact designs which can be used in various browsers.
Why visual consistency can make or break your web design – What this means for visual consistency – aside from reinforcing its importance – is that even minor lapses in consistency can be picked up by the user without them being aware.
Browser testing – In my mind, that word implies that a user of a particular browser should be able to accomplish the primary tasks on the website, whether that’s reading an article, booking a ticket, or buying a product.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
How to Create a Flat Styled Set of Writing Tools – The process will rely on using basic shapes (rectangles and rounded rectangles), which we will adjust here and there using the powerful Direct Selection Tool.
8 Rules for Creating Effective Typography – Today we’re going to discuss something that is both a hot trend and timeless art: typography. The basic rules outlined below will help you become more aware of how you structure and use typography in your designs.
Blogging, Social Media, Writing, Content Strategy, etc.
How to Create a LinkedIn Company Page to Promote Your Business – LinkedIn company pages help build brand awareness by providing a channel to promote your products and services to customers and prospects.
Website security is not a DIY Project – There are people who run their websites without paying attention to security at all. And there are people who run their websites thinking that a simple plugin, a single solution, will do everything they need for security.
A Walkthrough on Conditional Tags in WordPress: 1 to 13 – In this second part, we’re going to start reviewing 13 Conditional Tags, and in five articles, we’ll finish going through all 65 Conditional Tags that are documented in the Codex.
4 Crucial Components to Optimizing Page Load Time On Your Website – I’m presenting you some of the effective practices that will help you tweak the loading time of your website and offer a lightning-fast surfing experience.
Are You Using Pre-Made Layouts? – Fast page loading, coupled with ease of customization, are significant website development time savers. Not to be overlooked however, is the importance of having a pre-made, easily customizable, layout at your fingertips.
How to Become a WordPress Professional – and Tips Based on Experience – Clearly, a career with WordPress isn’t just for bloggers or developers. Whether you’re a designer, marketer, educator, content creator or you like to bury yourself in code, there are WordPress opportunities that could work for you.
Build An Advanced Notification System For WordPress – In this article we’ll show you how to let your website’s subscribers decide when they want notifications, and linked to a particular location.
How to Build Your Own #WordPress Contact Form and Why You Should – There are several ways to get contact forms into your WordPress website. You can use a plugin, you can use templates if they’re built into your theme, or you can code your own as a child theme into any theme you want.
Creating Custom User Roles in WordPress – Through this post, I would like to provide a brief introduction on user roles, and will explain the process of how you can create custom roles based on your needs. Also, you’ll come to know why you need to create custom roles.
Methodologies to Make Your WordPress Site Mobile-Friendly – Sites that are not optimized for the small-screen displays will act as a barrier for their owners – much of the content or the entire website will need a revamp.
In Defence Of WordPress – The internet is verbally attacking WordPress again. I read a lot of hate towards WordPress for its latest security vulnerabilities that have become public. What I don’t see is praise in how those updates are handled and distributed to its millions of users.
Make the Footer Responsive in a WordPress Theme – The footer in WordPress, or for websites in general, is one of the least used pieces. In this article, we are going to see how we can make the footer responsive using media queries.
Standing Tall in the Face of WordPress Security Scares – Everything and everyone is vulnerable to some degree. But here’s the thing: In large part, both the WordPress core team and larger developer community stepped up big-time during the recent issues.
Search Engine Optimalization, Conversions, Analytics, etc.
Top 7 SEO trends you need to follow to succeed – In the SEO industry, most things aren’t evergreen, and most things end, or are changed to some degree. Keeping up with the current news and trends has become a part of our everyday lives.
The 7 Most Common SEO Myths Debunked – SEO can provide a huge benefit to entrepreneurs – even if the results aren’t immediate. For those that are still hesitant and come up come up with countless reasons to not try it, I am going to prove they aren’t true. Here are the top seven objections debunked.
Everything you need to know to get started – With Analytics, you can easily track the overall success of your website and digital marketing campaigns. With a little bit of reading and a good bit of practice with it, you can understand Analytics in no time!
CSS Mega Dropdown – One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. We’ve been working on a similar concept, a responsive mega dropdown component with sub-categories.
20 Useful CSS Snippets for Responsive Menus – The following responsive code snippets are perfect for any type of layout. You’ll find vertical and horizontal navs with dropdowns and slideouts and all kinds of animation effects.
Animated Page Transition in Ajax – We’ve been playing around the idea of replacing the refresh of a web page with an animation, that takes place while the new page content is loaded using Ajax. We used the pushState method to manipulate the browser history.
Freelance, Business and Workflow Related Stuff
Common Freelance Mistakes Web Designers Make – In this article, I’d like to share the most common freelance mistakes web designers make (including myself), so you might avoid them and save yourself time, money and stress.
13 crazy freelancing myths debunked – A lot of designers have wild misconceptions about freelancing and what it’s actually like. Despite what many people think, it’s not all fun and games and working in your PJs.
5 Questions to Ask Yourself Before Going Full-Time Freelance – The question, though, is whether your conditions are right for you to make the transition. Here are five questions to ask yourself before jumping into the full-time freelance lifestyle.
F*cking Brilliant, a great Read or just magnificent Tips!
Tools don’t solve the web’s problems, they ARE the problem – The web definitely has a speed problem due to over-design and the junkyard of tools people feel they have to include on every single web page. However, I don’t agree that the web has an inherent slowness.
The True Cost of Progressive Enhancement – That often makes it difficult for us to put hard numbers against the cost of not doing progressive enhancement and the financial savings of doing things the way we almost always do.
The psychology of simple – Find a way to use simple to your advantage and make your users or audience instantly comfortable. Think about what their expectations are and how you can leverage their mental shortcuts to create something that is simple, beautiful, and same same, but different.
The Sliding Scale of Giving a Fuck – Having an internal barometer for what’s important and what’s less critical is incredibly useful for helping others trust your responses to ideas and proposals. Not only that, but I’ve found myself now reading others’ internal barometers.
Meta-Moments: Thoughtfulness by Design – Ever had a moment on the internet when you’ve been forced to stop and think about what you’re doing? I call such experiences meta-moments: tiny moments of reflection that prompt us to think consciously about what we’re experiencing.
Instant Web – That’s my biggest takeaway from Instant Articles: we (designers and our clients) have to start tasting our work. Not just in our proverbial kitchen, but where our users actually eat the stuff.
The 10 commandments of good form design on the web – There is a trend in web design to show form labels only when a field is focussed. This can be cool on a simple form like a username/password form, but for anything longer it is probably a bad 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