Tweet Parade (no.04 Jan. 2013)

.. yep it’s Saturday, .. time again for 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.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Creating an HTML5 Responsive-Ready Contact Form with JavaScript Detection – Some HTML5 enhancements often require fallbacks for our projects, through polyfills or fallbacks. Here we will show you how to create an HTML5 enhanced responsive-ready contact form with custom JavaScript feature detection.

You Don’t Need the DOM Ready Event – It usually takes a long time for the DOM ready event to fire. During this time, many parts of a webpage are inactive as they wait for Javascript to kick in and initialize them. This delay is significant and makes a rich web application become available slower. Creates a bad user experience, doesn’t adhere to any design pattern and is, really, not needed…

The Importance Of HTML5 Sectioning Elements – Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade. The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements

Sneak Peek Into The Future: Selectors, Level 4 – Selectors have been with us since the beginning of CSS, but now they are at the fourth level and have gotten a lot of cool new additions. I won’t describe the entire document — only the new additions in Level 4.

The pro’s guide to CSS layouts – This article is about those new CSS layout methods. About properties that are well implemented and that you can use now; properties that are beginning to appear in experimental builds; properties that are merely proposed, highly subject to change, and may never appear at all.

Front-end performance for web designers and front-end developers – It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web app, right through to a full-scale ecommerce project.

Getting Started With The Canvas API – In this blog post we are going to run through the basics of how to start using the Canvas API in your own web applications.

Tap, Zoom & Dynamic Gestures with Gesture Events – New browsers like Internet Explorer 10 have advanced touch experiences using gesture events. There are a few first steps you can do to make sure to help your site become touch-friendly yet also have it work well across many input devices while supporting many modern browsers.

Defending Presentational Class Names – The use of presentational class names in web development has been considered a bad practice. Should presentational class names always be avoided or is that too dogmatic? As web development changes, perhaps it’s time to reexamine the issue.

Coding Q&A: CSS Performance, Debugging, Naming Conventions – Welcome to another round of Smashing Magazine CSS Q&A — the final one, as of now. One more time, we’ll answer the best questions which you sent us about CSS.

What is SVG? [Guide to SVG Part 1] – SVG (Scalable Vector Graphics) is a very useful tool for drawing shapes and figures with simple code.. In this series we’ll be going through the basics of SVG, including how to use it and what it can do for you.

Can I Still Use Px? – Moving from static to flexible layouts involves a move from absolute to relative measurements. That generally means giving up px in favor of ems for vertical measurements and % for horizontal measurements.

2012 into 2013: web standards in perspective – In this article we round up the more exciting happenings in the world of web standards in 2012, and cast our eyes forward to comment on what’s likely to be hot in 2013.

HTML5: 20 Tips and Tricks to Properly Encode its Pages – Here is a list of 20 tips for coding your pages properly in HTML5. All of these tips, put together, will improve your SEO, meet certain standards W3C or improve compatibility …

Using PHP Data Objects – Thankfully a database connectivity saviour does exist in PHP, PHP Data Objects. The idea of the PDO library is that it provides a standardised foundation on which you can connect to any relational database management system (RDBMS) that can be queried using SQL.

The mysterious WebKit placeholder overflow bug – A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason.

Tips for Designing in the Browser – Only in the last few years, since the dawn of responsive design, have designers gone back to their roots and started designing in the browser.

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

Using Responsive Design To Rewrite Your Sentences – In addition to the usual stuff — scaling images and headlines, changing some alignment settings, rearranging elements — 37signals is using responsive design to edit a sentence of text. Specifically, its introductory text at the top of its site changes based on how wide your browser/display/device is.

Adaptable content – In this way, adaptive and responsive design provide the perfect backdrop for rethinking your content. Because as you stop being able to dictate precisely where a piece of information will be displayed on a given page, you’re forced to instead start thinking in terms of systems and packages of information ..

Think Again: Assumptions About Mobile To Reconsider – The popularity of mobile has skyrocketed over the past few years. Design and development have gone all the way from static and desktop-centric to responsive and device-aware. And it has been a very exciting journey.

Flat UI is not the only way forward – There isn’t really anything to be true to, except the user and helping them understand the device and its apps as easily as possible. If you can use textures and UI effects to help you with that goal, I think you should.

UI Design Guidelines for Responsive Design – With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, we need to evolve the way we think about design and the user experience as well.

Five killer ways to use contingency – Contingency design accepts the fact that anything you build will fail at some point and focuses on failing well. A failure may be the user’s fault, a system fault or something else entirely.

