.. 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.
Turning the Querystring into a JSON object using JavaScript – It turns out it’s actually quite easy to do this using the JSON object that is available in all modern browsers. To actually do this, we still need to turn the query string into and array.
Data Validation – How to Validate Forms using HTML5 – Today I will tell about data validation again. HTML5 specification bring us many interesting, and one of useful function is browser-based form validation. Of course, not all browsers support HTML5 (even IE9 not support it yet)
SASS Variables for Selectors – I’ve been getting friendly with SASS as Crowd Favorite has standardized on that for our CSS pre-processing. Today I was excited to learn I can use variables for selectors as well as for property values.
Custom Elements: defining new elements in HTML – Custom elements give us the tool to extend HTML’s vocabulary, teach it new tricks, and jump through the wormholes of the web platform.
CSS Clear Fix – Clearing CSS floats is just as important to creating CSS structures as anything could be. This excellent CSS clear fix uses :before and :after pseudo-elements of the container to perform the clear.
Starting to Write CSS – This post is like conclusion of journey in the world of CSS. Many people say that writing CSS is not exactly programming. I’ll disagree and will say that it’s equally interesting and challenging.
Refactoring to Backbone.js – Deciding mid-stride to adopt a JavaScript application framework exposes many difficult decisions. What should be targeted first? How does one deal with untested, legacy code? It can make transitions a scary, tedious process.
Homeopathic HTML solutions – What we don’t need is more experiments proving things can be done in a technology that wasn’t meant for them. These can be inspiring and are fun to do, but they don’t help the cause in the long run.
The CSS Grid Layout Module — Flexible Structures for Content - That native css is on its way in the form of the CSS Grid Layout Module. Browser support, while hardly great, is a little better than I expected. IE10+ supports grids with the -ms prefix and Chrome Canary supports them by enabling the experimental web platform features flag.
3D in the Browser: WebGL versus CSS 3D Transforms – Right now, I’m really not sure what the future holds for 3D in the browser. Will 3D be confined to the realm of games and demos? Does it belong within the context of building utilitarian web applications?
7 Useful Git Tips for Beginners – Git not only gave me a much-needed ability to version-control my work, it also made me a better programmer. Here’s a series of simple tips that will help you make Git an important part of your web development workflow.
CSS Grids: Examples and Code for Common Layouts – One positive thing I noticed in playing around with css grids is how quick and easy it is to rearrange the grid items. The divs could quickly be mapped to different named areas or the different values for grid-column, grid-row, etc. could be easily changed.
Implementing Native Drag and Drop – In this blog post you are going to learn how to make use of the native Drag and Drop API in order to create your own Drag and Drop interfaces.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
5 Methods To Serve True Responsive Images – At the moment there are various emerging techniques and tools that try to solve this hurdle. Let’s look at them a few of them now.
How Human Centric Web Design Improves Your Workflow - User-centered design is something most of us aim to put high on our list of priorities; having the end-user in mind and reflecting this philosophy in our products.
CSS Sprites vs. Data URIs: Which is Faster on Mobile? - In this article I’ll provide more background on why the performance of data URIs is an important issue and, of course, the results of whether data URIs or CSS sprites perform better on mobile.
An agency workflow for Responsive Web Design – I’ve been thinking about workflows for Responsive Web Design quite a bit, particularly since it’s now become our default approach on every new project.
Progressive Enhancement Is Faster – The aim of publishing this article is to raise awareness and support the discussion about the role of progressive enhancement within the community. Progressive enhancement has become a bit of a hot topic recently.
Progressive Enhancement: Zed’s Dead, Baby - If you’re a proponent of progressive enhancement, I encourage you to really think about how much the browser environment has changed since the notion of progressive enhancement was created.
Device-Aware Design - One of the most challenging aspects of my experience with Android has been to design for an ecosystem that lacks a standard in hardware and software.
Usability 101 for startups - “Customers don’t care about your f#$%*g solution, they care about their problems.” —Dave McClure
Catch Up: Responsive Web Design – I’m not going to start building the case for mobile in general, because most of you already have mobile sites. Most of you had mobile sites in 2010. The problem is, a lot of companies have bad mobile sites.
Responsive emails. The future of email marketing - Responsive email is an email that identifies a device’s screen and display size and renders the appropriate layout. Responsive emails use @media Queries to identify the device or screen size and render the appropriate email layout designed by the designer.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
How to Apply Skeuminimalism to Balance Webpage Performance With Visual Impact – But that doesn’t mean we should ignore photo-realistic design elements — to say nothing of photos themselves. Here’s how to use flat and skeuomorphism together in three minutes.
How to design great web forms - ou can design a form that meets the needs of the form’s owners, but it will be a failure unless it can be accessed, comprehended, filled out and submitted by the target audience.
How to design great web forms – There are three tools you may find useful in developing a real sense of the form’s fillers: segmentation, personas and scenarios.
Optimize Website Content with Calls to Action: Tips for Small Businesses – Here are some of the key observations on how small businesses are failing to benefit from calls to action.
Flat And Thin Are In – In this highly connected, information-rich and feature-packed digital world we live in, minimal design’s widespread resurgence is refreshing to witness.
Do You Need a Style Guide? - Style guides are a must for any publisher with multiple employees. This is especially important if more than one person will work on any brand elements (from the website to printed materials), and to ensure that transitions between employees are seamless in the eyes of users.
Fresh Resources for Web Designers and Developers – September 2013 - In this list, we got a Photoshop plugin that allows you to create a new open image format called WebP, a source for free illustrations, and another for free hi-res photos, a tool that presents your app in a device mockup without the use of Photoshop.
10+ Must Have HTML5 Tools For Web Developers to Save Their Time - HTML being the pioneer website development scripting language sweeps away with major credit. Plus, the latest HTML5 has yielded some of the stunning interfaces.
Does Your Website Design Appeal To The Right People? – Sinus Meta Milieus describe target groups across country borders. For a growing global industry, this helps to identify and understand international users.
Using Alignment to Improve Your Designs – The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our designs.
The A-Z of Portfolio Design – Every good web designer has a portfolio, but not all portfolios are born equal. Within this quick field guide, you’ll find 26 practical tips, each explaining the features that every showcase of your skills should not be without.
Creating a Website Business Model Successfully - Let’s discuss about creating a proper website business model, things that an entrepreneur should keep in mind and how far the method of web business plan creation has changed with time.
Make Wonders with Seven Best in Class CSS Frameworks – A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices.
“Fuck You.” - Next time you find yourself intentionally depriving someone an experience—to acquire knowledge, to complete a task, to do something online that can make their life even just a little better—picture yourself standing in front of that person in real life ..
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Best Adobe Illustrator Tutorials of August 2013 - For the month of August we have come up with the roundup of creative and best Adobe Illustrator Tutorials infact we would like to call it the collection of some really cool hand-picked tutorials.
How to design a business card: 10 top tips – A well-designed business card lends legitimacy to your business, and can make you stand out from the crowd of competitors. If you haven’t got a card you can give out to prospective clients or collaborators, you’re missing out on a key marketing opportunity.
Adobe Illustrator CS6 Beginners Guides & Tutorials – Progressing from grass-root, in this post we are showcasing Illustrator CS6 Tutorials for beginners. Start polishing your skills and while your inspirations flow as you’re on your way to pros arena!
Photoshop is not a design tool – “The harsh reality is that anything you ‘design’ in Photoshop is throw-away. A talking point. A reference for discussion. A platform to build from. It is never a definitive piece.”
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Best Premium Shopping Cart Solutions Comparison – A post for premium eCommerce platforms as well. Here we have done a comparison of some of the most notable shopping cart software packages available.
WordPress
15 Best Image Optimzation Plugins For WordPress – Optimize image performance is very necessary because it will prevent your website pages from the slow loading. See for yourself and choose a WordPress plugins suiting your needs the best.
10 Easy Steps to a Complete Understanding of SQL - As with every language, SQL takes a lot of practice to master. The above 10 simple steps will help you make more sense of the every day SQL that you’re writing.
WordPress Custom Post Type Guides & Resources - If you’re looking to learn all about the potential of custom post types yourself, this post rounds up the best tutorials, guides, generators and plugins to give you a head start and to make sense of what can initially appear to be a complicated subject.
WordPress performance: 17 things to do right now – Luckily WordPress performance is easy to get started with: there are quite a few quick things you can do to improve the performance of vanilla WordPress installs.
Improve your WordPress security with these 10 tips – There are still a handful of potential security risks, when running a website. You, the website owner, need to pay attention to these potential security risks, in order to keep your website safe.
Migrating Your WordPress Database: A Database Primer - When it comes to working with WordPress-based projects, arguably one of the most frustrating or tedious aspects of deployment is actually getting the databases across your environments in-sync with one another.
How to Speed Up Your WordPress Website – “Out of the box” wordpress is neither SEO friendly, or configured for performance. Additionally many of the plugins that extend and improve the functionality, negatively affect it’s performance. In this post I’m going to offer some tips on how to speed up your wordpress website
How to Exclude Sticky Posts from the Loop in WordPress - In this article, we will show you how to completely exclude sticky posts from the loop in WordPress, and we will also show you how you can take away the sticky feature of the post, so it still shows in their natural order.
The Complete Guide to Proper JavaScript Usage With WordPress - In this tutorial, we’re going to see how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code.
WordPress Fragment Caching Revisited - When a WordPress page loads, PHP is processed and the MySQL database is queried. Sometimes a block of code makes many queries and takes a while to run. Fragment caching takes the output of a code block and stores it so for a predetermined amount of time.
Search Engine Optimalization, Conversions, Analytics, etc.
11 Best Tools That Can Be Useful To Improve Your Website SEO – A collection of some of the best SEO tools that can truly help you improve your website performance. These tools will truly help you improve your ranking on search engines and get more visitors to your website.
Tutorials
Creative Link Effects – Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect.
Code a Single-Page Sliding Website Layout With Fixed Navigation – In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time.
Using HTML5 Drag And Drop To Create A Shopping Cart – We’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.
Sliding Horizontal Layout – It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible.
Freelance, Business and Workflow Related Stuff
5 Ideas for Improving Your Client Services as a Freelancer – How can you make your design business stand out from the crowd by providing your clients good project experiences? This article shares some ideas you can implement right now.
Finding the Middle Ground: How to Compromise with Clients – The key to a successful collaboration is your attentiveness to the client’s needs, and your ability to design a website that satisfies those needs. The good news is that both are in your control.
Why you should never present more than one mockup to a client - If you show a client two mockups and one has navigation down the left and one along the top and ask “which is your favourite?” you’re degrading your expertise.
How to invoice clients the right way – I’ll try to clarify this process as well as some terms and practices related to it, while avoiding any accounting jargon. In addition, I’ll give you 10 beautiful invoice templates you can customize.
Your Freelance Reputation Matters & How To Improve It - We’re going to look at some of the ways that nurturing your freelance reputation can mean the growth of a highly successful career, and how to go about doing it.
How Designers Can Hustle for More Business – 3 Things You Can Do Right Now – Today, Behance, Dribbble and a blog are prerequisites for any designer trying to build their brand on the web. So what else can you do to stand out and get more business?
F*cking Brilliant, a great Read or just magnificent Tips!
Change for the Sake of Change – Human beings are creatures of habit. We develop routines to help us be more productive, but our routines can keep us locked into a singular way of seeing and thinking.
Progressive Enhancement. Still Alive & Kickin’ – I promise to be more proactive about keeping progressive enhancment in mind and positive as I try and help people who are still on their way. Do you?
Progressive enhancement is faster - I’m keen on the progressive enhancement debate continuing, but can we ditch the misrepresentation and focus on evidence? That goes for both sides of the debate.
Logo, Bullshit & Co., Inc. - Designing a $10 Billion Dollar company’s logo over a weekend, without considering the whole of the brand identity and what it needs to do… this is not serious.
- § -
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