Tweet-Parade (no.17 Apr 2012)

Object-orientation and inheritance in JavaScript - The good news is that it’s actually quite simple, but the bad news is that it works completely different than object-orientation in languages like C++, Java, Ruby, Python or PHP, making it not-quite-so simple to understand.

Mimic ‘onmouseout’ with CSS3 Transitions - Firstly, we take advantage of the fact that you can have different transitions for hovering on, and hovering off. Second, we use a timing of 0s to disguise the hover on.Why I Fell in Love with the Sass CSS3 Extension, And You Will Too! - In some ways I’ve always been a traditionalist. I like writing my code from scratch, without preprocessors and frameworks. I feel like I have more control over what I’m doing. Recently, however, I finally  ..

Pure CSS scrolling shadows with background-attachment: local - In Backgrounds & Borders Level 3, a new value was added to lift this restriction: local. When background-attachment: local is applied, the background is positioned relative to the element’s contents.

The Form Method: CSS Click States without Javascript - There are countless moments in CSS development when you wish there was a :click psuedo class, similar to :hover. For now, that doesn’t exist, but this little hack will let you get around that.

Transitions Only After Page Load - I’ve you’ve ever used CSS transitions on structural elements on your page, you may have noticed a case where you see that transition happen when the page loads and is laying itself out.

 

Usability, User Experience, Responsive Webdesign, Mobile, etc.

320 and Up – The ‘tiny screen first’ responsive boilerplate. ‘320 and Up’ has grown to include selected files and styles from Twitter’s Bootstrap as well as responsive design libraries and polyfills. It’s become my personal toolkit, somewhere I keep the files and styles that I use ..

Creating a Mobile-First Responsive Web Design - We’re going to walk through how to create an adaptive web experience that’s designed mobile-first. As the web landscape becomes increasingly complex, it’s becoming extremely important to deliver solid web experiences to a growing number of contexts.

Build a responsive site in a week: designing responsively (part 1) - Everyone is talking about responsive web design these days, and with good reason; as the number of web-enabled devices continues to grow it’s no longer sensible to build fixed-width websites.

Responsive Web Design: Layouts and Media Queries - But I wanted as a conclusion, to emphasize the fact that media queries are not only about mobile optimization. We tend to see more and more mobile device, but also more and bigger screens.

CSS Animations Between Media Queries - Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger?

50 fantastic tools for responsive web design - There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we’ll keep the focus of this article on some top tools that will help you become responsibly responsive.

Handling typography for responsive design - Even from this simple example you’re probably starting to see that you could be a whole lot more detailed about where you add breakpoints for your type to control line length. Then what about leading and hierarchy?

UX Success Starts With a Good Strategy – It’s no secret that working in teams and having an outlook for success are attributes of a successful athlete. Today I want to talk about our first lesson from the field: success is all about strategy.

Build a responsive site in a week: images and video (part 3) – Media assets like images and video have prescribed dimensions set in pixels. We can scale these down of course, but that means downloading larger files than necessary, and bandwidth can be expensive.

Build a responsive site in a week: media queries (part 4) - Today, we will move beyond our pattern portfolio and build the individual pages required for our website. In doing so, we will see how media queries are constructed, and implement them in a truly responsive way.

Build a responsive site in a week: going further (part 5) - I’ll conclude this series by looking at how we can improve the responsiveness of our sites by testing across a wide range of devices and through continuous design iteration based on usage

Five responsive web design pitfalls to avoid - Creating great responsive experiences requires a hell of a lot more than media queries. If you think creating squishy layouts is all this responsive thing is about, you’re missing the point. Creating adaptive experiences is a smarter way forward, but that doesn’t mean this approach isn’t without its challenges.

 

Webdesign in Common, Web Typography, jQuery, Tools, etc.

Fake Bolding of Web Fonts - If you’ve been (ab)using Google Web Fonts for your custom font needs, you most certainly would have tripped on this problem: Faux Font bolding.  Most browsers synthesize the bold weights of fonts that do not posses a bold weight.

Helpful Code Paradigms for Frontend Web Developers - There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend. There are many ways you can save ..

How to optimise a JPEG image for the web - Nowadays, having a slow website is simply not an option. In most cases, you can point the finger of blame at your images. Your images can be held responsible for sluggish loading times and will therefore affect your website’s overall performance.

A Closer Look At Font Rendering - The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges.

8 Do’s and Don’ts of Effective Web Design - Here are some fundamental do’s and don’ts of effective web design that can take you a long way in designing pages that are optimized, convertible and actionable.

Create a Website Planning Spec Before You Build - Website Planning is one of the most critical pieces of website development, yet it’s the piece that I see Website Developers skipping over most often.

Type Effects in Web Design: It’s All About Moderation - Type effects – from bolding, italics, tilting, strokes and underlines – can make or break the typography on your site. Using type effects in moderation is the key.

Type study: Techniques for using novelty fonts - When used well, decorative, display, or handwritten fonts can make the difference in a design. We’ll take a look at a blog design, and examine techniques for swapping standard fonts and novelty fonts to make the design more…well, novel.

