.. 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.
High Performance Animations – We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.
A Guide to Web Components – Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements.
CSSDB: A Database Of CSS Libraries – A curated collection of great CSS, Sass, LESS and Stylus libraries.
An Introduction To DOM Events – As developers, we should understand how DOM events work, so that we can harness their potential and build engaging experiences. I will introduce the basics of working with DOM events, explaining how we can make use of them to solve common problems.
Syntax-Highlighted Code in HTML Emails in MailChimp – For me, this is a simple method that works well with MailChimp. If you’re creating custom HTML emails outside of MailChimp’s editor, you can probably do this using their CSS Inliner or a similar tool.
Multi-Line Padded Text – You also can’t simply apply the background and padding to a
<span> or an inline element. The left and right padding will only apply to the very first and very last line.
Beginner’s Guide to Ajax Development with PHP – The common use of Ajax in web development has created a dynamic yet fluid Internet. Designers often build mockups which incorporate Ajax-based elements such as lazy loaders, tabbed widgets, and other similar page elements.
Flexible Google-style loader with CSS – So, for a while I had noticed the nice sutble loader Google apps use and I was wondering if it would be easy to make with CSS and CSS animations:
In defence of pixel values in media queries – What if i told you that not only pixel values in media queries aren’t bad, but they’re actually superior to ems in certain cases? Why bother? Just use pixels.
Cutting down on vendor prefixes – I think there are a bunch of CSS properties that we can safely stop using vendor prefixes for, or at least considerably cut down on the number of prefixes.
.html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS.
Why Sass? – I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away! It took me a while to come around, but I’m sure glad that I did.
Caption Everything – This week I learned that Chrome (25+) features an experimental
webkitSpeechRecognition API designed to create voice-driven apps like Siri or Glass. It seems optimized for short commands, but I immediately wondered if this could be a solution to create on-the-fly captioning.
How to write simple, elegant CSS with Compass & Sass – Compass works like a framework for your CSS. When you’re working on a large project it’s easy for things to get out of hand and often finding things in your own CSS is a challenge.
Vertical Percentages in CSS – Using percentages on those vertical parts of a page are somewhat different in the way they are calculated, compared to other properties that take percentage values.Here are the rules for percentages on vertical items.
A Thought on HTML5 Geolocation – If you want to recognize user’s location, the Geolocation API of HTML5 helps to provide location based information or route navigation details of the user. Firstly, let’s understand the API and plot of the exact location in the Google Maps.
Using the HTML5 section element – The HTML5
section element is not a replacement for a
div. It’s easy to think it should be, because all the other structural elements that were introduced in HTML5 replaced all the
divs we used to use to denote those areas of a page.
HTML5: Using IndexedDB with WebGL and Babylon.JS – You’ll then find some explanations & tips on what you must pay attention to when you’ll work with IndexedDB. I will also share how and why we’re using it inside our 3d WebGL engine.
Usability, User Experience, Responsive Web Design, Mobile, etc.
Responsive Design is an Ethos – The ideal responsive design is a single-column, portrait layout with a maximum width of 800 pixels. No layout shifting, no desktop breakpoint, no hiding things on small screens.
An E-Commerce Study: Guidelines For Better Navigation And Categories – We invested eight months conducting a large-scale usability research study on the product-finding experience. We set out to explore how users navigate, find and select products on e-commerce websites, using the home page and category navigation.
World Class Expert Tips for Mobile Design – I’ve asked 11 extremely talented and experienced designers to share their best advice with Despreneur readers who are interested in this quickly changing business field.
Why we need responsive images: part deux – The post discussed the topic from the typical point of view: the impact on page weight. But serving large images and then relying on the browser to scale them has other downsides as well.
The Usability Of Your Website Starts With Its Content – We’ve compiled a few strategies that may help you realize the full potential of your website’s content. Although none of these ideas present a “complete” fix for your website, they can serve as an excellent launching point for your future success.
Designing Mobile Forms and Inputs – User friendly form inputs that encourage completion and submission are essential when designing an effective mobile friendly website. Today we will look into how you can design attractive and user friendly form elements and inputs.
Case Study: The Up Group Website Performance – Before moving straight into the codebase to see what I could glean from it I ran several tests to using some web page performance applications.
Scalable Web Design – It’s impossible to predict every twist that technology will take next and create future proof designs, but vectors are a pretty good preventative measure.
Prevent double breakpoint – When two media-queries overlap, it is a source of complexity and even bugs. How can we create two media-queries that follow each other and are totally exclusives?
Responsive images – end of year report – <picture> isn’t a viable option, browser makers don’t like the fact that it’s a new element that does the same as <img> (or what <img> should do if we were speccing it today), and that it depends on multiple nested children.
Experience Design is a Perspective, not a Discipline – Businesses don’t get the full return on their investment in design if the outcome is only a momentary emotional response from customers. Any long-term positive emotional response has to have a strong value component.
A Browser is a Phoney Phone – While it’s nice to resize down to the width of some popular mobile device screen widths it reminded me of some of the issues with relying on resizing a browser to test responsive designs.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Website Navigation – Mixing Good Design And Usability – Website navigation is something that is highly unregulated, allowing website designers to make navigation as simple or as complex as they so desire.
30 New jQuery Plugins Worth Taking a Look At – There are way too many jQuery plugins out there, and newer and better ones just keep coming out. In this roundup, we take a look at some new jQuery plugins that we feel are worth taking a look at.
Three stages of making wireframes – Creating detailed wireframes for every screen takes time, especially when you try to solve usability issues from the start. So we broke this process down to three parts.
How to Optimize Your Website for Speed and Performance – We already know the usual suspects of page loading, so let’s expand our brains, and go about different ways of optimizing the loading time of your site.
Laying The Groundwork For Extensibility – The Web has succeeded at interoperability and scale in a way that no other technology has before or since. Still, the Web remains far from “state of the art”, and it is being increasingly threatened by walled gardens.
How To Customize Google Chrome DevTools Theme – We are going to show you how to find a theme you can opt for, and get it installed, changing the default theme colors of the Chrome DevTools.
Good Font, Bad Font: 5 Ways To Tell The Gems From The Junk – We’re going to look at 5 key rules for selecting an ideal typeface for any project, and how to determine if that font you think is amazing may not be so great after all.
The CSS Standards Process – How does a new CSS property get standardized? Who makes the decisions? Why should I care about the standardization process? What’s the deal with airline food? I’ll be covering that, and some more in this post.
What Your Visitors Are Looking for in a Tech Website – Make sure your site has all the important specs for any tech product, offers pictures of every product from multiple angles, and provides reviews from staff who’ve tried the product, and you’ll become the go-to site for tech purchases.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Introduce your Graphic Design Skills to the Audience – Being a graphic designer take different flavors as the people need to work with letters, color, patter, illustrations, information, to create everything from reports to logos, maps to book covers, and much more.
5 Branding Mistakes You Didn’t Know You Were Making – As more professionals begin to accept the importance of maintaining a personal brand, the definition of personal brand becomes more muddled. Here are five things you think are building your brand, but are actually mistakes.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
How to dominate at blogging – The world is a richer and more fulfilling place when all the sleazy salespeople are thinly masked as content creators. Let’s all win at blogging together!*
Why I won’t get a Google+ Custom URL – I’ll also do it as a reminder, that Google+ is not a place I own, it’s a place Google is kind enough to let me visit and have some limited activity, but they can always kick me off or ask for an (unspecified) rent.
The Benefits of Blogging: Why Businesses Do It, and You Should Too – If you’re looking to start a business blog or get more investment for one you’ve already started, the reasons above are a great place to start arguing your case.
7 Effective Tips on How to Create Interesting Website Content – You only have a few seconds to engage your audience and have them stay a while and come back for more. This is why it is a good idea to ensure you are creating compelling headlines, interesting writing, and even awesome images.
The Top Five Social Media Marketing Mistakes and How to Fix Them – Even large businesses with expert marketers on the job make rookie mistakes when it comes to social media. Here are the top five social media marketing mistakes that you need to watch out for.
Customize Your Own WordPress Theme Through Functions.php – You can use functions.php file to extremely change the features and aspects of your wordpress theme instead of using plug-ins that sometimes are malicious and can cause many inconveniences to your site.
7 Ways To Improve WordPress Search (Semantic, Partial, Relevance) – There are scripts and plugins you can take advantage of to improve your site’s search feature and save your visitors time when they are looking for things.
Remove Blog Prefix For Custom Post Types – This is a problem I’ve seen a couple of times and it sometimes tricks people out of using custom post types in WordPress.
Scheduling Events with WordPress Tutorial – Scheduling Events in WordPress is basically running a Cron, just simplified by WP. There are several functions available as tools for this process, and here we’re going to take a look at three of them.
10 cool things you can do with your functions.php files – Many designers don’t use it much because it is more intimidating in terms of code, but the functions.php file might just be the most powerful theme file in WordPress.
6 Essential WordPress Tips for Beginners – These tips will help you create an attractive website using WordPress, but most importantly – a functioning website too that works well and does it’s job.
Search Engine Optimalization, Conversions, Analytics, etc.
How to Evaluate and Overhaul Your SEO Strategy – After you perform your initial website audit, try to schedule a periodic review. Any time an algorithm update is released is a good time to review current strategies and tactics.
Hummingbird: What It Means For SEO, and What It Does For Google’s Status – But unlike with Penguin and Panda, Hummingbird isn’t concerned with just keywords or smart phraseology. To rank high with Hummingbird, the content has to be good content.
How to get up and running with Google Analytics in six steps – For this reason I chose the six most important actions you should take in order to get Google Analytics up and running properly. I tried to provide tips on both configuring and using the tool, as both are extremely important.
How to Phrase Blog Headlines For Maximum SEO: 4 Key Phrases to Try – One of the best ways to make sure you end up at the top of Google’s search results is to make sure that your headline fits the way people search.
SEO For Responsive Websites – Unfortunately, creating a responsive website alone won’t be enough to be properly optimized for search results. Hopefully, this audit has taken you beyond just thinking about mobile configurations when tackling mobile SEO.
How to Create Unique Block-Style Radio Inputs With jQuery – Input buttons are used in web forms where a user needs to select one option from a larger collection. This often happens with unique values like newsletter subscriptions, profile settings, and submission categories.
Elastic Stack: Elastic Dragging Interaction – ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically.
Amazing CSS3 Text Effects Tutorials – So today we are going to present a list of 30 Amazing CSS3 Text Effects Tutorials which will help you create CSS3 text effects easily and quickly and will help you master the art of creating text effects with CSS3.
How to Create a Subtle Dropdown Checklist and Menu – Today, we take a closer look at how we can better make use of dropdowns and how to create a drop-down list without using any images with just CSS and jQuery to do the smooth magic.
Animated Opening Type – In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS with pseudo-elements, CSS transforms and transitions.
Creating an RSS Feed Using PHP and PDO – So when might you want to add an RSS feed manually?Here you’ve got the step-by-step process to create anything from the simple, standard-compliant RSS feed – up to the more advanced.
6 Valuable Tutorials for Web Designers – From keeping an eye on everything that is new to always improving your techniques, you certainly need to be tuned to ways you can keep improving.
Photo Gallery with AngularJS and CSS3 – Today I will show you the process of creating photo slider with AngularJS and CSS3. The slider itself is not very complicated, but it will have a unique 3D effect when we turn the slides.
Freelance, Business and Workflow Related Stuff
CSS Wizardry Ltd. contract – This is the standard contract to which I—acting as CSS Wizardry Ltd.—operate. This contract can be amended and updated to be tailored to individual clients and projects, this is merely my boilerplate.
6 Factors to Consider When You Physically Move Your Freelancing Business – In this post, I list six factors that may affect your freelancing business when you move to a new area. How did the move affect your freelancing business?
10 Alarming Signs that Your Business is in Trouble – So what are some indicators that you are becoming irrelevant in a tsunami of change and what can you do about it? Here are 10 signs that your business is in trouble.
Five Tips: Online Reputation Management – You may have impeccable customer service, offer the perfect product, and have a staff of well-adjusted geniuses, but your reputation is still not solely in your control.
F*cking Brilliant, a great Read or just magnificent Tips!
Tetris & The Power Of CSS – Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors.
Hey, Designers: Stop Trying To Be So Damned Clever – In every Web product you create, you should prioritize effective over clever. As you probably already know, sometimes the equation gets reversed. During the design process, you can easily want to surprise and delight the user.
Articles that changed the way I work – Our Twitter streams and RSS feeds are flooded with valuable new articles every day. Here are the articles that have stuck with me and influence how I make things for the web.
– § –
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