Usability Mistakes to Avoid When Using Photos in Your Website – However, using the wrong photos can degrade your users’ experience on your site. In this article, I’ll go over 8 potential issues your photos can have that will lead to poor website usability.

How to build user confidence in your UI – The key to great user interface design is user confidence. But designing user confidence isn’t the easiest thing in the world. Confidence is important because you don’t want the user to get annoyed at all with the interactions in your websites or apps.

User Interfaces: Techniques, Pros and Cons when Designing UI Elements – The responsibility for designing beautiful and crispy user interfaces relies on the designer, because he will have to make the design decisions and implementations required.

Retina Ready Images and Responsive Web Design – With that said, let me explain to you why Retina ready images and Responsive Web Design go hand in hand and how to create such images for Responsive Web Design.

Implementation, Mental and Representation Models in User Experience – One of the main goals of great user experience (UX) design is to make your product easy and pleasurable to use.

Stop Misusing Select Menus – Sometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have less than 5 options for users to select from, you should use radio buttons

Carousels – They’re everywhere on the web. There’s a 95% chance you’ve created one. But despite being so omnipresent, little is said about our splashy little auto-rotating frenemies. Let’s fix that.

The Ultimate UX Design of: the Sign-Up Form – Let’s learn how to create a perfect sign-up form! We’ll go through a couple of examples and best practices, then by simply focusing on: safety, clear explanation, minimal form and engaging copy, we’ll create our own perfect pattern.

4 Reasons Your UX Investment Isn’t Paying Off – I’ve based the following list on observations accumulated over my years as a UX professional. These are some common organizational “behavior” patterns that can make even the best UX efforts ineffective.

CSS: Responsive Navigation Menu – I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly.

The New Multi-Screen World – This multi-screen behavior is quickly becoming the norm, and understanding it has become an imperative for businesses. Here are a few insights from Google’s latest research study

Mobile Sign Up Forms Must Die – It’s hard to get people to download your mobile application. But if they do, what greets them when they open it up for the first time? In fact, you might want to consider a gradual engagement approach instead.

How to Make Sliders Not Suck – If you haven’t heard, sliders (almost always) suck. There are many many reasons why sliders aren’t a good idea most of the time. But we, as designers, need to know where and when to use them so they don’t suck.

Responsive: A Task for the Developer or the Device? ~ Let’s focus on semantic markup and accessibility while pushing the state-of-the-art forward for mobile browsers. Maybe then we can eliminate the overhead of building responsive and mobile-only sites for everything from watches to TVs.

The Ultimate Guide to Developing Mobile Websites – At this point, everybody should already know how important it is to have mobile optimised websites, and how much more it will become in the immediate future. So, let’s dig in!

Effectively Planning UX Design Projects – Planning user experience (UX) projects is a balancing act of getting the right amount of user input within the constraints of your project. The trick is to work out the best use of your time. How can you get the most UX goodness for your client’s budget?

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

Understand the Favicon – The classic favicon.ico is a 16×16 ICO file, often served in either 16-color or 24bit alpha-transparency format. More recently, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers.

25 Free Dropdown Menus in HTML5 and CSS3 – Polish your CSS3, jQuery and HTML5 skills and learn new techniques. We really hope that you would like this collection and find it useful. Here are the 25 Best Free Dropdown Menu HTML5, jQuery and CSS3 Tutorials

Reduce the HTTP Requests For Better Performance – Maybe you’ve never taken a look at the internal coding on your blog, but it’s time. Especially if it takes forever for your blog to load. Each time someone loads a page of your blog, every single aspect that has an HTTP involved has to reload, too.

Coming Soon Pages 101: Their Importance and Main Tasks – So to break it down to the simplest form, a coming soon page is a page your visitor will visit before the main site will be launched, so we could classify a coming soon page as a “destination page” or landing page.

Website Design Reloaded – It’s Usability that Counts and Not Striking Visuals – There is very little doubt that usability oriented websites work big time for the target audience. It’s all about usability and here are a few ways that will help you improve the usability of your website

What’s new for designers, January 2013 – what’s new for web designers and developers includes new web apps, jQuery plugins, API tools, design tools, content creation resources, CSS and HTML frameworks, InDesign resources, ..

Parallax Scrolling on the Web – We should also keep in mind that extra browser/device testing is necessary. Some implementations can harm performance and won’t work well in touch environments. Parallax sites can be great fun, but please, implement with care.

Getting Started With the WebKit Layout Code – The first thing that may stump a beginner is quite simply the definition of WebKit itself. WebKit is not a browser, it is a rendering engine.

