.. yay, it’s Saturday! It’s 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.
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
CSS viewport units: vw, vh, vmin and vmax – One type of units that has not been so widely discussed is viewport units, for sizing things relative to the viewport size, a brilliant proposition for responsive design. They are currently supported by a reasonable variety of browsers
Five Patterns to Help You Tame Asynchronous JavaScript – Let me emphasize here that none of these patterns are only asynchronous. In fact, all of them work well in synchronous contexts also.
New technology – fullscreen mode – There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again).
The Extend Concept – All three of the most popular CSS preprocessors support extend. I thought we could talk a bit about how it works, why and when to use it, some gotchas, and what it might be like in the future.
CSS Custom Filters – Today, I’m going to talk about something truly awesome (and new), and that is CSS Custom Filters. These allow us to morph and warp regular HTML elements into shapes that were impossible before.
MindBEMding – getting your head ’round BEM syntax – BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers.
Basic JavaScript: an introduction to the language – This blog post enables you to get started with JavaScript as quickly as possible – if you already know how to program. It describes the smallest subset of the language that allows you to be productive.
Designing the Perfect Hyperlink — It’s Not as Simple as You Think – The design of the HTML <a> element is crucial in the user’s reading experience; we should take enough time to design them well.
Variables and data types in PHP - Variables are used to store data during the execution of a script. When you define a variable and assign it to a value you practically name the value. When you need exactly that value later you can access it in the script with its name.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
UI Principles for Great Interaction Design – Today we are going over some different aspects than the ones you are used to: we will jump into user interface and principles for designing great interaction on your website.
Choosing A Responsive Image Solution – This article leads you through the basics of making responsive images and arms you with the information you’ll need to pick the best responsive image solution for your situation.
13 Stats to Convince Your Boss to Invest in Mobile in 2013 – To help you pitch your boss and frame the situation from their perspective, we’ve prepared a collection of the most exciting numbers around the mobile web.
13 Best Responsive CSS Grid Systems for Your Web Designs – Here are my top picks for open source, free CSS responsive grid systems. These CSS grid systems will help you create beautifully responsive site layouts quickly. There’s a comparison table of at the end of this post.
The State Of Responsive Web Design – In this article, we will look at what is currently possible, what will be possible in the future using what are not yet standardized properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved.
Interface Inventory – An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website, app, intranet, ..
Responsive design: we are not there yet – There’s still some way to go before designing responsively becomes a smooth process. On May 25th, responsive design turned three years old. Today a host of issues remain that we have to deal with when building responsive websites.
Trend-Setting Responsive Web Design is Constantly Evolving – Once the type of device is determined, grids, typeface & images get fitted as per the screen size. With the increasing use of Smartphones & tablets compared to laptops & desktops, Responsive Web Design is gradually gaining popularity.
4 Common Responsive Web Design Pitfalls – If you don’t want to waste your hard work by ending up with a mediocre or erroneous responsive website, I recommend you to be aware of the following four pitfalls, in particular.
An Intro to Responsive Web Design – Responsive Web Design (RWD) is a design approach aimed at crafting sites to provide an optimal viewing experience. That means: easy reading and navigation with a minimum of resizing, panning, and scrolling across a gradient of different devices.
New Rules of Successful Responsive Design – A Complete Guide – What are the more important of these ‘responsive web design rules’ and how do we go about implementing them in our projects? There are four rules that are currently seen as being the most relevant to the responsive sphere.
Six ways to make your website work better on tablets - We can – and should – reject desktop web browser limitations and think tablet first. This makes good sense, especially when research shows that tablet users spend 20 per cent more per purchase than regular desktop visitors.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Tips on How to Smartly Use Parallax Scrolling for Your Website – These days, designers can absolutely impress site visitors with this method, especially since the technique has evolved greatly since the basic, two-layered sites of old.
Designing for Services Beyond the Screen – The producer-consumer model is so ingrained in our society that we tend to treat everything like a product—a one-and-done offering that can be pushed to the market and forgotten.
Weekly Fresh Resources for Designers and Developers [July 8th,2013] – Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are mostly latest releases or the ones you might not have seen yet.
The how and why of minimalism – Not only is the target audience subjected to less clutter and noise, but you can use colors, textures, and fonts to create a very simple yet very memorable experience for the person viewing your site.
Flat Design Done Wrong – When you take away the name or when designers can get past taking the name literally, there’s a lot to like about flat design or rather this new flatter aesthetic.
Top jQuery Slider Plugins for Frontend Web Developers – I want to present 30 of the most interesting jQuery slider plugins. Each one should work properly with the most current version of jQuery and they also provide their own documentation.
Summer Reading Issue – Presenting the second annual ALA Summer Reading Issue—a deep pool of editor’s picks from the recent archives of A List Apart, sprinkled with some of our favorite outside links.
New tools for web design and development: June 2013 – A very nuts ‘n’ bolts month, June. That’s good though. There are plenty of loose screws on the web in need of attention, and the libraries and tools listed below tighten up a good few of them.
Top 10 Reasons Why People Leave Your Website – There are a number of reasons that make people leave your website, not all of which can be listed obviously because most websites are different and have different issues, goods/bads, pluses/minuses
Need HTML Prototyping Resources? Here’s My List – Ideally, these frameworks should speed up front-end development if teams figure out out the right workflow. I’ve found these tools to be invaluable to speed development, and illustrate concepts to developers.
CSS Checkbox – A website which provides styles for customizing checkboxes (without any JavaScript). There are styles which only have different colors compared to standard checkboxes and more customized ones which uses images too.
Cut Your Page’s Loading Time In Half With Some Simple jQuery – You can trick your browser into loading your big images after the entire page is loaded. PLUS, there’s an important added benefit: search-engines measure your page-load speed by what’s in your HTML, not what jQuery loads after the fact.
5 Dangers of Flat Design – While I admire the flat design aesthetics I’m afraid that many designers might fall into the trap that will ruin their design ambitions (and life of their users in the same. Let me introduce you to 5 obvious dangers of the Flat Design
How to Use Visual Hierarchy and Website Layout to Emphasize Your Message – we will discuss the importance of colors, images, typography, contrast and the size of objects and text. Manipulating these elements will help you control the experience your visitors have and help ensure that you will have the impact you seek.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
15 sites to find free fonts – Choosing the right font is a task. There are tons of font sites out there that offer us free fonts for our designs. The problem is, honestly, most of them suck. Today we’ve put together a list of places the really, really good fonts like to hide.
Design Dilemma: Negotiating Logo Copyright Issues – Unfortunately, many creatives get excited when presented a project and their only response is; “okay!” There are questions that have to be asked, creative briefs that must be written and contracts that have to be issued before work begins.
How to Create a Vintage, Cross Processed Photo Effect in Photoshop – This week we have another one, and in it I’ll show you how to create the popular vintage, cross processed photo effect using nothing but curves and the high pass filter in Photoshop.
The Ultimate Guide to Adjustment Layers – Curves – In this tutorial, we will give you a comprehensive explanation of the Curves Adjustment in Photoshop so that you can understand all of its functions.
Understanding Color: Dominant vs. Recessive Colors – Certain colors tend to take on the characteristics of other hues, while others always look pure. In addition, the human eye perceives color in different ways based on whether it is in the foreground or background.
Dashes, Quotes and Ligatures: Typographic Best Practices – Whether it is the use of dashes, which ligatures are appropriate, or which type of quotes to use, it all comes back to the question of how the text is read.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Your Social Media Strategy Could Be Killing Your Website -It can cost you time, money and energy if you haven’t properly considered your purpose for using it. It can cost you in performance, ranking, and user experience for your website.
How to Make Your Readers Interested in Your Blog – By the end of this guide, you will be equipped with 5-steps to engage your readers, keep them glued to your posts, and ensure that they remain loyal to you!
5 Great Examples To Implement Call To Action In Your Email Campaigns – While this may be a traditional way of marketing your business to your prospect clients, email marketing still remains as one of the most reliable marketing strategy that you can do, provided you do it right.
WordPress
6 Key Considerations for Speeding Up Your WP Site – Having a fast and impressive website or a blog is the most important attribute of a good web presence. Along with this, it is recommended to follow some important techniques for enhancing the speed of your WordPress website
10 Popular Security WordPress Plugins for Webmasters – No matter which type of webmaster you are, in this article we have a list of security plugins any webmaster should consider for their WordPress website.
How to Create a Homepage With Multiple Listings Using Custom Queries – The queries will list standard posts plus one custom post type registered for this project, called ‘animal’. You can find the template file with the four queries in the code bundle.
A WordPress slider template (with CSS3 animations and minimal jQuery) – To make it more interesting, we’re going to make it book-markable, use the absolute minimum of jQuery and add a simple CSS3 animation effect.
Working with Classes and IDs Generated By WordPress – A helpful feature of WordPress is the way it generates classes and IDs. Some of these are generated by the system itself, while in other cases you insert some PHP in your theme and WordPress uses that to add classes and IDs to the page markup.
Display Different Header Images Using CSS Code – I’ve already shown you how to display unique header images on different pages, posts, categories and archives using PHP code. I’ll provide all the working CSS code tested using dozens of different options.
How to Customize & Simplify the Admin – This guide covers some of the lessons learned from using WordPress for clients and should give you some tips on minimizing the damage that can be done, will making the WordPress dashboard a more user-friendly and inviting place for new users of the of platform.
Search Engine Optimalization, Conversions, Analytics, etc.
10 Tips for Powerful Landing Page Design to Improve Conversion Rate – A landing page or ‘Lander’ or ‘lead capture page’ is usually a single web page designed with an intention to promote online marketingg. Once you click on the optimized search engine button you are redirected to that page which reflects directed sales copy.
Landing Page Conversion Rate Guide: Top 12 Landing Page Tests – The goal of this post is to give you proven ideas to test and try on your own site to increase your landing page conversion rates and lower your cost per acquisition.
Tutorials
Developing Google Chrome Extensions – the fact that you can build an extension for it using only HTML, CSS, and JavaScript. I always support such products, products that are open to the community and Chrome happens to be one of these products.
Getting Creative With the Google Maps API – The Google maps API, on the other hand, gives you the freedom to create completely customized maps, which can do all sorts of cool things.
Animated Books with CSS 3D Transforms – In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions. We’ll show you two types of book designs: hardcover and paperback.
Freelance, Business and Workflow Related Stuff
The Trouble With Micro-Clients – I have learned to trust my instincts, even if it means turning away business. In the end, it is always worth preserving my sanity.
Improve Your Web Design Projects with a Good Project Scope – If you create a good, thorough project scope statement, it will surely improve communication with your clients as well as eliminate many website production problems.
20 top freelancing tips – In this feature, we’ll be exploring every aspect of being a freelancer (aside from actually making the sites). You’ll find important tips on everything from invoicing to remembering there’s life beyond work.
Turn Your Web Design Agency Around By Raising Rates by 500% – We knew we weren’t going to be able to raise our rates that significantly without changing a thing about our services. To get the $10k clients we wanted, we had to up our value.
10 Things to Know Before Selling Online – Selling on aggregate marketplaces, is great way to jump-start your Net business or make a little extra income, but merchants need to avoid these common new-seller pitfalls or risk getting cut off from these potentially valuable online marketplaces.
Developer Needs to Know About Sales – The problem is not only that startups take longer these days, but that the majority of startup founders don’t take into consideration the heavy reliance on sales it takes to get a product off the ground.
Why Working For Cheap Isn’t Always Bad – There’s an upside to working for discounted rates (and yes, sometimes even for no rates at all) which can deliver a much higher value to a freelance designer than a mere flat paycheck.
8 essential tools for freelance designers – Want to leave your design job and go freelance? Bear in mind that you won’t be spending all your time designing. There are so many other demands on freelancers, from building your own web presence to invoicing clients.
9 Biggest Mistakes New Entrepreneurs Make - Screwing up from time to time is part of the entrepreneurial process–but not all mistakes are created equal. Here are nine of the most common–and easiest to avoid
4 tips for finally getting paid + how to handle invoice disputes the right way – I’ve developed these few tips that have saved me time and time again when gently but firmly rejecting invoice disputes.
F*cking Brilliant, a great Read or just magnificent Tips!
Continuous Design and the NoPSD Movement – Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.
How to convince clients to think about content before they think about graphics – It is often impossible to have the majority of the content available before commencing design. That’s why I like the idea of Structure First. Content Always.
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