2013-08-24

.. it’s Weekend again, 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.

The last couple of months it was almost impossible for me to post new (main) articles here, due to the fact I’m swamped with loads of client work and some personal projects too. This year it looks like my agenda is fully filled already, so next months I won’t be publishing every week

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

SVG Fallbacks - There is a very clever technique by Alexey Ten on providing an image fallback for SVG. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.

The CSS Exclusions Module — Letting Your Content Flow - However, as is the case with css shapes, exclusions are going to change a lot about how we design websites and I think they’re worth a look.

Semantic CSS With Intelligent Selectors – In this article, we will explore an alternative approach to styling Web documents, one that marries document semantics to visual design wherever possible.

Responsive Content Using CSS Regions - CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout.

Comparing and contrasting ins, del, and s - Since the mists of HTML 2 we’ve been able to semantically indicate added or removed information using the elements <ins> and <del> respectively. While seemingly simple on the surface these elements have hidden depths.

10 Easy Image Hover Effects You Can Copy and Paste - Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

A Collection Of CSS Snippets To Create Interesting Effects - In this article, though, you will see CSS snippets that aren’t that common and solve things that your clients are asking of you and you probably don’t know how.

On citing quotations. Again - I propose that the definition of <cite> be reverted to include the real-world use for marking up names of those cited, and that the spec note that cite-inside-blockquote is one way to link a quotation with the work or the person being quoted.

16+ Reasons Code Doesn’t Work & How To Fix It – I always test code first to make sure it works however there are many reasons it doesn’t work sometimes for both myself and other people who use it even though it isn’t broken.

10 Useful Free PHP Scripts for Developers - We have gathered some useful free php scripts which will help you with your development tasks. The following php scripts are easy to install, configure and useful and will help you to achieve desired results rapidly.

JavaScript Object Oriented Programming(OOP) – Object Oriented Programming is one of the most famous way to do programming. Before OOPs there was only list of instructions execute one bye one. But in OOPs we will deal with Objects and how those objects t interact with one another.

 

Usability, User Experience, Responsive Webdesign, Mobile, etc.

The Ultimate UX Design of: Responsive Web Design Navigation - And though most responsive websites that I know have adaptable navigation components, they are usually poorly designed. Touch screen devices have different requirements and conventions when it comes to navigation.

What Happened to HD Web Design? – In this article, we will be sharing with you about how HD web design changed the world. To accomplish a great HD web design, it takes more work than the usual and it may also cost more than the usual.

Creating Page Load Waterfalls for Older Mobile Devices - With tools like Mobitest, WebPageTest, remote debugging in Chrome and Safari I can get a good level of detail for modern mobile browsers but I often want to test on older devices where the dev tools support isn’t as good or more commonly non-existent.

My six rules for mobile app design - If you have a couple of superfluous features on a web app they just get ignored. Mistakes on the web can be fixed in a few minutes or hours.

Speeding up mobile HTML5 experiences - In this article, we will cover the most important things you need to understand and do for speeding up your HTML5 experiences for mobile devices.

Here’s what you need to know about the future of gesture-based UI design – Gestures are becoming the most integral UI function on smartphones and yet most people aren’t using them to their full potential. We ask designers what they’re doing to improve user experience.

Layout Boundaries – ‘Layout’ is the process a browser undergoes to calculate the position and size of each element in a document before it can start painting pixels. The process of layout can be costly, especially on low powered mobile devices.

3 Parts of Good Visual Interface Design - Reduced to its fundamentals, good visual interface design seems to me to be composed of three parts, or requirements. How well each is met will dictate the quality of the work.

Responsive Design Makes Web More Readable – Responsive design, which has developed over the last three years in order for websites that improves the customer experience in mobile banking by making websites more readable.

Using Data for UX – Use data to guide your design decision processes but do not let data dictate. We work in an environment where even the smallest actions are quantifiable. Platforms such as Google Analytics, etc. provide insightful data on conversions, campaigns, et al.

Mobile User Interface Design Tips and Best Practices - In this post I choose to focus on some frequently committed mobile app design mistakes and attempt to provide some good tips and practices to help avoid those mistakes.

The Art of Balancing User Experience and Security – The World Wide Web is facing a growing concern of security breaches and phishing attacks, and that could put massive amount of sensitive information in the wrong hands.

