.. 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.
Thoughts on Using Web Frameworks – Are frameworks a crutch, or can they be a useful tool to experienced front-end developers? Do they have a place in our workflow if we want to build websites that don’t look like every other website out there?
“Like”-able Content: Spread Your Message with Third-Party Metadata – By breaking content down into its natural components, we ensure current and future compatibility and display in a wide range of devices and environments.
SOLID Object Oriented Principles And CSS: Part 2 – How should you define the abstraction in a class? What should the class do? What responsibilities should it have? When you want to add something new to the class, should you modify it or extend it?
hgroup removed from the HTML5 specification – The hgroup element has been on the “at risk” list for a while and the decision to remove it from the HTML5 specification has finally been made.
CSS Units of Measure: Going Beyond the Pixel – In this article, I’ll look at these units of measure and describe how they behave and apply to elements in documents. (a fair bit of book typesetting is done in CSS as well.)
CSS @supports – Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn’t been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix.
Selective Content Loading – One of the techniques we talk about is called Selective Content Loading (SCL). This technique is really useful in situations where you want to load small pieces of data into an already loaded page in a structured way.
How to structure a Sass project – One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet.
How To Make Your Websites Faster On Mobile Devices – 64% of smartphone users expect websites to load in 4 seconds or less, while the average website takes more than twice that amount, at 9 seconds. This article explains techniques you can use to make your websites faster on mobile devices.
How to use CSS specificity – The selectors you use in your CSS all have different weights and those are controlled by specificity. That’s why sometimes, when you apply a rule to an element, it isn’t reflected in your design.
What’s the Deal With Em and Rem? – Em and rem, along with pixels, are units and methods to measure and resize type. Em and rem are relative, rather than static, units and are being used more and more for responsive web design schemes.
JQuery: What’s the difference between height, innerHeight and outerHeight? – A simple online comparison giving an overview of the difference between JQuery’s height, innerHeight and outerHeight. It’s really quite simple and is down to whether the calculation factors in padding, border and margin.
Children of The DOM - Close node relationships in the DOM have always been problematic, because most interpretations of the DOM include whitespace text-nodes, which scripts don’t usually care about.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Responsive Web Design is Not the Future – I believe we should not write off other mobile development techniques and alternatives just yet. Below, I will discuss some issues I’ve come to realize with responsive web design (RWD).
Easy High DPI Images – This is a short guide on how to serve high quality images on the web today, without polyfills, JavaScript, CSS hacks, and browser features that aren’t quite implemented yet. In a word: without drastic changes to your workflow.
Responsive Design for Apps — Part 3 – The lines are blurring so quickly now that when we design web apps, we need to take into consideration how that app will respond to different screen sizes and inputs even if the app isn’t built exclusively using the three main technical pieces of responsive design.
A Response to ‘Responsive Web Design is Not the Future’ – The fact that this article was posted on an influential design blog is disappointing. This kind of shallow thinking is what leads organizations to embrace short-term solutions instead of addressing the legitimately hard problems we’re facing.
How Common Are SEO Problems With Responsive Web Design? – Starbucks.com, Microsoft.com and Disney.com. If these sites that are held as paragons of future-friendly Web design have these issues, this should at least demonstrate that these are not edge cases, but less extreme problems that we need to address today.
Don’t make these 4 responsive-design mistakes – But responsive isn’t a magic bullet, there are inherent problems with the responsive approach that many developers gloss over. Here are four common mistakes that could plague your responsive project.
8 Guidelines and 1 Rule for Responsive Images – If I could wave a magic wand for organizations, what would I put in place for their responsive images processes and tools? The result was eight guidelines and one rule for responsive images.
Responsive Deliverables – In a world of growing front-end complexity, what are we handing off to clients? During the era of Print Design, companies would approach agencies for a brand identity system.
User Testing for Web Accessibility – Before we look at usability testing for web accessibility, let’s first discuss how user testing is normally done so that you can have a better view of how user testing for accessibility is unique.
Get Pseudo-Element Properties with JavaScript – To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there’s a method for getting them!
Media Queries in SVG images – The really cool thing about the way media queries work inside SVG is that they react to the viewport of the image itself, not the viewport of the browser.
Media Queries are a Hack – Big buzzwords in CSS these days are “modular” and “responsive”. But we’re still trying to achieve those goals with the wrong tool: Media Queries. What we actually need is a tool that doesn’t exist yet: Element Queries.
Website Performance Checklist – People like things fast. Fast cars, fast food, and fast downloads. Who wouldn’t? There’s nothing more annoying than sitting on your phone and waiting for something to load. And if something takes too long to load, we move on.
Responsive Web Design for Advanced Users – Rediscovering Ignored Aspects – There are designers that are still learning the ropes and there are others that have actually become masters at injecting the website with the much needed responsiveness.
Responsive drop shadows – Sure, if you have a straight drop shadow that can be created with a CSS box-shadow declaration, it will expand and contract as necessary to fit the width of the element it is applied to. But if the design calls for a slightly more complex shadow you need to do a bit more.
Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet) – For ideal typography, web designers need to know as much as possible about each user’s reading environment.
How To Sell The Value Of Mobile To Clients – We’re well-versed in tactics and techniques for adapting our work to mobile. Our challenge is to be equally well-versed in selling our clients on that value as being something in which they need to invest precious budget dollars.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
The Effectiveness of Minimalism in Web Design – When you reduce the number of graphic elements you use and focus instead on negative space and typography, a good eye for spacing and proportion is essential.
Helpful Tools to Optimize Images for the Web – These tools will help you to manually or automatically resize your images without the stress of losing the images clarity. This in turn will help you speed up your website’s loading thus converting more customers.
Weekly Fresh Resources for Designers and Developers [April 1th,2013] – At the beginning of each week we bring them together and share with you. Most of the tools,plugins, freebies etc. are mostly latest releases or the ones you might not have seen yet.
15 underrated web design tools to check out today – Improve your web design and development skills and save time and effort with our selection of lesser-known but brilliant apps. Underrated tools that can help you improve client-side browser development.
10 Hot Web Design Trends You Should Follow – 2013 is already here and we are witnessing a few latest web design trends already. However, predicting any upcoming trends is never an easy task nonetheless, we will try to discuss and mention a few web design trends for 2013.
Free Web Font Services – Compared – It is likely that more websites will use better and more beautiful fonts in the future, and many webfont service will pop up. Below, we will take a look at four free options of webfont services and their advantages and disadvantages.
Good Web Design Is All About The User – So take a step back from trying to one-up your peers, and consider the basics. At the heart of design lies the famous maxim that form follows function. Make sure your work is holding true to that principle by making sure of three things.
An Event Apart: 10 Commandments of Web Design – Jeffrey Zeldman walked through today’s web design principles and how they can make our sites better. Here’s my notes from his talk: Ten Commandments of Modern Web Design.
scrollUp jQuery plugin – ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease.
The Many Elements of a Successful Web Design – In no specific order, some things to keep in mind and recognize as major elements to keep in thought within a successful Web Design project. A successful Web Design is not as simple as the term appears.
New tools for web design and development: March 2013 – This month there’s something of a well ordered, structural theme to proceedings. We have formulae and functions that get down to nuts and bolts, MVCs of the first water, and yet more grids – along with a widget for controlling them.
Your Logo, as a Web Font Ligature – Normally, you’ll approach the challenge by using an <img> tag. Perhaps you’ll use image replacement through CSS, perhaps you’ll even venture into SVG files, but have you considered what’s possible by designing your own web font ligature?
Small Tools: 5 jQuery Plugins for Developer’s Daily Routine – You can hardly keep track of the progress. There are big, disruptive projects, but lots more small helpers for various use-cases. We have dug up five of these little helpers for you.
Flat Web Design: Trend Or Revolution? – With flat web design, we take a step towards accepting the unique and abstract nature of the web. But are we dealing with a temporary trend, or are we facing a revolution in how we design for the web? 5 reasons why flat web design might be a good new habit.
Most Helpful Webapps & Resources for Building Modern Websites – a small collection of websites and webapps to help developers work smarter and faster. You may not find all of these tools useful, but they are worth looking into and doing a bit of research.
10 Essential jQuery Tutorials for Programmer - These things can help revamp and enhance any sites or pages. This list will aid people of 10 of the most kick ass jQuery plug-ins they can use for future projects.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Branding Mistakes to Avoid – The main idea is to translate something vague (who your company is) into something tangible that your audience can see, hear, read, and recognize. It’s no easy mission.
Add Depth to Your Images with the Best in Class Image Techniques – It is obvious that an element of depth will definitely add greater touch of reality to all the design projects and creating them is far much easier than you think.
How to Choose a Typeface - It’s possible that the process of choosing typefaces is complicated and frustrating for a lot of people, so I figure it might be helpful to write up a guide on the best way to do it without exploding.
What’s The Secret To Great Infographics? - It’s a dialogue with the user based upon information transparency. And ultimately, that dialogue is a vital grounding component of socially conscious work.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
A Short Guide to Writing Good Copy – The term “style” is thrown around a lot by writers, but it’s a misnomer for copywriters because “style” doesn’t work in the extremely short attention economy of the internet. Good copy isn’t necessarily “stylish.”
WordPress
Static HTML: The new old school – I was playing around with static html tools for a little side project I’ve been toying with. I was tinkering with Stacey and Kirby. Awesome tools for static PHP page building.
How To Create A Tab Widget In WordPress – you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
How To Display A Different Nav Menu For Logged In Members & Logged Out Visitors – Custom functions are the best way to go in my opinion because you don’t have to worry about adding more CSS to your child themes files and slowing down your site.
How to Display Gravatar from User Email in WordPress – In this article, we will show you how to display Gravatar from user email in WordPress. First, we will show you how to display gravatar in your WordPress templates by using a simple function.
Getting to Know the WordPress Settings API – The Settings API is essential when building themes and plugins. Since many of our readers are doing just that, I thought I’d share with you the best resources on this excellent API.
Why I can’t stand WordPress Popup Plugins - why I hate those stupid WordPress popup plugins that shove stuff in my face when I arrive. Oh I know that they work. I know some people see great list growth because of them. But I hate them.
Search Engine Optimalization, Conversions, Analytics, etc.
Site Speed and Usability – Slow speeds are a real usability challenge. According to software and monitoring experts at Gomez and Akamai, most users (up to 73%) have encountered a site that was too slow, crashed, froze or otherwise didn’t perform.
Onsite SEO Tips for Your Business Website – Call it absolute necessity or the demand of time, either ways you have to stay informed about the latest tips and tricks that can let your website hold on to their position.
Tutorials
App Showcase with Grid Overlay – The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up.
Building an Image Slideshow UI Switcher with jQuery – For this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos. Users have the ability to flip forward and backwards in the photos list, or choose a specific image from the thumbnail view.
Sticky Position (Bar) with CSS or jQuery – The idea of ‘sticky position’ is to make elements on a website stick and remain visible. Those elements will initially be in their position, and then in the event of scrolling down the webpage, their position will be following the scroll.
Cross browser compatible HTML5 videos – The HTML5 specification is bringing a new solution, HTML5 videos. In this tutorial, I’ll show you how to use HTML5 to display videos on your website.
A quick and simple CSS3 accordion menu! – Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu.
Freelance, Business and Workflow Related Stuff
Real People, Real Money – 7 Web Designers Who Earn Passive Income Online – You already know that as a web designer or a web developer you need passive income. However, making money online might seems like some unrealistic fantasy.
Design Dilemma: Why a Contract Is Always Necessary! – A contract will help you prove that and is a big bargaining chip in court (work is used, so the fee is expected in full, plus other possible fees and damages due the designer).
What separates good designers from great entrepreneurs (which are you?) – If you’re a pretty good (or even great) designer, but can’t seem to reach the business goals you set for yourself, pay attention: this post is for you.
This is Only a Test… Or Is It? How To Test Your Marketing Efforts as a Freelancer – Not getting the exposure your need to be choosier about the types of jobs they can take on, because the only jobs available are the ones that limited exposure gets them.
F*cking Brilliant, a great Read or just magnificent Tips!
Explaining Water to Fish – We’re told that user-centered design is limiting and we need to look beyond it. It’s just not good enough, because it doesn’t consider all the variables involved.
Stop working (so hard) – I’m currently working the fewest hours per week I ever have in my professional life, and I’ve never been more productive. We’ve all fallen victim to this irrational way of thinking.
Designing for Humans - There is a growing trend throughout the web community to embrace an understanding of behavioral science, and to apply its tennets to our designs. This progress helps us walk the delicate balance between providing an emotional and pleasurable experience.
Sketching for user interfaces - Get a decent pencil. This might sound like an indulgence, but I’ve found that having decent pencil means you don’t have to worry about it acting up unnecessarily—that’s one less thing to worry about.
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