Tools and methodologies for better coding - But do keep in mind that however many tips and techniques you embrace, it actually means very little unless you actually do your work. So, with that in mind, I would like to offer some of my favorite workflows and methods for organization and optimization.

The Future of Web Typography - So what can a designer do to ensure all users see the site in the way they intended? Where there was once limited flexibility, there are now many options to implementing these non-standard fonts.

Are Hover Events Extinct? - Put another way, did the iPhone kill :hover? Read on to see how iOS handles a CSS hover event, what that means for you as a developer, and how you should or shouldn’t be using hover events in your designs.

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

25 Photoshop 3D Effects Tutorials - Many of the tutorials focus on 3D text effects, and others show various objects designed in 3D. Whatever you are looking to design, you should be able to find a tutorial here that will show the steps needed.

Absolutely Fresh And Useful Adobe Illustrator Tutorials – Here we have put together a collection of step by step Adobe Illustrator tutorials to help you learn loads of useful techniques. We hope that you will find this collection of tutorials helpful for you.

Apply Graphics to Textured Surfaces With Displacement Maps - Do you ever wonder how Photoshop masters create such realistic compositions? Seemingly simple tasks such as throwing some text onto a brick wall can easily lead to lackluster results if you don’t know what you’re doing.

25 Nice InDesign Tutorials for Inspiration - Adobe InDesign is one of the leading solutions for creating professional layouts for print and digital publishing. InDesign is the perfect choice for a document that needs some creativity and used to create works such as posters, leaflets, brochures, magazines, newspapers and books.

Warping Text to Fit into Shapes with Illustrator - We will teach you how you can do this kind of text warping into shapes in Illustrator. You can use this to create a more impressive graphic or title effect on your print booklet designs or brochure printing template, or in various printed materials.

What is Typography? A glossary for designers - In this article we’re going to help you answer the question: What is typography? This glossary of type terms will help you understand the terminology of type. Do you know your aperture from your ascender?

50 Photoshop Tricks for a Fast-Paced Work Environment - Of course, since our go-to design tool in the office is Photoshop, we thought we’d share with you 50 simple Photoshop tricks and shortcuts we love using that can help trim excess spent time in your workflows.

 

Blogging, Social Media, Writing, Content Strategy, etc.

Does blogging get you anywhere? - So, what do clients want to see from designers that will make them consider using you as a vendor? What will keep readers–the RIGHT readers–coming back to your blog so you will be under constant consideration for future projects?

Blogging Mistakes that Hurt Your Brand Image and Hinder Marketing Efforts - A blog on a business website also helps to improve SEO efforts because the search engines reward sites with fresh content and each blog post can rank in the search engines over timebeing done correctly.

 

WordPress

Super useful WordPress action hooks and filters - Action hooks and filters are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress functionality without editing core files.

Embracing Drag-and-Drop Sidebars by Creating Your First WordPress Widget - WordPress widgets are nothing new, having been introduced to the software with much fanfare several years ago. However, in the time that has elapsed since their initial release, relatively few ..

Creating a Simple Twitter Plugin for WordPress - Let’s see how can we make a very simple plugin showing some latest posts from a Twitter account.

WordPress Development: Bypassing the Settings API - The Settings API was introduced in version 2.7 to allow the semi-automation of form creation. All credible Content Management Systems and frameworks have their own set of functions or classes for the same purpose.

How to Remove Default WordPress Widgets and Clean Up Your Widgets Page - Let’s be honest – nobody uses all the default widgets that come with WordPress out of the box. In fact, there are probably a few default widgets that you would never use. Ever.

How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin - I’ll show you a great way to promote your blog post to Pinterest by a useful tutorial How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin.

13 Tips to Speed Up and Optimize Your WordPress Plugins - A common query among the internet users is that they need to know how can they enhance the speed of WordPress apps and optimize the plugins. Frankly speaking, this is never a cumbersome process as there are ..

Taking WordPress Custom Taxonomies to the Next Level - WordPress custom taxonomies are a great way to organise your website’s content, but what are they exactly? How can they be implemented effectively? More importantly though, how can they benefit your website?

10 Basics Steps To WordPress Security - While some WordPress designers don’t give a second thought to the security of sites they design, others turn to a variety of plugins they hope will keep hackers at bay. Others, as you’ll see, have taken a more fundamental approach to security concerns.

 

Search Engine Optimalization, Conversions, Analytics, etc.

SEO Best Practices: Google’s New Traffic Paradigm - In this article you will learn everything you need to know about increasing your web traffic to your sites through Google’s huge free search results.

How To Be Number One On Google - In this posts I want to take it to the next level for Google Authority in Ranking. Google is getting tough on SEOs who produce web content simply to spam the search engines with backlinks.

How to Create a Great Content Strategy for an Established Website- Establishing a comprehensive content strategy for existing pages on your website is a key piece of the search engine optimization (SEO) puzzle, especially considering Google’s ongoing Panda quality updates.

Google Algorithm Change History - Each year, Google changes its search algorithm up to 500-600 times. While most of these changes are minor, every few months Google rolls out a “major” algorithmic update that affect search results in significant ways.