30 essential UX tools - As with many things, the tiniest details can make the biggest difference in the user’s experience. In this post, I’ll introduce 30 excellent tools and services for creating websites with better usability.

Responsive Web Design is Solid Gold - I’m excited about where the web is heading and what we can do with progressive enhancement and responsive web design. Responsive web design: it’s solid gold, baby.

WebKit Has Implemented srcset, And It’s A Good Thing – As with all matters pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the signal in all the noise. Here’s what you need to know.

5 Easy Tablet Optimizations You Can Make on Your Website Right Now - For the time and resource challenged, here are 5 optimizations you can make to your website today to provide a better experience for your tablet users.

 

Webdesign in Common, Web Typography, jQuery, Tools, etc.

8 Tips for Print Designers Switching to Web & Digital Design - More designers are working across platforms these days, switching back and forth between print and digital projects. It takes a specific set of knowledge and skills to work effectively and efficiently in both environments.

Web apps: the future of the internet, or an impossible dream? - Web apps are being touted as the future of both desktop and smartphone applications, but with so many hurdles to overcome, can they really succeed?

Using GitHub Pages To Host Your Website - So you want to launch a simple website but don’t want to have to go through the dull process of setting up yet another hosting package. There is an easier solution.

The top 25 responsive design tools – Thankfully the web design community is up to the challenge. We’re seeing clever, thoughtful and downright innovative tools and resources emerging on a regular basis.

8 Tips For Creating Effective Calls To Action - It’s easy to get bogged down in using the same or slightly varied CTA’s which do not inspire your visitors. Below are 8 tips to help you avoid this, with some great examples of calls to action that work.

On the importance of web design – Hiring a web designer is more than likely the only way you will have a successful website. So let’s get into what all designers should be concerned with, and what a website owner has to watch for when choosing a web design company.

Design By Numbers: Typography - All it takes is an understanding of the components of good and functional design, and take it from me; the most important component of all is Typography.

Great Web Design is About Respecting the Fundamentals - Designers at times forget the fundamentals of design when they want their web design to come across as cutting edge, trendy, engaging and very intuitive.

60 free resources you really must try - Quality is essential if you’re to maintain a professional finish. Fortunately the quality of the resources available to us continues to rise and premium standard resources are everywhere.

10 Interface Typos You Don’t Even Know You’re Making – In this article, I’ll highlight the 10 most common user interface typos I see (as in all the time) and help you avoid them. When I say they’re typos you don’t even know you’re making, I’m not kidding.

Case Study: Redesigning The Folyo Landing Page - Folyo is a service that helps connect companies with great freelance designers. It had been stagnant for a while, so I decided to try and breathe some life into it with a new start.

 

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

Brand-identity Guidelines Free Template – Simple guidelines, tips, what not to do, colour and typefaces are all essentially packaged into one PDF that they can refer to later, or pass on to another designer.

10 Personal Branding Tips – Personal branding is becoming one of the most important topics among designers and entrepreneurs.If you want to start shaping your personal brand these 10 tips are definitely going to help you get going on the right track.

Useful InDesign Scripts And Plugins To Speed Up Your Work – But even the best applications lack some features. Luckily, Adobe realized this some years ago and opened the doors to allow designers to expand this beloved set of tools through plugins.

10 Amazing Illustrator Tips That Changed How I Design - I’ve put together a list of the top 10 Illustrator tips I’ve learnt over the years that have completely changed how I design. Hopefully you’ll learn a few new techniques too that will completely transform you every day workflow.

6 Branding Basics that Web Designers Can’t Ignore - Branding is important for web designers. Not only must you develop a recognizable brand for your own web business to stay competitive, but often clients expect branding help from their designer.

How to Not Suck at Typography Like a Designer-convert Doctor – A bad typography is as bad as a stale bread. It’s there but you can’t eat it. It’s there but you can’t digest it. The reader must understand the message before anything else.

10 typography terms that every designer needs to know - Learning more about typography requires getting to grips with a whole heap of jargon. Here are some key terms that will be thrown your way, and what they mean.

 

Blogging, Social Media, Writing, Content Strategy, Email, etc.

7 simple and proven tips to increase your blog subscribers – These are some fairly simple hacks that you can implement without too much fuss, which should boost your subscriber numbers.

