On this first day of the holidays I have a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.
A Harder-Working Class - In the next handful of paragraphs, we will look at how these emerging practices – such as object-oriented CSS and SMACSS – are pushing the relevance of class
Using web fonts in email - If you’ve ever flirted with using web fonts in your email designs, it may be your lucky day. With the @import CSS at-rule, support for less-traditional typefaces is looking better than ever.
Placeholders and Overflow - Unfortunately in some circumstances the INPUT element’s placeholder text doesn’t fit within the length of the element, thus displaying an ugly “cut off.” To prevent this ugly display, you can use CSS placeholder styling and
CSS Click Events - An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks.
Why HTML5 is more semantic - In this article, we will explore what makes HTML5 more semantic than its predecessors, outlining what this means for Web development now and in the future.
How To Add Realism With CSS Box Shadow And Text Shadow - The best part with both types of shadow is they’re incredibly quick and easy to learn and you don’t need to worry about vendor prefixes.
CSS Baseline: The Good, The Bad And The Ugly - Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.
Five things you didn’tknow the web could do - In this article, I’m going to dive into the top five most amazing things from “The Web Can Do That!?”
Hot in web standards:November/December 2012 - I doubt many of you can think about web standards at this time of the year, with the holidays just around the corner and the Christmas songs loops in practically every public place.
Giving Content Priority with CSS3 Grid Layout - it is important to note that, at the time of writing, these examples work only in Internet Explorer 10. CSS3 grid layout is a module created by Microsoft, and implemented using the
-ms prefix in IE10.
Public service announcement: time to update your CSS3 - With a number of recent changes in the browser world, now is the time to revisit and update your code. Read on to find out what may need updating.
CSS calc - The calc routine is especially useful when calculating relative widths. Calculations can be additions, subtractions, multiplications, and divisions, providing developers an ounce of programming ability within CSS.
Getting to Know CSS3 Selectors: Structural Pseudo-Classes - CSS pseudo-classes target elements that can’t be targeted with combinators or simple selectors like
HTML5 is Feature Complete. Hello HTML5.1! - The world may end on Friday, but at least all web-based doomsday announcements can be coded according to the finalized HTML5 specification!
A Tale of Animation Performance - Using
translate() will always “nudge” the element from it’s current position which is perfect for an effect like this, or really any design-specific motion.
Calc()ulating layouts & backgrounds with CSS - It’s pretty easy — the
calc() function can be used anywhere lengths are required. This means it can be used in margin, padding, width, heights background-position, and a lot more.
How to Detect DOM Changes in CSS - Traditionally the two classical methods for detecting DOM changes are 1) using a timer, or 2) binding on the DOM mutation events. Both methods suck.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
The Worst UI Pattern in Existence - Infinite scroll + footer. Scroll through page content to the footer. As you start reading the footer links, the site injects new content into the page and the footer gets pushed down below the fold.
What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design? – As a web designer, it’s important to embrace that your website is going to look different in various browsers and on different devices.
Watching Them Struggle - You’ve probably watched somebody who is not technically savvy trying to operate an interface new to them, likely with little success.
Responsive Design vs Server-Side Solution - There is a large and continual debate as to whether or not you should build your WordPress blog and site to be responsive or if you should go native or have a server-side solution.
Don’t do a responsive site and see what happens! - We always respect our client’s desires, cause let’s face it the client is always right, however, we want to concentrate on why you are making a big mistake by not going responsive and what the side effects of it are.
A Responsive CSS Background Image Technique - I came across the need to make a background image responsive, keeping the same aspect ratio at different widths. The limitation was that we couldn’t change any HTML or back end code so changing it to a simple
imgwas out of the question.
Trends in User Experience - As 2012 ends, it’s a good time to consider what the future of user experience might bring—in terms of both cultural shifts that impact UX professionals and UX design trends.
50 Best Responsive Web Design Toolbox - To support the entire process of responsive website designing and development, a lot of web design tools have been introduced.
Vexing Viewports - Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.
Conditional loading of resources with mediaqueries - Here is a quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand.
The Opportunities And Challenges Of Responsive Design - Responsive websites are designed with a flexible grid. They use media queries to determine the screen size for every individual site visit and rescale the content accordingly.
Boost Your Mobile E-Commerce Sales With Mobile Design Patterns - Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.
The Pros & Cons of Responsive Web Design - However, now with Responsive Web Design, a page is constructed in a way that it automatically adapts to the device’s screen size. Although, there are many advantages to Responsive web design, there are few disadvantages as well.
10 UX things we remembered in 2012 – In the following article we will describe these sometimes obvious things … along with a few other key takeaways from the last year. We hope this little bit of insight will save you from that *facepalm* moment in the year to come.
Creating tablet-friendly websites: 4 importantthings to consider – There are some key usability guidelines to consider when designing a website. This helps ensure a user friendly experience for all users, irrespective of whether they are using a finger or a mouse.
Responsive Design of the Future with Flexbox - Flexbox is a recommendation in CSS3 that enables designers to control the arrangement of elements on a page with more finesse than contemporary CSS approaches which have become common because we didn’t have a better solution.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
10 skills for developers to focus on in 2013 - Development trends that began to emerge in 2012 are picking up steam. Here’s a look at the must-know technologies for the year ahead.
Must-avoid Common Mistakes used on E-Commerce Websites - if you’re a small-time e-commerce website owner and you want to win more customers – not to put them off – here are some pitfalls to avoid
Interactive Guide to Blog Typography – This guide will help you understand the typographic foundations that will improve the readability of your articles.
10 Free Online Books for Web designers – Today we have collected 10 free online books to add to your collection. From classics that you know to new presentations transformed in pdf files, we have 11 files for you.
Essential Command-Line Tools for Web Developers - Tools can make our workflows feel seamless, allowing us to focus on what we are building, and not worry about the process. Most web developers, on all portions of the stack, work from the command-line.
4 Easy Ways to Improve your Website Today - Many modern consumers idly browse the web and prefer to spend time on pages with lots of interactivity, and less content. I’m not suggest writing a couple of lines per page and lead ..
Best jQuery Plugins of 2012 - Continuing our “Best of 2012″ series, the focus this week is on jQuery plugins. Over the past year, we’ve seen a tons of great new plugins, which made choosing our favorites extremely difficult.
Cultivating Trust Through Web Design - Yet it is on the web that knowing whom to trust can prove most difficult, and it is therefore a scarce but highly valuable commodity.
Writing Semantic Microformats & Microdata in HTML Markup - I want to dedicate this article as an introduction to microformats and microdata. Google does recommend using these formats in your HTML code if you want to increase SEO rankings.
Infinite Canvas: Moving Beyond the Page - The tools and technologies we have right now allow us to create smart, beautiful, useful webpages. With a little help, we can begin removing the seams and sutures that bind the web to an earlier, less sophisticated generation.
Guide to CSS support in email - Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
What’s My Brand Identity and How Do I Communicate It? - You brand is the identity of your company and what your customers and community can expect from the way you interact with them and the service/products you provide.
The Golden Ratio: a designer’s guide - The Golden Ratio is a beautifully simple piece of mathematical theory that can help make your designs feel well proportioned and pleasing on the eye.
Typographic Rules to Remember - Good typographic design is like graphic design in general mainly a combination of common sense and keeping things simple. The following list explains some basic rules.
10 typography tricks every designer should know - Banish kerning calamities and learn to love leading with our expert tips and tricks for perfect typography. In this article, we’re going to reveal some typography tips and tricks that you can use to boost your design skills
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Why Content Marketing is the New Branding - Branding isn’t your company name. It’s not a tag line. It’s not a logo. Branding is creating a perception. It gets new customers over the sales hurdle of education.
The Most Common Mistakes of a Blog: You Must Avoid Them! - Here’s how to make your blog serious and professional, avoiding some mistakes that can make your appearance, as an amateur blog.
Get More Tweets: 5 UX Tips for Boosting Your Site’s Virality - Social networking sites account for the most referral traffic to all websites just behind organic search. So you better be optimizing for more sharing.
The KISSmetrics Guide to Blogging - In today’s post, I’m going to go over 30 blogging tips derived from more than three years of blogging here at KISSmetrics. Some of these tips are tribal knowledge we’ve chalked up in that time, whereas others are more SEO focused.
How to Integrate Google Maps Into WordPress Shortcodes - Well, it`s not that hard and requires minimum PHP knowledge. To prove you, I`m going to create a shortcode which allows us to integrate Google Maps into any post/page.
How to Identify and Control Blog Comment Spam - If you own a blog, chances are you have encountered a little – or a lot – of spam. The more popular your blog becomes, the more spam it is likely to get.
Add a SlideShare Presentation to Your WordPress Site - Slideshare is a popular online presentation viewing service. Members can upload presentations in multiple formats, host them in the cloud and deliver them through Slideshare’s viewer.
How to Change the Default Media Upload Location in WordPress 3.5 – Important but less talked about change is the disappearance of the option to change the upload directory path from Settings.
10 Helpful Things Every WordPress Plug-in Developer Needs to Keep in Mind - There are a few things any developer should remember when developing plug-ins for the WordPress platform.
A Comprehensive Guide to Formatting Your WordPress Posts and Pages - Belly on up to the WordPress formatting bar, and let’s take a look at seven ways to polish up your posts and pages.
Understanding and Using Hooks and Filters in WordPress - The success of WordPress majorly depends on the flexible and easily extendible architecture of WordPress. This lets the plugins and themes add functionality to WordPress without changing the core WordPress files.
Turning Any Theme into a WordPress Theme: It’s Not as Hard as Many People Think! - It’s pretty easy to do, but many people new to breaking up XHTML files and inserting PHP code might be a bit intimidated by the process.
I Love You, WordPress! But… - each CMS has its own way of creating and doing things, and you cannot expect every developer to master everything. In other words, I have not many complaints related to the WP code.
How to redirect 404 error page to any page in WordPress - This tutorial will not only help you to redirect your WordPress error page to home page but also to specific page. It might be homepage, contact page or any custom page.
Search Engine Optimalization, Conversions, Analytics, etc.
SEO in 2013 – A Site Cannot Rank* With SEO Alone - We need to educate clients on how to market themselves online, and build an SEO strategy around what makes their site great.
Personal SEO: 14-Point Checklist to Dominate Your Personal Brand on Google - Google yourself. See that? It’s your personal brand. Unless you love everything about each listing on the first page, it’s time for some personal branding SEO.
SEO: Working Around a Redesign - When a redesign or platform change looms in your site’s future, it’s easy to turn off all search-engine-optimization work and focus on planning the new site.
Save SEO Efforts during a Website Redesign - A website redesign can be a huge undertaking and typically many parties get involved in the process. One important party to keep in the loop from the start is your SEO firm and if ..
How Your Website’s Structure Affects its SEO - There are a number of different ways your website’s structure can influence its overall SEO authority, so be sure to brush up on the following site structure elements to make your website is as search-friendly as possible.
What The Heck Is SEO? A Rebuttal - This article is a collective reply of the active members of the SEO community to the article “The Inconvenient Truth About SEO” in which Paul Boag discusses the value of search engine optimization for website owners.
Create Polaroid Image With CSS - In this tutorial we are going to display images in a polaroid style using just CSS. The links will need a title attribute as we will use this as the text for the image caption.
Create an Animated Share Menu With CSS - Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own.
33 Best Free HTML5 Tutorials - With HTML5, the web pages can be more semantic by via structure particular tags. Designers and developers have the ability to craft drag and drop functionality and a lot more.
How to convert a fixed width to a responsive design [VID] ~ This video is a peek into one of the most popular courses we teach here at FTS Labs called Responsive Web Design, it shows you how to convert a fixed width website into a responsive design.
How To Code a Vertical Accordion Nav Menu with jQuery - In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click.
Slider Pagination Concept - An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.
Freelance, Business and Workflow Related Stuff
Are You Making the Most Common Pricing Mistake? - Luckily for me, a few people were kind enough to lead by example and show how important it was to fix this. The mistake is to have only one price for your product.
9 Often Overlooked Ways to Market Your Freelance Business – There’s no “magic formula” to making marketing easy – you just have to do it. But lucky for you, there are simple, often-overlooked techniques you can use that take just minutes to put into practice.
F*cking Brilliant, a great Read or just magnificent Tips!
The New Digital Minimalism - It’s somewhat counterintuitive to think like this, but as complex as marketing has become, it is the simplicity of the brand message and product that wins.
Empathy in Creativity and Design Thinking - Empathy not just so we act better towards others, but also because it helps us create better innovations, services and quality of life.
Don’t copy and paste other people’s code, type it out - It’s amazing how deeply I can understand the logic and any foreign syntax when I actually have to write it out. My mind has to actually narrate, like “here’s where they’re splitting the string, ..
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