Why forward thinking is the best way to plan your SEO - The basic thread is that SEO should be built on foundations of quality and integrity, not just an obsessive drive for short-term results. It’s clear that the SEO industry is still drawn on the whole black hat vs. white hat issue.

How to Fix Over Optimization Penalty in Order to Please Google - Let me start with a quick introduction to the recent debate on Over Optimization Penalty for those who live under some sort of information proof bunker and haven’t heard a bit about it.

One of My Sites Got the Google Slap - Well I suppose if you play around with grey-hat techniques you end up getting burnt eventually. But even white hat techniques can get you in trouble these days. One of my better niche sites got the Google slap last week ..

The Rise of Negative SEO - As long as Google was doling out penalties, anyone who wanted to could simply turn those penalties onto their competition by doing exactly what Google didn’t want them to do, only for their competitors’ sites, of course.

SEO Considerations When Building a Mobile Website - There are people getting behind mobile search optimization, or challenging the existence of mobile SEO as a genre. This post is not an endorsement of either camp, simply how to include SEO into your mobile strategy.

How To Optimize Images And Boost Traffic - To get more traffic from search engines you have to optimize the content of your site accordingly. Other than text optimization you should go for image optimization to get traffic from Google Image Search.

22 Free Keyword Research Tools - Choosing the right keyword is the foundation of successful search engine optimization. Fortunately there are a number of free online tools to help you identify potential keywords and analyze their strengths.

 

Tutorials

CSS Ribbon Menu - This uses CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup. IE8 and IE9 do not support CSS3 transitions, so the hover state will not be animated for those browsers.

12 Fresh Css3 Tutorials - Css will always play a role in a developers life of coding. I wanted to showcase some of the creative things developers have created here are 12 Fresh Css3 Tutorials.

Interactive menu with CSS3 & jQuery - The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Code a Fantastic Animated Circular Thumbnail Gallery With CSS - Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all ..

Absolutely Fresh And Useful Adobe Illustrator Tutorials - Adobe Illustrator does not need any introduction. It is the most powerful and basic tool used in the designing industry. With the help of Adobe Illustrator you can create several design elements that ..

A Pure CSS3 Cycling Slideshow - Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties.

Showing Product Information With CSS3 3D Transform - There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. How to show our product information with cube style using CSS3 3D Transform.

How to Build an Accordion Image Gallery with only CSS - Fluent animated transitions using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript!

75 top CSS and JavaScript tutorials - A round-up of the very best CSS and JavaScript techniques from around the web, which include advice on building great websites, creating stores and designing apps.

 

Freelance, Business and Workflow Related Stuff

The Freelancer’s Secret to Learning Any New Skill - As a designer, developer and all around creative person, there are some skills that likely came very naturally to you. The learning experience just sucked you in and you enjoyed yourself enough that you picked up this new talent in an impressively brief timespan.

You’re losing clients by committing this one critical web site mistake - So what’s the big mistake? It’s simple: There’s no call to action. As I’ve looked around a lot of design business sites, I’ve noticed a few common trends ..

10 Things to Consider Before Starting a Freelancing Career - There are a lot of great reasons why one would want to venture into freelancing, all of which have been talked to death, but there are also those that should make one take a second guess.

10 tips for managing client expectations - Keep projects moving along nicely by making sure your client knows the score.

Four reasons why you shouldn’t become an entrepreneur - But while Libin suggested that technology means now is the best time in history to start a business, he listed four popular motivations for becoming an entrepreneur that will guarantee the business fails…

 

F*cking Brilliant, a great Read or just magnificent Tips!

An Important Lesson: Never Give Up [VID] ~  He helped me to understand that failure just means we know which route not to take. Keep your head up and continue to push through and eventually you reach the solution you’ve been looking for.

Content Modelling: A Master Skill - The content model both influences and is influenced by the work of several other disciplines. A content model helps clarify requirements and encourages collaboration between the designers, the developers creating the CMS, and the content creators.

Leave a Lasting Impression on Your Visitors - There is no foolproof way to keep your visitors attached at the hip. Through A/B testing you can try new ideas and see if they stick. But ultimately you’ll need to go through many trials before capitalizing on a brand.

Simplicity Isn’t Simple - Simplicity. It’s weaved into conversations about everything from to-do list apps to DVD players. We meet confusion (not the same as complexity) at the door of our design process and turn it away. Confusion isn’t welcome here — although, ..

10 Things to Learn From Failure - Start the recovery process by taking a minute to figure out what went wrong and then make a resolution to gain something from the process. Learn how to improve yourself, your team and your next project.

The World’s Longest Invoice - I run a small business and like the fact that the buck stops at my desk, but I also realize it’s my responsibility (through things like contracts, legal advice, and payment schedules) to be sure that the buck gets there in the first place.

Even website owners should care about code - Although there is no good reason why a client needs to know anything more than some basic HTML they should still discuss code with their web designer. The reason it is important to have this discussion is because how a site is coded has business repercussions.

 

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. Did we miss a great article, please let us know  .. To keep up to date with all the cool links, simply follow me @gonzodesign