.. yay, it’s Weekend! Time for a new roundup with last week’s best tutorials and articles found on the interwebz. 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.
Save bandwidth with webP – soon with fallback! – Reduce the weight of the page by serving images that have a smaller file-size, thereby consuming less bandwidth and taking less time to download a page.
Defensive HTML and CSS – Before you begin to write any HTML or CSS, you’ll have to make an important decision regarding the look and feel of your application. Do you want your application to look the same everywhere?
How to use local storage for JavaScript – The good thing about local storage is that you can save those bits of data to the user’s computer so that when they reload the page all of their todo’s will still be there and local storage is actually quite simple.
7 Wonderful Secrets of CSS3 Rules Every Designer Should Know – If you are an experienced web designer then for sure you might have memorized loads of hacks, code syntaxes and snippets but with CSS3 in particular they difficult to memorize.
Hot in web standards: March/April 2013 – As summer hesitantly starts to approach in the warmer climates, so do many other exciting updates in the ever-changing world of open web tech.
Automatic Figure Numbering with CSS Counters – Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page. And that’s exactly what we are going to do in today’s tutorial.
Modernizr & YepNope Tips – Many people would simply strip out latest technologies, but I’m a true believer that we should benefit the most updated users, by giving them an awesome experience. If you want to do something like this, you’ll make good use of libraries like Modernizr and YepNope.
CDNs fail, but your scripts don’t have to – fallback from CDN to local jQuery – With JavaScript we can detect when our CDN-hosted JavaScript resources like jQuery or jQuery UI aren’t loaded successfully and try again to load them from local locations.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Pixel-free CSS – In 2013, the pixel is nearly meaningless. I got tired of guessing users’ pixel counts. I fully adopted vw and em units in my CSS. My initial goal was to simply resize the font based on the width of the viewport.
Building a Better User Experience by Designing in the Browser – Comps are part of an old design process, so stop catering to your client with inauthentic, hypothetical experiences. Present your work in the browser to give everyone the real experience.
A responsive ecommerce masterclass from Nixon: part one – There are far too many excellent articles out there already explaining the key principles of responsive design, so here are just three key principles specific to RWD in ecommerce
What are Responsive Websites made of? – I’d like to dig into the same data, but this time drill down into the specific types of resources on the page – Image, JavaScript, CSS and HTML files.
How to Build a Responsive Slide-Down Navigation Menu – For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu.
Have Responsive Websites Overshadowed Separate Mobile Websites? – Your business type, your business requirement and, of course, your budget can help you decide your silver bullet when it comes to mobile. Whatever you may choose, never forget the best mobile Web practices.
The perils of A/B testing – In this article I’ll take a look at some of the pitfalls of using A/B testing, and how such comparative testing can be used as part of a designers toolkit, rather than a dominant design methodology.
Why You Should Care About Web Accessibility – I’m not going to go into detail on web accessibility as much has already been written about it over the years, with really useful guides and resources available at W3 and Web Credible looks into the act in more detail in relation to websites.
Infinite Scrolling: Let’s Get To The Bottom Of This – Infinite scrolling promises a better experience for users. However, the good is often accompanied by the bad and the ugly. Once we understand the strengths and weaknesses of infinite scrolling, we can begin to use it to enhance our interfaces.
Are You Putting the Home Button to Good Use? – “Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a reset button or using a ‘Get out of jail free’ card.”
Why the Web Is Ready for Responsive Web Design – Today, a large portion of site traffic comes from mobile devices in addition to traditional PCs. Across the globe, mobile devices now account for 12 percent of Internet traffic
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Designing For Human Limitations: A Scientific Perspective on Minimal Design – So reduce, decrease, flatten and subtract until it’s able to go through the small hole of the conscious mind and you’ll have won.
Helpful Code Paradigms for Frontend Web Developers – Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS.
How to Plan Your Design Portfolio in 11 Easy Steps – Online design portfolios are essential to your identity. It’s the one place online where potential clients can go to read about who you are and what type of work you are capable of producing.
5 Tools to Speed Up Your Site – Many studies have proved how important speed is to a successful site, and the results are convincing: almost a third of users won’t hesitate to abandon a site if it takes over five seconds to load.
The Science of Buttons: How to Get People to Click – Many different factors go into creating a successful call to action button and the difference between a hit or miss can be as subtle as the shade of color you choose or even the font.
Tips for creating effective Call to Action buttons – Call to Action buttons play a very important role in the marketing of your website. Here are some tips that will make your Call to Action buttons more effective.
Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) – In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used.
New tools for web design and development: April 2013 – 10 of the best tools to come out in April. This was a super-busy month, with more tools and experiments popping up than there was time to explore them.
20 Awesome jQuery Sliders – In this post we’ll look at 20 different options for sliders. Many of them allow you to create responsive sliders, and some are optimized for mobile users as well. Most of these options are free.
10 Useful Tools for Quick CSS Development – Here is a list of useful CSS development tools that professional CSS developers use. Let’s explore them and get ready to make life easy.
Calling Bull$#!%: On Flat Design – Taken literally, under the flimsy banner of honesty, flat design has ventured out against interfaces which resemble anything three dimensional or portray depth on a two dimensional screen. I’m calling bullshit on this for a number of reasons.
How to Get Impressive Color Styles for Your Website - Color is known to generate emotions in a person. The perfect combination of elements reinforces recognition and impact. It helps to develop powerful brand and identities. As a result, a mood is set.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
How to Design a Logo: A 5-Step Process – There are no shortcuts to a great logo design; if you don’t put in the work at each step of the design process, you won’t get the most optimal results.
The Psychology of Color in Logo Design – Anyone serious about promoting a product or service cannot afford to ignore the psychology of color in design. Here are a few facts of which you should be aware in order to make the best first impression you can.
47 Top Typography Tools and Resources – To help you improve and learn more about typography, we have compiled 25 useful tools and resources, from fundamentals to modular scales.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
The 3 Building Blocks to Content Marketing Strategy – Content creation and distribution is booming. We’ve never seen brands more active in developing content to attract and retain customers. Yet, almost no one has a concrete strategy for the deployment of those content assets.
Simple Tips for Designing a Newsletter Template That Stands Out – From retailers promoting sales, to organizations showcasing information and events, the email newsletter is one of the most popular marketing tools out there. And for it to really be effective, it must look good.
Integrating content marketing strategies and mobile design – Can mobile design and a great content marketing strategy be combined without sacrificing either content or design elements?
Content Knowledge Is Power – “Content matters!” “Comp with real copy!” “Have a plan!” By now, you’ve probably heard the refrain: making mobile work is hard if you don’t consider your content.
HOW TO: Get the right CMS for your online shop – Setting up an e-Commerce site can be pretty daunting. Fortunately, there are loads of frameworks and systems out there that will help you to build a shopping platform.
WordPress
What Theme Authors Need to Know About Post Formats in WordPress 3.6 – There’s a new post formats UI for the WordPress end-user, along with a new system of handling and displaying this data in our themes.
WordPress Tutorial Customize The Look of Your WP Admin Panel – This video shows you how to quickly add/change columns, drag sections around, so that you only display what matters to you inside your wordpress WP-ADMIN panel.
The WPLift Complete Guide to Google Authorship and WordPress – Since the feature debuted (I believe in the spring of 2012) acquiring Google Authorship for your WordPress website has become a lot easier and a lot less confusing.
5 Basic Tips to Improve WordPress for SEO and the User Experience – By tweaking some default settings, setting permalinks, adding update services, and customizing media settings you will greatly improve your WordPress site for SEO and the user experience.
5 Simple Tips to Protect and Secure WordPress Site – in this post we are covering some of the best tips to secure your WordPress, which includes how to protect your folders, login restriction, database and more. All the below steps are easy to use and take 10 to 15 minutes to apply.
Guide to Creating Your Own WordPress Editor Buttons – How to create a TinyMCE plugin to do add your own theme. In this tutorial, I will walk you through the basics of adding your WordPress Editor buttons by creating a TinyMCE plugin.
Search Engine Optimalization, Conversions, Analytics, etc.
How to Unlock Your ‘Not Provided’ Keywords in Google Analytics – Implementing one or more workarounds may help you to improve your understanding of organic keywords and get a better insight into your missing statistics.
Essential Tips To Get A High Page Rank - A few simple, yet effective, SEO techniques that can be systematically incorporated into website design to achieve that elusive ranking. Organic or natural SEO, however, does take time and effort to yield results.
HTML5: An Essential Weapon for SEOs – Overall, the improvements in HTML5 include numerous features that will help you “fight the good fight,” and improve your search rankings. It should be considered an essential weapon for SEOs today.
Tutorials
How to Build an Instagram-like Photo Sharing App with HTML5 – I was only really just interested in seeing if the web platform had really evolved to a point where an app like the hugely popular Instagram app could be built using just HTML, JavaScript and CSS.
Text Opening Sequence with CSS Animations – The idea is to blur text and make it appear with a rotation while animating the space between the letters. This can be achieved in a variety of ways using properties like the new CSS filters, animating padding or margin and more.
Create a Quick, Sticky Menu -Implement a sticky menu with CSS, toggling its visibility with jQuery. It’s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.
Fixed Background Scrolling Layout – A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section.
20 Responsive Web Design Tutorials for Web Designers – Today, we’re featuring 20 tutorials on Responsive Web Design for web designers. The magic behind responsive web design layout is fluid grid, which reset resolution of a website according to the device size and resolution it supports.
Vertical Timeline – A simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens.
Freelance, Business and Workflow Related Stuff
How to cope with a tiny design budget – You might have all the creative talent and all the time management skills in the world. But if you run out of money, the game’s up. Here’s how to avoid that happening…
Tips for Balancing a Heavy Freelance Workflow – No matter how you slice it, the job of freelancing is tough. It may require times of drought with very little work, followed by other times where you are flooded.
Freelancers: How To Raise Your Rates – As a freelancer, raising your rates after a certain point is essential not only to your growth as a creative business owner, but to the quality of clients you have access to.
HOW TO: Deal with difficult clients – Look at every difficult moment as an opportunity to improve what you do. Sometimes difficult clients give us perspective to revaluate how we are going about certain things in business and that is invaluable.
4 small yet vital details you can’t afford to miss when starting your freelance business – Neglecting the little things can come back to bite you later, so today, take caution and read through these 4 small yet vital details you may have overlooked when starting your freelance business.
Project Management and Embracing Imperfection – Projects are made up of people and require creative problem solving. And since people aren’t perfect and creativity is often a complex exercise, it shouldn’t come as a surprise that projects are therefore full of imperfections.
F*cking Brilliant, a great Read or just magnificent Tips!
The Importance of Quick and Dirty – A business needs to be able to move at two speeds: fast and slow. So what happens when you’ve lost your get-up-and-go? Do something over and over, and chances are, you’ll get better at it.
4 Pillars of Lean Web Design – “Lean describes a way of doing something with a verified goal in mind and with a very clear focus. For lean web design, this means a constant focus on the actual user.”
Don’t Blame Flat UI for your Design Problems – The beauty of the Flat movement is that it is exposing the problems we’ve been trying to hide with brushed metal textures and cut paper’d edges. If your product is a hog, gussying it up wont make it any less swine.
WYSIWTF – Arguing for “separation of content from presentation” implies a neat division between the two. The reality, of course, is that content and form, structure and style, can never be fully separated.
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