Flat design vs. skeuomorphism – It seems that there has been a line drawn in the sand. A few brave design pioneers have all but denounced skeuomorphic design as yesterday’s news and have voted it off of the proverbial island.

How to Improve Your Website – A Checklist to Answer Before to Start It – a checklist for those who have decided to optimize their website and those who is developing the website from scratch and want to know things that may be essential for the further site improvement.

Creative Layouts and Interactions in Web Design – Creative design that differ from the usual layouts can be quite difficult to imagine and execute but when done well, they can make some of the most interesting and engaging websites.

Creative Techniques for Single-Page Websites – In this article I would like to go over some interesting techniques you’ll find in single page websites. Hopefully these ideas may provide inspiration for younger designers who are looking to move into this area.

Carousel Interaction Stats – Carousels. That gem of a web feature that clients love, and many developers hate. I’ve been assigned many times to retroactively add them to sites that have already been live for years. This led me ask how much are users really interacting with the carousels.

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

The Serif Readability Myth – It turns out that, as with so many of the things we “know” are right, the idea that serif typefaces are more readable than non-serif typefaces simply isn’t supported by the evidence.

Typographic Myth Busting:What’s a Ligature, Anyway? – The truth is, that the term ligature just means “connection” (from Latin ligari). The term itself doesn’t imply a certain purpose or use itself. Today, there are two possible ways to define a ligature and both ways can appear in connection or individually.

How to colour-match your print projects – Getting your colours in print to match what appears on screen, or something you’ve previously printed, isn’t always straightforward. We explain how to achieve consistency. A few simple steps you can take to improve your colour matching

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

5 Things Bloggers Need to Know About Responsive Design – This is what happens to your readers if you don’t have a mobile-friendly site. To help you figure out if it’s right for your blog, here answers to the five most basic questions about responsive design.

Create a design blog: 7 pro tips – The web, and in particular the blogosphere, is a crowded place. With so many blogs out there, it’s important to make sure you create a design blog that stands out from the crowd in more ways than one.

Email Marketing: 6 Best Practices to Implement Today – Instead, regardless of your industry or audience, keep the following best practices in mind. And also–you’ll want to frequently test a variety of email variables and keep a close eye on your analytics.

Take Control of Your Social Snippets – In order to maximize the visibility of our content we need to control how it looks as a social snippet. A good social snippet has the potential to attract a lot of extra visitors to our websites.

The Ultimate Guest Blogger’s Guide for 2013 – Guest blogging has seen significant growth over the past few years, partly due to changes in SEO, and partly causing them, too. The trend of sharing original articles on other relevant ..

WordPress

The WordPress Theme Customizer: a Comprehensive Developer’s Guide – The theme customizer was introduced in WordPress version 3.4. In this tutorial, we will look at exactly how this feature can be added to a theme.

Theme Customizer – Introduction – Throughout this post series we’ll take a look at benefits of using Theme Customizer over “old” settings pages, go through how Theme Customizer works, see how you can extend it and finally create Theme Customizer boilerplate that can be used with any WordPress theme.

Google Analytics for WordPress, A full integration and usage guide – This article is a full guide about the use of Google Analytics in WordPress. We will do a brief review about the Google Analytics service. As you may know Google analytics is the most widely used service for web statistics.

Customize External Links in your WordPress Posts – Hacks to edit the link styles for opening into new windows, or dynamically setting the title tooltips. I have put together this brief guide for editing custom settings with your anchor links through WP functionality.

32 Ways to Speed Up Your WordPress Site – Load time greatly effects how visitors interact with your website. Fast load times make your visitors happy, and slow load times frustrate users and cause them to leave. Duh. Everyone knows that

Understanding and using Post meta in WordPress – But as you start using WordPress for different types of site and start publishing different types of content using WordPress you might find the need to associate more content with the post.

A New Way to Use WordPress to Kill Your Competition – Using WordPress as an intranet will not only set you apart, but the market for using WordPress as an intranet is virtually untapped.

Setting Up a Local WordPress Testing Environment – Having a local test version of your website is a must if you modify or update it often. So here’s an article that will try to explain how to set up a local testing environment for your WordPress powered website.

The Top 6 WordPress SEO Mistakes & How to Correct Them – So what are the most common SEO mistakes for WordPress sites? I’ve used data from wp.io to help draw up a list of the most common mistakes found on WordPress sites.

Allow More HTML Tags in WordPress Comments – for example, tech bloggers may want to support PRE tags so commenters can post code. Luckily it’s quite easy to allow more tags within your WordPress comments

