.. 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.
Become a Command Line Power User with Oh-My-ZSH and Z – The command line is increasingly becoming a part of every web developer’s workflow. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line.
Crafting Easing Curves for User Interfaces – An easing curve is a line that defines the acceleration pattern on a graph. Easing curves are commonly referred by many other names such as Motion Curves, Timing Functions, Bezier Curves or just Curves.
Using SVG in Web Page Backgrounds: Diagonals and Patterns – An SVG pattern is pretty much what it implies: an area that holds its own drawing information, which is then tiled across a larger space. In many cases, it’s easier to draw the pattern first, creating the SVG from the “inside out”.
Testing SVG Support Across Web Browser Engines [Case Study] – But what exactly is supported by web browsers? Do all rendering engines display SVG files and their features the same way? And what about their advanced features like filters?
The ten commandments of sane style sheets – Blessed are those that follow these rules for they shall inherit sane style sheets. Amen.
Print Stylesheet Approaches: Blacklist vs Whitelist – The “blacklist” is a common approach to print stylesheets. We know that people probably don’t need to see our site navigation if they print out an article on our site.
Quantity Ordering With CSS – Quantity queries count the number of sibling elements and apply styles if a certain number are present. What if we combined quantity queries and the
order property to change how content is read according to how much of it there is?
12 Little-Known CSS Facts (The Sequel) – I’ve been collecting more little CSS tips and tidbits for a new post. Because we all know that every successful movie should spawn a cheesy sequel, right? So let’s get right into this year’s developer’s dozen.
Structuring CSS Class Selectors with Sass – Using Sass can help writing those selectors in a more modular fashion. through selector nesting and mixins, we can come up with
fancy crazy solutions to build the desired API.
It’s Time for Everyone to Learn About PostCSS – I’ve been using PostCSS on large-scale projects, contributing to and authoring plugins, communicating with the maintainers to learn more about what’s possible; and that’s all gone swimmingly.
Styling SVG <use> Content with CSS – One of the most common use cases for SVG graphics is icon systems, and one of the most commonly-used SVG spriting techniques is one that uses the SVG
<use> element to “instantiate” the icons anywhere they are needed in a document.
Viewport vs Percentage Units – These units – vw, vh, vmin, and vmax – are based on the size of the browser viewport. Because their actual size changes depending on the viewport size, this makes them great units for responsive design.
The Seven Stages of SVG – I’m writing this because I’ve been asked quite a lot recently about how to get into SVG, where to start and what’s the best way to learn. I first started messing around with SVG not that long ago at all.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
20 Responsive Newsletter Templates for Your Small Business – If you are regularly sending out emails to your users and subscribers, it is high time you gave a serious thought to responsive HTML emails.
Optimizing for Mobile Users – In this post we are going to examine 9 things that will help your site appeal to, engage, and convert your mobile visitors. We’ll take a look at how mobile optimization isn’t that different from desktop and explain a few tips.
The pro’s guide to responsive web design – Focus upon getting the basics right before you start worrying about exciting and advanced techniques. By taking things back to the basics, we are able to build a robust interface for everyone, layering on features when the device or user’s context allows.
The ARIA Roles Model Part 1 – What can you do when the native semantics of the HTML you use don’t communicate enough information or they don’t communicate appropriate information to assistive devices? You use ARIA roles, states, and properties to communicate the semantics instead.
Pure UI – Today I’m compelled to write about the benefits of a programming model it enables and its implications to the design and creation workflow. The fundamental idea I want to discuss is the definition of an application’s UI as a pure function of application state.
Performance: Showing Versus Telling – When discussing performance, we tend to focus on technical challenges. But the social work—getting our colleagues to care about performance—is in fact the hardest and most crucial component of performance optimization.
Amazon’s A-to-Z of E-commerce UI/UX Design – There’s more to an e-commerce site than throwing up a few items and a credit card form. In this article, let’s take a quick look at the practical takeaways from the UI and UX of the popular e-commerce site.
How to drive UX with AJAX – We began building sites as 100% AJAX nearly ten years ago and have since learned a lot about how to effectively employ it so that it improves user experience. In this article we’ll explore a number of the specific advantages, and some limitations, of this technique.
How To Use The System Usability Scale (SUS) To Evaluate The Usability Of Your Website – The SUS has been tried and tested throughout almost 30 years of use, and has proven itself to be a dependable method of evaluating the usability of systems compared to industry standards.
Well-designed interfaces look boring – The trend in interface design — away from the shiny and complex, towards the simple and boring — is only beginning. In my experience, it’s inevitable. Boring works.
Design Patterns for Mega-Navigation Dropdown Menus – Mega navigation menus are the typical solution to high-capacity link websites. Each of the following patterns have been hand-picked to match up with live examples online.
Webdesign in Common, Web Typography, Tools, Email, etc.
The future of flat design – Despite its sudden popularity, flat design is not just some fly-by-night trend. It’s a substantial approach to Web design that’s rooted in practicality, and necessity.
Ad Placement for Mobile – Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content.
Give me file hierarchies, or give me chaos – Passive management of file assets is okay for screwing around with iPads, where we’re mainly watching TV on Netflix or obsessive-compulsively checking the popularity of our Instagram uploads.
5 rules to better design – It’s often echoed: don’t design for yourself, design for your users. Remember: Keep the experience clear & consistent. Use conventions that are already familiar. And make sure all users have access from anywhere.
The Characteristics of Minimalism in Web Design – So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed.
Web Design is NOT Dead, You’re Just Talking About it Wrong – Everything is designed, even things you as a user do not think about. With recent innovations in efficiency, speed, accessibility, theory, strategy, and code, web design is still a vibrant part of experience design.
The Definition of Layouts in Web Design and When to Use Them – There are quite a number of layouts in web design. This article outlines the major differences in terms used to describe layouts in web design, and when each particular design calls for a specific layout.
The ultimate beginner’s guide to e-commerce – Luckily for you, there are lots of free or low-cost options e-commerce beginners can make a great use of. The tools listed below can bring good value to those who are short on e-commerce experience, time and staff.
Material Design is design science – Google released Material Design with Android L at its 2014 I/O conference and what became immediately apparent is that they had put a lot of thought into it. It wasn’t just a design language.
Design jargon explained: the Z-Pattern – Structure is the Z-pattern’s greatest strength, but it’s also its weakness; a distracting element out of place will derail the user’s pathway, and defeat the entire purpose of the layout.
40 Tiny Web-Based Tools & Apps for Working With CSS – We have accumulated a super-useful collection of our favorite little web-based apps and tools for when you’re working with CSS.
Web typography 101 – If your typography makes a text difficult or downright impossible to read, then it’s useless—no matter how amazing it looks. Which brings us to three key concepts in typography: tone, readability, and legibility
Do These 10 Things to Make Your Homepage a Success – The basic homepage design is so 2012. We can still boil the requirements for a successful modern homepage down to 10 things in this post.
How a Simple Landing Page Can Drastically Change the Face of your Business – Every site technically has a landing page, but why do only a few rise above the rest? When your landing page isn’t good enough, the bounce rates shoot up, conversion rates dip, and you’re left with a wilting business plan.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Create a Set of Apple Watch Icons in Adobe Illustrator – In this tutorial we’ll create a set of flat icons for Apple Watch that can be found on the original Apple Watch Home Screen menu by default.
A designers guide to creating logo files – A vector file can be scaled to any size without any loss of quality. This is because it’s built up from mathematically precise points. This is why a logo design should be created in vector format for the best results.
5 Typography Tips, From a Type Designer’s Point of View – Today we’ll be talking about some typography tricks that I find helpful and that I haven’t seen anywhere or that I’ve found the information available unsatisfying.
Blogging, Social Media, Writing, Content Strategy, etc.
Do you need a sidebar on your blog? – However, the best reason to include a sidebar is because it can contribute to better ranking on organic search engine results pages (SERPs). For instance, you can include links to your most recent and most popular posts.
An In-Depth Guide To Launching Your Own Podcast – Here, in one place, is all of the best advice, information and resources I can offer you. This way, you can spend less time on the technical side of setting up your podcast and more time creating killer content.
Stop Blogging Wrong! 3 Proven Content Types Your Blog Absolutely Needs – The type of content you publish on your blog is a core part of your blogging strategy, and a solid blogging strategy can’t do without the following three content types.
5 Ways to Extend Your Blog’s Reach and Grow Your Audience – You may not be a superstar with a giant audience. So how can a person with a relatively small following generate big buzz over a new post? Follow these five tips.
Build a Custom WordPress User Flow — Part 2 – In this tutorial, you will learn how to replace the WordPress registration screen with a custom page and to implement the registration with your own code, without violating WordPress’s design principles.
WordPress 101: How to Make Your Site Search Engine Ready – While I don’t want to focus too much on specific plugins in this post, I do want to highlight a lot of native WordPress and plugin settings that you can–and should–be implementing on your WordPress site.
How to Add a Character Counter to the WordPress Excerpt Box – The only problem is writing a custom excerpt that perfectly fits the space can be a challenge. Today, I’m going to show you how to add a character counter to the excerpt meta box in the backend of WordPress.
12 WordPress Hacks to Save Time and Power Content – From time management plugins to advanced mobile hacks, here are some tips to better leverage this awesome content management system. Put these tips to practice today and save time, create more efficient, sharable, and SEO-friendly content!
The Truth About Thesis.com – On July 8, 2015, I lost a legal battle against Automattic over thesis.com, despite owning the trademarks for Thesis and Thesis Theme in the website software space.
Learn How Easy it is to Use WP Pre-made Layouts in Your Projects – A pre-made layout can provide the perfect baseline for your web design project. It is a conceptual design whose individual elements are completely editable, making it a tool you can build upon, by taking advantage of its total flexibility.
Search Engine Optimalization, Conversions, Analytics, etc.
Here’s How to Create a Modern SEO Strategy That Works – The days of “weird” and black/grey hat SEO actually working are pretty much over. The new SEO millennium is all about tactics that actually make sense.
GSAP + SVG for Power Users 2: Complex Responsive Animation – This is the second article in a series about the GreenSock Animation API and SVG. Today we’ll briefly explore some new GSAP features, and then go further and create a responsive complex animation from start to finish.
20 Useful CSS Graph and Chart Tutorials and Techniques – The CSS based charts or graphs are quite simple to create and generate static harts and we could also style them according to our requirements.
Freelance, Business and Workflow Related Stuff
Guidelines to Writing an Effective Web Design Proposal – Writing website proposals is boring. There are no two ways about it, but they’re a necessary evil. The proposal is the final push before our client signs on the dotted line.
10 Pro-Tips to Boost your Confidence as a Freelancer – Have you got big plans for your freelance career — but nothing’s happening? Fortunately, there are plenty of concrete things you can do that should help you leave the fear behind and move your freelance career forward.
How to use design thinking in your next project – “Design thinking” is really just another way of saying “problem-solving.” In this post, we’ll walk you through how to put design thinking into practice so that you can drive your project forward.
As a Designer, What Is Your Unique Selling Point? – Designers can harness the power of the USP when marketing themselves. We all know that creative professionals are infamously bad at promoting their own work, but by utilizing a USP, it makes the job that much easier.
Never make another cold call and still get new business – The reality is that creative businesses don’t market themselves consistently. More importantly, they themselves are not clear on their target audience or their own position in the market.
Why Quality Over Quantity Isn’t Entirely True for Web Design – Next time someone critiques your work, don’t take it personally. Instead, take it as a challenge to experiment more and iterate to make your design even better.
The Asset Handover – When working in teams made up of designers and front-end developers, there can be a lot of frustration and confusion when it comes to handing assets over from one team member to another.
F*cking Brilliant, a great Read or just magnificent Tips!
On being overwhelmed with our fast paced industry – Web tooling is changing at an extremely rapid pace right now and there is a sense of exhaustion, being overwhelmed and anxiety of becoming out of date. “Why is this stuff moving so fast?” cry the developers.
The Front-End Developer’s Dilemma – We need to have an expansive and evolving baseline understanding for what front-end development encompasses and that the meaning of *development* may shift from time to time or even project to project.
Avoid these 5 things when building your design portfolio (Part 1) – I’d like to share the 5 most common mistakes designers make when designing their portfolios. Keep in mind, these things are always relative depending on what you want to achieve.
Good Design is as Little Design as Possible (Part 10) – The following is the last in a ten-part series exploring legendary industrial designer Dieter Rams’ ten principles for good design as they relate to digital products.
The full stackoverflow developer – Full Stack Overflow developers work almost entirely by copying and pasting code from Stack Overflow instead of understanding what they are doing. Instead of researching a topic, they go there first to ask a question hoping people will just give them the result.
Why Web Pages Suck – The future for most publishers is likely that of pure content production only, save for the few who are destination sites capable of selling native advertising in stream (or selling subscriptions).
– § –
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