.. yay, it’s Saturday! Here’s a new roundup with last week’s best tutorials and articles found on the blogosphere. 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 Masking - On masking, a mask image is composited with the element, affecting the alpha channel of this element. The new CSS Masking specification aims to bring these two operations to the HTML world.
Body Border, Rounded Inside - You can’t do bizarro inside-y rounded-ness like with CSS, that’s crazy talk. But then, if you just look at it as a normal rounded corner element sitting on top of a square element, it looks less weird.
Five tools for better PHP - this article looks at five tools to make for better PHP applications: PHP Code Sniffer, PHP Documentor, Supervisord, Phing and Uptime Robot to keep an eye on your delightfully robust and newly-deployed site.
What every web developer must know about URL encoding - This article describes common misconceptions about Uniform Resource Locator (URL) encoding, then attempts to clarify URL encoding for HTTP, before presenting frequent problems and their solutions.
Can we get rid of gradient prefixes? - I recently realized that unprefixed gradients finally propagated to stable Chrome, and I decided to do some research on which browsers support unprefixed gradients, and what percentage of users needs them.
Web Design: Equal Column Height With CSS - Traditionally, a website consists of the main section and a sidebar on the layout. Commonly, the content that is contained in the main section could be longer than the sidebar, which makes the height of these two sections unequal.
Boost Sass & Compass efficiency – While the authoring environment is certainly more favourable when using Sass and Compass as opposed to standard CSS, a common concern is that the resultant code will be more bloated than if it was written ‘by hand’
A JavaScript refresh – We will cover here some of the key concepts of JavaScript to get us started. If you have not checked JavaScript for the past few years or if you are new to JavaScript, I hope you find this useful.
An introduction to AngularJS – AngularJS is the (relatively) new kid on the coding block. To quote from their website it is “a structural framework for dynamic web apps” which is especially well-suited for building one-page web apps, although it’s certainly not limited to that.
Setting up Sublime Text 2 – After a few weeks of using Sublime Text I can safely say that it’s the best editor I’ve used. It’s fast, extendable and hasn’t ever crashed on me. That said, Sublime Text does require a fair bit of initial configuration.
Web Design: CSS Image Sprite with Compass - CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance.
CSS3 Columns and Paged Reflowable Content – The column-based presentation using CSS3 requires minimal learning and implementation time. At its simplest, declare the number of columns the content of the container to be split into, and from there, the browser does the rest.
Can You “Over Organize” JavaScript? – I have little doubt that on a large heavy-JavaScript site that strict organization like this is of huge benefit. But on smaller sites perhaps not so much.
Profiling Mobile HTML5 Apps With Chrome DevTools - Today, the most important thing you can do for your site is make sure it performs well when visited from a phone or tablet. Read on and learn how to optimize your site.
How to use CSS3 transitions - CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript.
Transitional Interfaces, Coded - Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page.
Get your JavaScript in order - We are moving into an era where we’ll be using more and more clientside scripting to handle what have traditionally been seen as server-side things, such as using JS template engines to render HTML.
UI Design: An Intro to Flexible Box - Since this is now becoming a common practice in web design, W3C announced a new module called Flexible Box or simply Flexbox. But, this module is still in the drafts stage and changed over the years.
How To Benefit From CSS Generated Content And Counters – In technical terms, generated content is a simple abstraction created by CSS in the document tree. As such, in practical terms, generated content exists only in the layout of the Web document.
How To Reduce Image Size With WebP Automagically – The average webpage, we’re overlooking the gigantic elephant in the room: images. Images can dwarf text files like CSS and JavaScript: according to httparchive.org, they comprise over 60% of the transfer of average webpage.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
RWD focus: Responsive typography, Part 2 – A final narrowing down and selection of the typefaces, applying a modular scale using several online tools to convert pixels to Ems, and finally, we will check and set the default line height to achieve the finished view of the demonstration.
Breaking Development: Mobile First Responsive Design – Jason Grigsby walks through the importance of performance in multi-device designs and techniques for helping you achieve it
Responsive Nav: A Simple JavaScript Plugin For Responsive Navigation – Today, I’m pleased to introduce Responsive Nav, a free and open-source JavaScript plugin that solves these problems and more in one tiny package.
Improve Mobile Support With Server-Side-Enhanced Responsive Design – However, a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves.
Responsive Web Design initial Hiccups for Designers & SEO - Being too popular in web design industry, the responsive web design also considered as not into future as there are many reasons behind this fact.
Useful jQuery plugins for responsive web design - When building responsive websites, jQuery can be very helpful. In this article a list of jQuery plugins that will definitely help you building more responsive and usable websites.
Eight Lessons in Mobile Usability Testing – In the hopes that I can save other UX professionals time and effort, here are eight things that I have learned from all of this mobile usability testing.
Great Responsive Web Design is a Matter of Process - Instead of spending time designing for specific device widths and getting hung up on the precise elements of a web design, designers now have to focus on designing for content.
Is Your Responsive Web Design too Fragile? - Chrome or, more specifically, Webkit is incorrectly ignoring the scrollbar and reacting too early. That appears sensible since scrollbar widths vary between systems, but it’s going against the W3C standard
Responsive Maps – Most embeddable maps are touch friendly in that you can swipe/scroll to reposition the map within their frame. This is great, but users can get stuck if the embedded map happens to fill a viewport at any given time.
Top Features Every Responsive Website Should Have – Things you should/should not implement within every website which is called “fully responsive”. So, let’s proceed to the plot right now and enumerate these important points!
CSS Regions and Exclusions on Mobile - Now that well over 20% of web traffic is coming from mobile devices, it’s increasingly important for mobile browsers to stay on the cutting edge of standards.
My Experience with Navigation in Responsive Design - The tough part is what to do with that huge mega menu once your viewport gets down below let’s say 800px or so. That’s when the fun begins.
7 Responsive Design Tips to Revamp Your Workflow - Dissecting the responsive design workflow, though, can be difficult — it’s highly individual and iterative. However, you can apply general tips and techniques to almost every responsive project.
Top 5 Reasons Why You Need a Mobile Website – Smartphones have opened up a whole new audience to businesses. Nearly 73 million people are mobile shoppers, while more than 10 million people buy goods or services through their smart phone.
Improving Your Site’s User Experience - A positive experience drives sales and conversions, while a negative one deters visitors from staying or returning. Therefore performance optimization should be a central part of your design process.
Mobile Form Solutions for Better User Experience - The best practice is to eliminate mobile web forms wherever possible. But if getting text inputs from the clients is unavoidable, you need to innovate.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
4 jQuery Plugins for Superior Typography – Even if you pay meticulous attention to typography in your designs, barebones HTML and CSS often doesn’t give you the fine grain control you need to accomplish your vision.
Digging into the Huge Value of Little Favicons – We will try to take a deeper look into these tiny icons. We will know what these are for, how to design them and how to create them.
Thoughts on becoming a better developer – It’s about the diversity of knowledge, it’s about staying up-to-date with latest technologies and standards? Or maybe just sticking at what you’re doing best and keep practicing makes you call yourself a good developer.
HTTP: The Protocol Every Web Developer Must Know – Part 1 - HTTP stands for Hypertext Transfer Protocol. It’s a stateless, application-layer protocol for communicating between distributed systems, and is the foundation of the modern web.
Trendy Responsive jQuery Sliders – Nowadays, with the trendy responsive layout, sliders need to adapt to different screen dimension as well. Here we have 11 Free jQuery Sliders that supports responsive layout, not just that, most of them are featured packed too.
Hack Your Maps - Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps.
30 New Open Source Plugins and Scripts for Dynamic Websites - In this gallery I have collected 30 amazing JS plugins for web developers. Each is completely free to download and use within your own website projects, and you may customize features as needed.
Using the Parallax Trend to Create Visual Interest and Surprise - But you need a solid understanding of what it is and how to use parallax concepts before you jump on the trend. While it can be a great visual and user tool, parallax effects must be executed with precision.
Build a parallax scrolling website: 10 pro tips - Creating one of these visually interactive masterpieces can be overwhelming, so here are 10 tips that will help you build your parallax scrolling websites in the right way.
12 Options for Easily Creating Web Forms - Creating web forms can be one of the most time consuming and sometimes frustrating parts of creating a website. It becomes especially challenging when you need an advanced form.
How to turn your icons into a web font - In this tutorial, we’ll look at how to turn vector icons into a web font using a great free web app called IcoMoon. Then, we’ll look at how to use the generated font files and CSS in a web page.
Transitional Interfaces – Folks keep throwing around the word “delight” when referring to animation and cute interactions. Animation can be used functionally too. It’s not just an embellished detail.
5 Things to Consider When Finishing a Site - So you have finished up your theme, all the design elements are in place and you’re happy with how it looks and works. But are you really done? There are so many little things that can easily be over looked.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Understanding Typographic Hierarchy - One of the most important techniques for effectively communicating (or “honoring”) content is the use of typographic hierarchy.
Design a Business Card That Won’t Get Thrown Away - So what makes your card stand out from the pack? How can you design a card that won’t get thrown away minutes after the meeting? Let’s delve into some suggestions and tips today.
Personal Brand Identity Tips for Your Career - Most people have unconsciously developed a personal brand identity, but those that take the conscious decision to further craft and refine it will find it rewarding, especially when it comes to career development.
70 Awesome Illustrator Tutorials That Every Designer Should See – Today we have assembled a stunning collection of some of the latest and most creative Illustrator tutorials from around the Web.
The pro designer’s guide to organising your images - As a designer, keeping track of your digital assets can be a full-time job. We’ve rounded up five of the best tools to help you take control of your images and other assets.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Super Guide on How to Write Web Design and Development Tutorials – Writing is an art which needs to be mastered through practice. So let’s take the first step of a long journey as a web design writer.
How to Make Your Website Content Irresistible – Is the content on your website irresistibly attractive to the target audience? No matter how hard you try, promotion alone can’t build a thriving audience for your website.
26 Notable Content Management Systems worth Using - Developers of Python, ASP.NET, PHP, and Rails should be able to find quality CMS products written in their favorite language.
How to Optimize Your Business Blog [Checklist] – Your business blog is one of the most powerful tools in your toolbox. But how do you know that your business blog is running as efficiently as possible? We’ve created a master checklist of everything your blog should be optimizing for and how to do it.
WordPress
Website Localization: Best Modules for Best CMS’s - Localization is really important for every website, especially when it’s targeted for an extremely diverse audience. Multilingualism can be found everywhere, within every country there are communities that talk and write using languages of different groups.
Tumblogging With WordPress: Themes, Post Formats, and More! - Tumblogging is gaining popularity nowadays and services such as Tumblr have provided users with an easy to use platform for sharing content in a simple and speedy manner.
Display Disqus On Click Event - The problem with using Disqus is that it makes a large amount of HTTP requests to your page. It will return all the comments for the page, the styling of the comments and avatars for the commenters, it will also bring back links to related articles on your site.
Add Custom Post Meta Data To Post List Table - In this article you will learn how to add new columns to the post list, how you can add Custom Post Meta data to the column and how you can make this column sortable.
Adaptive content with WordPress - What does adaptive content mean, and why do we need it in the age of responsive design? We’ll also discuss WordPress’ features and tools that can help us create a future-friendly publishing platform.
The Economic Theory Of Selling WordPress Themes – This post aims to look at two things: why WordPress themes are priced how they are, and what changes could be made to that pricing in order to generate higher profits for those making the themes.
Multiple Shortcodes With a Single Function: 3 Killer Examples - What if there was a variable to fetch the “tag” of the shortcode? Not so surprisingly, the variable is called $tag and could be used inside our functions. It allows our functions to check the tag of the shortcode and behave according to the tag.
Override WordPress URL - When I migrated my website between Media Temple servers, I wanted to manually test the site to ensure no server configuration differences between the server were bricking the site.
What is RSS? How to use RSS in WordPress? - In this article we will explain what is RSS feeds, what are the benefits of RSS, how to use RSS feeds, and how to take your WordPress RSS feeds to the next level.
Multiple Shortcodes With a Single Function: 3 Killer Examples - It’s extremely common to build separate functions for each shortcode, but is it really necessary? In this post, we’re going to see how we can utilize more than one shortcode by building a single function.
Nine of the Most Common WordPress Problems and Their Solutions - WordPress is stable software and operates without issues most of the time. However, at times, things may go a little haywire, and your WP website can refuse to function normally.
WordPress Too slow? Speed It Up - I’m sure you very well understand the cruciality of a site’s speed and how decisive it could be? All your marketing efforts could go in vein, worsening the traffic, and thereby sales, just because of the speed culprit.
5 Caching Plugins to Speed Up Your WordPress Site – So, which is the best caching plugin for WordPress? Yes, we shall attempt to answer this question in this article by taking a look at five of the top caching plugins.
Beginner’s Guide to WordPress Database Management with phpMyAdmin - We will show you how to manage a WordPress database using phpMyAdmin which will include creating database backups, optimizing the WordPress database, and much more.
Search Engine Optimalization, Conversions, Analytics, etc.
URLs are for People, not Computers – We are all familiar with URLs: URLs are user facing and should be considered important UI elements. They should be clean, understandable, semantic, hierarchical and not excessively long.
The Quickest Wins in SEO - There are a bunch of common mistakes that only take a couple minutes to fix. These fixes will pay off in better search rankings forever.
Tutorials
How To Create a Trendy Flat Style Nav Menu in CSS – With the Flat design trend being so popular we’ll use adopt this style for today’s menu by using bright solid colours and clean icons. We’ll be using various must-know CSS techniques so this is a great tutorial for any web designers learning the basics.
CSS animated profile cards – Today, we’re going to create CSS animated profile cards. Although there are four different kind or animations (Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure.
Helpful HTML Form Feedback With CSS3 Transitions - In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea.
Vertical accordion menu using jQuery and CSS3 – A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.
Freelance, Business and Workflow Related Stuff
Navigating the Social Media Minefield as a Freelancer – Some ways to help get you and your brand through this potential minefield and safely to the other side. But first a word of warning before you start piecing your social media marketing plan together.
12 Ways to Keep Prospects Hooked on Your Freelance Blog – If your blog has a nice clean design and you know how to write an interesting blog post, it’s time to look deeper at why your blog isn’t getting the results you want. Here is my list of 12 different ways to get prospects subscribing to your blog
Launch your own startup: 8 tips from pro designers - Why work for someone else when you can harness your web design skills to create your own business? Here, eight prominent entrepreneurs offer their advice on how to make the move that can change your life.
Do You Have a Love/Hate Relationship with Freelancing? – How do you like freelancing so far? Are you not quite sure how to answer? If you’ve been freelancing for a while, chances are good that you have mixed feelings about it.
How Much Code Should Web Designers Need to Know? - You can market yourself at prospective jobs as being proficient in both design and markup. I’m going to discuss a few points on this topic and maybe we can figure out a balance on how much code is required for web designers to understand.
Reorganization – The time of neatly organized process charts and workflows is behind us. Building for the web has become a journey with infinite potential for forks and bumps in the road.
Tips to Convert your Freelance Weaknesses into Strengths – It is not impossible and not as difficult as one may think it is. So, let us now look into how you can convert your strength into weakness. As a freelancer, you will surely get tons of benefits from this.
F*cking Brilliant, a great Read or just magnificent Tips!
Don’t Believe The Hype – Getting some attention is great, but attention doesn’t make a product great; being focused and having a clear vision of what you are making does. I think that believing the hype can be a dangerous thing in building a product and it does happen.
Hellish Other People – We should also rejoice in the multitude of personalities and approaches that make up our disciplines. We are, of course, the best placed people of all to counter harmful stereotypes. Only variety can break us out of the Otherness box.
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