Easy Steps for Hardening WordPress Security – First of all, make sure that any and all PCs and web servers you use are kept properly secure. Make sure you’re running the most recent release of your favorite web browser, and make sure that it’s set to automatically patch.

Search Engine Optimalization, Conversions, Analytics, etc.

URL structures and analytics – It’s well known that good URL structures can help SEO, but how often do we think about the impact of URL structures on analytics? We should. It would all have been so much easier if the URL structure had been implemented in a more logical way.

The 4 SEO Factors on Single Post Pages – While the SEO on the pages is certainly important, most of your organic traffic is going to individual posts so it’s even more important to make sure the SEO on each post is up to par.

Will 2013 Signal the Death of SEO: 2013’s Predictions for the Industry – SEO has adapted to its new rules and will likely transform again in the new year as well. Curious what’s ahead? Let’s look at how SEO will change in the coming year.

Can Going Responsive Hurt Your Search Engine Ranking? – The basic principles when launching a brand new design apply to launching a responsive design (assuming you change all your HTML structure to make it happen).

Identity as a search ranking factor – Your personal and brand identity are both influencers on your visibility in search engines. How and to what extent does the power of your brand affect your rankings?

Designing for SEO – “Why do websites that look great nearly always have SEO that sucks?” To be a true king of the SERPs, you are, of course, going to need more than a well-designed, search-optimised website. You are probably going to need a ton of social mentions, quality links, citations and co-citations, etc.

SEO Strategies for Businesses in 2013 – Check the published posts and try to figure out which types of posts had done the biggest boost, try to find topics that haven’t been covered in your niche to cause the interest of readers and great sharing volume.

Why UI and UX will be important part of SEO in 2013? – What do visitors do when they come calling? How does your UX/UI (user interface/user experience) design affect SEO? Why is user interface design linked to SEO success in 2013 and beyond?

Tutorials

Build a Fun True or False Quiz With CSS – There you have it, even if you have no use for a true/false quiz, you should now have some great ideas for using active, tabindex and focus in ways that you may have never considered before.

Theming jQuery UI Accordion – In this post we are going to create something real and functional, and we are going to make use of the structural selector, box-sizing and CSS3 gradients from our previous lessons to create a custom theme for jQuery UI Accordion and sharpen our CSS skills.

Build a powerful ecommerce site with ExpressionEngine – We’ll walk through the process of installing and setting up a demo store and look at the core features and functionality in a BrilliantRetail store, including the various product types, order management system, promotions, reports, and more.

How to Create a Metro Style Accordion – We will be learning how to code a Metro Style Accordion menu in just a few steps. This menu uses jQuery and jQueryUI, it can be done in a few other ways but I will show you the way I do it, it’s just something I feel comfortable with.

:only-child and Breadcrumb Separators – This comes in super handy for breadcrumbs. Often breadcrumbs have a visual separator between the links. Sometimes this is between all list items except the last one.

Create a Retro Navigation Menu with CSS3 – In this you’ll learn how to create a vintage-looking navigation menu using pure CSS3. I hope you’ll enjoy this tutorial and you’ll learn some new techniques.

Freelance, Business and Workflow Related Stuff

Basic Security Tips Every Freelancer Should Follow – But ultimately the largest goal should be security in your own accounts, and with your clients. In this article I want to discuss a few ideas on security which are geared towards freelancers.

How to stop your client ruining your design! – Unreasonable client demands needn’t ruin the integrity of your work. Client feedback is always going to happen, and they may suggest specific design changes; but here’s the secret – DON’T TAKE THESE LITERALLY.

Freelancers, Stop Charging Hourly And Guarantee Your Income With Agile Billing – Cash flow is the single most important thing for your business. Without money to pay rent and bills, the business will quickly spiral into Chapter 11. And if you’re a sole proprietor, the stakes are even higher ..

How to find your niche – Are you trying to grow your freelance web development or design business? By finding the right web design niche, you can increase productivity and revenue and make your freelance business more profitable.

How to manage deadlines – There’s little question, then, that given the rather capricious nature of incoming projects, it’s critical to meet deadlines—after all, there’s no quicker way of losing future work than failing to deliver present work on time.

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

The Post-PSD Era – Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.

Sketching: The Most Underutilized Design Tool? – I would class sketching as a tool, just as I would with Photoshop, Fireworks or any other app I use to help me create the finished product. For me, Sketching is an essential part of the design workflow that would make up a majority of projects.

- § -

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