Why You Should Write Short Articles, Too - Online content does not need to be lengthy in order to be substantial. Stop writing once you’ve fully communicated your point — don’t keep writing for the sake of getting to some prescribed word count.

Creating Authority Blogs and Smart Passive Income (Panel Discussion) - Many people strive for the internet dream of making money while you sleep, a truly passive income. Many online “gurus” will say: if you want to be rich, then just setup a website and start blogging.

How to Use Tumblr for Your Business – Do you want to let a new set of customers share your brand or product on this social platform? If so, keep reading as I reveal how to use Tumblr for your business.

Three Essential Tools for Content Planning - The good news is that I’m going to share with you three tools you can start using today to bring big changes to how you plan content for websites.

How to Drive More Traffic to Your Blog Posts From Social Networks - Do you want people to click on your blog posts when others share them on Facebook, LinkedIn and Google+? Is your blog optimized for the best visual display when people share your content?

 

WordPress

Create a Shortcode to List Posts With Multiple Parameters - I’ll show you how to create a simple shortcode to list all posts of a custom post type, and then I’ll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.

A Look at the WordPress HTTP API: Saving Data From wp_remote_post - In this final article in the series, we’re going to revisit the plugin that we started with the last article and begin improving it a bit.

How to Create Category Templates in WordPress - Have you visited a site where each category has different layout? In WordPress theme development, it is a common practice to use different templates for categories, tags, custom post types, and taxonomies.

WordPress co-founder on keeping up-to-date – Mike Little has a special warning when it comes to fishing around online for tutorials and resources on WordPress: be picky. He says a lot of good and useful articles, advice and examples are now outdated because WordPress has moved on.

 

Search Engine Optimalization, Conversions, Analytics, etc.

Google now prioritizes speed over content – Google is well past all the trickery and all the surfing and has finally been able to boil it down to the essentials: Users must get what they’re looking for without needing to wait.

 

Tutorials

Creating the New Google Play’s Multi-Level Navigation from Scratch – With the smooth animation and how they let users peek at the root-level menu by simply hovering a back button, I decided to build a similar navigation menu from scratch using HTML, CSS and jQuery.

Create a Path-like Menu Button with WheelMenu.js - About a year and a half ago, Path released the new revamp version that was equipped with a unique menu button located at the bottom left of the app.

Exploding Blocks with CSS and Javascript – Ever wanted to make your HTML blocks explode when it’s clicked or touched? Well I did, and today I’m going to show you how I went about doing it. We’re mainly using CSS, but that’s all being run by Javascript just for ease.

Use CSS transitions for link effects - by adding neat responses to hover and focus we can introduce just the right amount of surprise and delight when the user initiates the sequence to enhance their experience without CSS tricks getting in the way.

How To Make a Custom HTML5 Select Menu with Selectize.js - In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields.

 

Freelance, Business and Workflow Related Stuff

How to Take Back Your Time & Increase Your Productivity - Unfortunately, we all have many demands on our time. Often, it’s the little things that slow us down the most–things we might not even think about.

Good and Bad Reasons to Become an Entrepreneur - Even given that context, it is notable that we all said you “probably” shouldn’t be an entrepreneur, not that you definitely shouldn’t.

The Perfect Client is Not So Perfect After All – In short, communicate with your clients effectively. In doing so, you’ll create the real perfect client.

Generalizing Your Skills Will Never Make You a Design Specialist - Today, we’re going to look at why that is, and what freelance designers can do instead to boost their desirability to potential clients.

 

F*cking Brilliant, a great Read or just magnificent Tips!

The potential of personal projects - In essence, personal projects give you the opportunity to do exactly the sort of work that you want to be doing. It can even lead to opportunities to do that sort of work on a professional level.

On critical JS and progressive enhancement - ”It’s time to consider that JavaScript can be used as a critical component of any web app. Progressive enhancement slows down evolution.”

Stop reinventing the scrollbar – We don’t need page numbers on the web, you can scroll your way through a piece of text at the flick of a finger. But how do you know how far through an article you are?

Where Does Creativity Come From? – Let’s start from something that we can all be unanimous on i.e. music. It is common the knowledge that music gets remixed, often the remix is more popular and even better than the original.

- § -

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

 

Show more