.. 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 Complete Guide to Flexbox – For more informations about how to mix syntaxes in order to get the best browser support
The new srcset and sizes explained – What we do with
sizes is, we tell the browser which sources, aka files, it has at its disposal and which width they have. Then we also tell the browser how wide the image should be displayed at any given viewport width.
Don’t Name Your Inputs ‘action’ or ‘submit’! – Most browsers have a bug that isn’t really a bug. Specifically, if you assign your
input tags a
id attribute of “action” or “submit”, you can cause some very well hidden bugs.
How to enable compression and gzip for page speed – Compression of your HTML and CSS files with gzip typically saves around fifty to seventy percent of the file size. This means that it takes less time to load your pages.
Animating Images With CSS Keyframes – Keyframing is such an incredible facet of CSS and I feel we’re only really scratching the surface as to what’s possible. One thing to note is it can be difficult to pull-off the effect on responsive images (i.e
width:100%;) because you need to position absolute elements inside the wrapper.
Parallax Done Right – Getting great performance with parallax is tough. Parallax has become, for better or worse, an increasingly popular web trend. The first parallax site I ever saw was Ian Coyle’s BetterWorld for Nike.
Animating Background Colors – Today I’m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, tablet, and even mobile devices.
Using the :target pseudo-selector for alternative layouts – I really like the
:target pseudo-selector. It enables you to style the target of a so called skip-link. But you can also use it to create a completely different layout.
Understanding Angular.js services the easy way – The three different methods have different use cases, but to reiterate are all going to be singleton methods that you can inject anywere else that you can inject things in an angular app.
Hover-crafting – Hover animations are a site design element just like typography and color, so it’s important that designers take ownership of this step. Not only do hovers add to the look and feel of a site, but they also add an extra layer of usability for users with a mouse.
css diff – CSS is the worst because it blocks page rendering. The bigger it grows, the more it blocks. And bigger is what CSS becomes if left unattended, as anyone who has worked on any project for more than a few days or with more than a few people can confirm.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
40 Tools And Resources For Creating Responsive Website Layouts – With these tools web designers and web developers can easily create some amazing and responsive website layouts because you can directly connect these tools with responsive web design, handling CSS and other typical features.
Can Email Be Responsive? – Still, email design is an outrageously outdated practice. Remember coding before web standards became… standards? Welcome to the living hell of email design. But coding an email doesn’t need to be a lesson in frustration.
Don’t Wait on Responsive Images – So yes, keep pushing for a new image format or a new server-side solution. We could absolutely use those. But don’t let that stop you from making a better experience for the people accessing your sites today.
Adaptive web design: pros and cons – Adaptive design is a lot more complex and expensive, but it’s the only way to reach the broadest mobile audience. That’s because responsive design uses CSS media queries, a relatively recent technology that is not supported by older mobile phones.
Designing for touchscreens – The touchscreen revolution is on its way and the Web is not prepared! It’s time to rethink your designs and consider these users as they will become the dominating presence.
Responsive Images Done Right: A Guide To <picture> And srcset – Today’s article complements Tim Wright’s article and explains exactly how we can use the upcoming <picture> element and srcset, with simple fallbacks for legacy browsers. There is no reason to wait for responsive images
Agile UX vs Lean UX, which should you choose? – UX, IxD, IA, UCD, CX, agile UX, lean UX, guerrilla research, strategic UX, emotional design… we’re swimming in the sea of strange phrases that abandon clarity in favor of self-aggrandizement.
Hierarchy of UX Needs – A user goes through the different states of motivation before caring for the next need. For product designers, it is a big pitfall to start focusing on the top level needs like aesthetics and personality before the reaching the other levels.
Accessibility: The Missing Ingredient – Most important, this hard work will yield a more usable product for all customers and a more readable codebase for developers. Let’s agree not to treat accessibility as the icing on the cake, but rather as an essential part of the mix.
Ten reasons we switched from an icon font to SVG – We went through the task of transferring an icon font to SVG files. I wanted to share why we did this along with some of the current limitations to SVG and how we got around them.
Five quick checks for your website’s accessibility – The guidelines and their supporting techniques are necessarily extensive and potentially intimidating, so as a relatively quick check into your site’s accessibility, why not try out some of these techniques?
Webdesign in Common, Web Typography, jQuery, Tools, etc.
What’s new for designers, May 2014 – What’s new for web designers and developers includes new web apps, plugins, frameworks, grid systems, educational resources, icon sets, blogging tools, mobile app tools, and some really great new fonts.
Using Small Caps & Text Figures on the Web – In this post I’ll talk about two such tools: small caps and text figures (also known as oldstyle figures). Both of them are employed in print all the time, but it is rare to see their use on the Web — largely due to the fact that the default fonts do not support them.
The (Sometimes Hidden) Meaning of Shapes – Sometimes a shape is more than just a group of connected lines. The use of shapes can be obvious or subtle and appear within images or as elements in a design. Here, we will look at common shapes used in design projects and the signals they may convey.
25 Free to use Jquery and CSS3 Image hover effects – We have compiled a list of free and amazing jQuery and CSS 3 image hover effects for you that can be applied in a variety of projects.
Advanced web typography: Kerning – The more future-proof, powerful, and safer way of turning on kerning is to use the
font-feature-settings property that I enthused about so much in yesterday’s post.
The freshest trends in web design and development – This list created specifically for developers and web designers brings some of the freshest resources for inspiration to give you a hand in your projects. In this list, you will find JS libraries, jQuery plugins, themes and the odd web design article to expand your horizons
10 pro tips to get people to trust your site – When I can explain decisions from that context, I find it’s a lot easier to get clients, managers and other team members on board with the direction I want to take. Based on my experience, here are 10 top tips for building trust through design.
Where to Place Icons Next to Button Labels – Icons and bullet points work similarly. Bullet points are effective because they draw attention from the rest of the text on a page. Icons are effective because they draw attention from the rest of the text on an interface.
6 Elements of Outstanding Homepage Design – That first impression probably left a pretty bad taste in your mouth, and prevented you from further engaging with that company’s brand. There are many aspects to a company’s homepage that impact whether or not a user has a great first experience.
10 Reasons Why You NEED to Launch Your Online Portfolio NOW – “Why do I need to create a portfolio? I’m doing well in my job. Why take the hassle and waste time compiling my previous work?” Here are a few of the reasons why you should start a portfolio website right NOW:
Colorful typography on the web: get ready for multicolor fonts – Will they make the web better, more beautiful, or will it add bloat and fragmented support? It’s hard to predict, but you can bet we’ll find an excuse to use them.
21 free tools for perfecting your portfolio – Today we bring you a compilation of web design resources that will help you in your quest of portfolio perfection. From start to finish, these useful tools are the proverbial bee’s knees of portfolio arsenal enhancers.
The Self-Service Web Design Movement and its Implications for Web Designers – For many, these types of platforms will save both time and money. However, web designers and developers might be asking themselves if technology has overstepped its boundaries.
Is Your Best Work For Yourself Or For Your Clients? – I recently heard someone say that you don’t get to do your best work for clients. Is it true? Can you not do your best work for clients? How exactly do you define and know what your best work is?
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
What’s The Difference Between A Font And A Typeface? – One of the major traps, when talking about type, is mixing up fonts with typefaces or treating them as synonymous. Many a typographic expert has haughtily corrected a beginner for mistakenly using the word font when he or she should have said typeface.
Designing for Print – There is also a sense of tradition and legitimacy that comes with the physicality of print media, so there remains a wealth of things to consider when designing for print. What do you want to achieve with your print design?
Speed up your Illustrator workflow – Whatever the project, having the ability to work efficiently in Illustrator means accomplishing more in your day. Accelerating your workflow doesn’t mean rushing.
Design Principles: Space And The Figure-Ground Relationship – Design is an arrangement of both shapes and space. To work more effectively with space, you must first become aware of it and learn to see it — learn to see the shapes that space forms and how space communicates.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
How to Become a Columnist: The Ultimate Blueprint for Guest Blogging and Syndication – With guest posting, an article might explicitly state that it was written as a guest post or you may need to read the author’s bio to see whether they are employed by the website or not.
The Big List of IFTTT Recipes: 34 Hacks for Hardcore Social Media Productivity – We use IFTTT in a number of neat ways, and there are loads of different options available through IFTTT for powering up your social media marketing.
Are You Making These 10 Mistakes On Your Blog? – The rise of the social network is just one major reason for you to take a good hard look at your blog and see if you are holding back its growth by making these common mistakes.
10 wp-config Tweaks To Improve Your WordPress Site – In this tutorial I am going to show you 10 quick edits you can make to your wp-config file to make your site more secure and make your life easier.
How to Manage and Delete Transients in WordPress – In this article, we will show you how to manage and delete transients in WordPress without going into your database. Transients API allow developers to store information in your WordPress database with an expiration time.
How To Rewrite URLs In WordPress – In this tutorial we are going to look at how you can use the built in WordPress rewriting API to create your own unique links for your website. WordPress will already use this for it’s own functionality when you select a new permalink structure.
How to Create a Stunning Custom WordPress Login Page – Creating a custom theme isn’t all that difficult with a bit of CSS and PHP. In this tutorial I’ll walk you through how to style your login page.
How to Create an Awesome Responsive Menu for Your WordPress Theme – Here’s five simple steps to add mobile-specific menus to your responsive theme and provide an awesome viewing experience for your mobile visitors.
Search Engine Optimalization, Conversions, Analytics, etc.
How A/B Testing Works and How to Use It With Google Analytics – There are a few services out there that allow you to perform these tests. There are paid options but Google Analytics is free and not too complicated to set up.
10 SEO Myths Reviewed – Myths in SEO run almost as deep as they do in Lock Ness and Area 51. Let’s have some fun and look at 10 of them today. By no means a definitely list, these still pop up.
Top Five Local SEO Myths — And Truths – Following is a list of five frequently heard claims about local SEO that I’ve heard recently, followed by their corresponding truths.
How to Have a Google Penalty Revoked – The routine that I describe in this article has worked for a bunch of sites now. Before you go any further, odds are, you want to know what upset the big G and why exactly you got that penalty.
Morphing Buttons Concept – Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.
Creating Simple Line and Bar Charts Using D3.js – In this tutorial, we focused on creating fairly simple bar and line charts. If you’re interested in experimenting more, try adding additional visualization techniques from the D3 library to the charts in this article.
Create a CSS card flip effect on hover – In this tutorial we’ll be looking at creating a card flipping transition using CSS transform, here’s a preview of of the finished product
How to Create a Social Sharing Bar Graph for WordPress – The result was a clickable bar graph that allows the user to quickly see which social sites are providing the most shares for a given post, along with a display of total shares.
Recreating the “Design Samsung” Grid Loading Effect – A tutorial on how to achieve the grid loading effect seen on the “Design Samsung” site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
Freelance, Business and Workflow Related Stuff
An Argument for Transparent Pricing in Web Design – With our pricing now openly listed on our website, we entertain far fewer clients outside of our target market, and we know that the leads we do receive have seen our prices, and are comfortable with them.
15 Reasons to Keep Your Company Small – 15 entrepreneurs weigh in on how sometimes smaller means mightier. Despite all the headlines about billion-dollar exits and IPOs, growing too quickly or too much is not always the most desirable outcome for a startup.
7 Ways To Get An Extra Sale Today – In order to makes sales at will, it’s important to understand who your target audience is. And if you don’t understand your prospect, you won’t sell him anything.
4 Big freelancing mistakes I’ve made and what to learn from them – Whether you’re a new freelancer, a freelancer-to-be, or a freelancer with a few (okay, a lot of) years under your belt, one of the most efficient ways to learn is from mistakes…preferably some someone else’s.
F*cking Brilliant, a great Read or just magnificent Tips!
I Only Work On Shiny Products – I think the shiny-only attitude is elitist, and leads to missed opportunities. These days, I only work on unshiny products. I focus on overlooked and underappreciated users who have crappy products and serious problems.
“Of Course” Design – Forget “wow” - Designers going for “wow” are too often leading with their desire to be recognized for an ability to innovate. You can’t conjure it. Instead, work to incorporate “of course” to your product. Your users will love the result, even if they can’t put their finger on why.
Why Scrolljacking is a Problem – Good interaction design makes the user feel like they’re in control. It doesn’t change up behaviors, especially default behaviors, just because it “looks cool.”
CSS Preprocessors and brain rot – Finally, I’d also say that if you’re still learning CSS, jumping into Sass is probably a bad move. Master the fundamentals of CSS first and then start using Sass to make you more efficient.
Seams – It’s a vision of a future where people can have everything their heart desires without having to expend needless thought. It’s a bright future filled with seamless experiences.
- § -
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