.. 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.
Custom, Scriptless, and Trackable Social Media Share Buttons – I created some custom social media share buttons that were lightweight, scriptless, and included tracking information for google analytics.
The Art of Debugging – Learn every tool that’s available to use, use them as you need them, enjoy bug bustin’ – it’s certainly more fun pounding the keyboard and working on a 6 month feature drive.
Reverse Text Color Based on Background Color Automatically in CSS – I think this little demo helps us recognise how useful the
mix-blend-mode property can be. There are going to be all sorts of instances like this in the future where interfaces can reveal information in ways we’d never have thought possible before.
Circular Images with CSS – In this tutorial, we’ll go over some CSS techniques for rendering circular
<img> elements. The main CSS property responsible for the effect is
5 Things You Might Not Know About the CSS Positioning Types – These days front-end developers can build complex page layouts by taking advantage of different CSS layout techniques. In this article, we’ll have a closer look at a few little-known things related to the CSS positioning layout method.
Strapless – It’s not that we have any issues with Bootstrap specifically. It’s a solid framework for rapidly prototyping an idea before deciding if it’s got legs. It’s also a great tool to learn from when considering your own pattern library.
Diamond grid layout with Sass – I’m lucky enough to work with some awesome designers, and for a new project, they came up with a diamond-based grid layout. The initial mark-up for the grid was pretty simple.
Native CSS Scroll Snap Points – There are many popular plugins (fullPage.js, jQuery.panelSnap, jQuery Scrollify etc.) which provide such functionality. Can you imagine how easy would be creating such effects using CSS only?
A Look Into Proper HTML5 Semantics – There are many different front-end development techniques that enable developers to achieve a semantic page structure. This post will provide you with a brief intro into semantic HTML tags and the concept of the document outline.
How To Work With SVG Text – SVG text is accessible. You can select it, copy it, and paste it elsewhere. It can be read by screen readers and you can search for it in search engines. It’s rendered like other graphic elements so you can do things like add strokes and fills that you can add to shapes, lines, and arrowheads.
html element, or a property within the
Space Yourself – Whenever dealing with text, we usually rely on browsers to be our typesetters, since that is so much more convenient. Many vestiges of physical typography remain today, and some of them are still genuinely useful. This is a story of physical spaces in the digital world.
Front-end Handbook – This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it.
Pseudo-comments in CSS (Or, How Browsers Parse Styles) – The CSS spec does not mention it, but you can mimic C-style and/or Unix-style line comments in CSS files (with some caveats). The present post examines them in further detail.
PostCSS Deep Dive: Preprocessing with “PreCSS” – In this tutorial you’ll learn to use PostCSS as a pre-processor, in the same way you would use Stylus, Sass or LESS. There are two main ways you can go about using PostCSS for preprocessing.
Parallax With AngularJS – For my day job I primarily work with Angular and I was curious to see how the whole dynamically composed SVG thing would work out with it. So, instead of
React + SVG this time it is
Angular + SVG.
Using Quantity Queries to write content-aware CSS – It’s so exciting to discover a feature that is both very useful and can also be used on a live website without large spoonfuls of graceful degradation. Quantity Queries are a way of reacting to differing levels of content with pure vanilla, well supported CSS.
ServiceWorker: Revolution of the Web Platform – Sitting between humans and websites, ServiceWorker puts you in the driver’s seat. When a ServiceWorker is installed, you’ll be able to deliver responses to requests from the service worker, without necessarily hitting the network.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
How to Build a Website Style Guide: Lessons from Working – Some style guides focus more on design; others on development. Many style guides also formalize the best practices and processes for how the team should work together.
Ensure High Contrast for Text Over Images – If you place text over a background image, make sure it’s readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site.
Object-Oriented UX – OOUX is not a new end-to-end process; it’s a new ingredient to add to your current process. It adds clarity, simplicity, and cohesion—to how you design, and to the products you release into the world.
Performance budgets in action – Performance budgets are a great way to ensure you deliver an enjoyable, fast user experience. But they only work if you pick the right metrics and set the right thresholds. In order of preference, here are the metrics we recommend you benchmark your user experience against.
Fixing the UX of hyperlinks – User Interfaces should be predictable. Users should be aware of the consequence of the actions they take, no hidden surprises. How did we miss such a simple UX rule when implementing the anchor tags?
Which UX Deliverables Are Most Commonly Created and Shared? – UX professionals produce a wide variety of deliverables: 11 different deliverable formats were used by at least half the respondents in our study. Deliverables rated the most effective varied substantially by target audience.
Webdesign in Common, Web Typography, Tools, Email, etc.
Keeping your ever-evolving brand consistent: the digital style guide – For this post, I’m going to focus on the importance of creating a digital style guide when creating a consistent representation of a brand, as we did with Devbridge.com
Generic TLDs & How They Change The Web – In this post we will trace why these new domain names have been introduced, how they change the web, and if it’s worth to purchase them for our websites.
3 tools to power your modular design review process – Clients and designers don’t always speak the same language. But with these three tools, you can translate your clients’ brand and vision into concrete visual styles that not only help you get approval, but also speed up your development process.
10 Expert Tips For Designing With a Blurred Background – We’re not talking about salvaging a bad photo by slapping a blur effect on it and calling it good enough. Instead, we’re going to look at intentionally choosing or creating different types of blurred images to enhance our designs in specific ways.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
30 Illustrator Tutorials for User Interface Designers – Vector workflow is one of the best methods for creating full-scale website mockups, icons, mobile apps, and really anything related to interface design. Each of the following tutorials focuses directly on interface design from the perspective of vector shapes.
Illustrator Tutorial: Create A Footbal Helmet – The tools that I will be using in this tutorial include: Pen Tool (P), Ellipse Tool (L), Rounded Rectangle Tool and Direct Selection Tool (A). I will also be using Pathfinder panel along with the Clipping Mask and some effects (Feather, Gaussian Blur, Drop Shadow).
How to Colourise an Old Photograph in Adobe Photoshop – Colourising a sepia or black-and-white image can seem like a real challenge, but although it takes time and patience, it’s probably easier than you think. Here I’ll take you through colourising a photograph in Adobe Photoshop.
Blogging, Social Media, Writing, Content Strategy, etc.
How to make a website more conversion worthy – Interactivity online is expected. Being interactive gives readers more reasons to return. It gives you multiple ways of delivering your content, and allows users to develop content and contribute to the message.
5 Ways To Improve Engagement On Your Blog – In fact only a tiny percentage of blogs have a regular and expanding readership, and it can be quite disheartening to pour your heart and soul into a blogging project only to see it flounder and fail to attract people.
13 Tools To Take Your Blog Writing From Good To Great – Every writer experiences the challenge of making their content go from good to great. Editing your content is important to help you catch any mistakes and improve your writing skills specific to your readers.
How to turn your followers into course buyers – “There’s no drawback. Make something. The worst that can happen is that you create something. If no one signs up for it, that doesn’t mean it’s a bad endeavor. You’re putting something out in the world. I see that as a huge success.”
Mastering WordPress Roles and Capabilities – In this article, I’ve presented an overview of roles and capabilities usage in WordPress. Although its complete API allows us to do almost whatever we want, the relation to the database remains the main concern.
Using AJAX With PHP on Your WordPress Site Without a Plugin – Ajax is cool. It enables websites to load content into various elements without refreshing the page. This may not seem like a huge feature list but it allows us to do so much.
WordPress Update Could Make Life Easier for 20 Percent of the Internet – The new WordPress REST API is already allowing interesting new applications to be built on WordPress content. In layman’s terms, an API is a bit of code that lets others have access to a database on the web.
How We Lost $30,000 Over the Last 6 Months Due to a Single Line of CSS – Have you noticed that not a lot of theme store businesses change hands (at least as far as the public is informed, and apart from WooThemes)?
Common WordPress Theme Issues (And How To Fix Them) – Occasionally plugins and themes don’t get on or something needs a little tweak to get it working properly. These are the most common WordPress theme issues – and how to fix them.
How I Cleaned Up My WordPress Site After It Was Hacked and Blacklisted – Today, I’m going to show you the process I used to clean up my site so you can fix yours, too. If you’re not too keen on DIY fixes, that’s okay because I’ll also show you some great plugins that can also do the job.
3 Ways to Create a Mobile App with WordPress – In this article we take a deeper dive into three of the options available, discussing the pros and cons of each; App Builders, Custom Hybrid Apps and AppPresser
Using and Caching Third-Party JSON with WordPress – PHP (and WordPress) can totally make requests to third-party content just like an Ajax request can. In fact it’s even easier, since there aren’t cross-domain restrictions and JSONP type stuff involved.
Search Engine Optimalization, Conversions, Analytics, etc.
Link building from a holistic SEO perspective – Link building just isn’t easy. That doesn’t mean it’s rocket science, it means it takes a lot of work. In this post, I’ll discuss our ideas about getting more backlinks: link building from a holistic SEO perspective.
The Ultimate Blog Writing And SEO Checklist – Writing a blog post should be entirely about helping your readers. Even though you are ultimately promoting yourself, your business, or your brand, self-promotion should take place behind the scenes.
Project Cards Template in CSS and jQuery – Today’s resource is inspired by the Primer app, which makes a great use of cards and motion throughout their design. We applied similar effects to a portfolio template, with expandable items and a bold, full-page navigation.
Blueprint: Page Stack Navigation – The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack. When clicking on a menu item, the respective page comes up.
Freelance, Business and Workflow Related Stuff
Guidelines For Better Client Feedback on Web Design – A LOT of designers insists on using words that are mumbo-jumbo to the ears of their clients when talking about design solutions. In this article, I’ll share four guidelines that will help you get better and more actionable client feedback.
F*cking Brilliant, a great Read or just magnificent Tips!
The Value of the Designer Who Codes – Every person on lead designer Rebekah Cox’s team is also an engineer. The design doesn’t happen in Photoshop. It happens in the text editor, in code.
Design Systems – So how do we build designs that scale proportionally and relatively for the myriad of combinations between devices and font-sizes that people choose to view the web on?
Development & Design: Bridging the Gap – While creating digital experiences I have noticed a certain lack of understanding between software developers and UX designers. In this post I’ll talk about strategies I’ve used to bridge this gap.
Code Machines – Both designers and developers will remain essential to create something truly unique. By understanding what the user really wants. By creating interfaces that really work. There is a lot of work to do.
Let’s Encrypt is Trusted – This is a significant milestone since it means that visitors to websites using Let’s Encrypt certificates can enjoy a secure browsing experience with no special configuration required. Both Let’s Encrypt intermediate certificates, received cross-signatures.
Choosing a CMS Your Organization Will Love – You can now reengineer the vendor selection to put the true needs of your organization at the center of all discussions. And once you do, adopting new software will no longer breed uncertainty, risk, and anxiety, but help your organization become more agile, focused, and resilient.
– § –
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