.. Your Daily Design Dosis

Tweet Parade (no.11 Mar 2014)

| Comments Off on Tweet Parade (no.11 Mar 2014)

.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! 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.

IP, TCP, and HTTP – When an app communicates with a server, more often than not, that communication happens over HTTP. HTTP was developed for web browsers: HTTP is an application protocol running at the application layer. There are several protocols layered on top of each other.

How To: HTML5 Background Video – Before you begin the design process for implementing a background video on a site, you need to think through the content you want to present, and investigate what type of video will resonate with your audience.

Filling the Space in the Last Row with Flexbox – Flexbox has just the answer for this, the solution is essentially making the children able to wrap with flex-wrap, and then filling the space with flex-grow.

Drop shadow for 2 elements preserving the intersection in CSS – The following code is what I figured out as a solution for drop shadows on two coherent elements while preserving the intersection in plain CSS. This is especially useful for a toggle slide-up/-down function used on a page.

Icon System with SVG Sprites – Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system.

Drop Caps and Paragraph Text Effects Using CSS3 – In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page.

CSS Best Practices and What to Avoid – It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Sass Packing – In my eyes, this technique creates easily scannable, modular, and maintainable Sass files. These are not set rules for anyone, though. Just my practice. I believe any form of organization is better than none.

CSS Regions polyfill – better, smarter, fuller – About one year ago, we created a rather simple polyfill supporting only basic functionality. Today, we would like to introduce a much-improved CSS Regions polyfill library, created by Francois Remy.

Lesser-Known JavaScript Debugging Techniques – I had to learn a great deal about the tools available and in this post I’m going to shed light on the lesser-known features and techniques of JavaScript debugging.

Usability, UX, Responsive Web Design, Mobile, Performance, etc.

Evolving Responsive Web Design – We’ve only become ready to think about things like “responsible” responsive design, adaptive content, and a standard approach to responsive images now that we have built our share of first-generation responsive sites, and encountered the problems that led to the additional pondering.

Device-Agnostic – A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there.

Beyond Responsive – Responsive design is an awesome technique but not a goal unto itself. That’s where a lot of the confusion comes in. We’ve done a really good job of advocating for responsive design.

Lenovo Responsive Web Design Project Summary – Recently, we had the opportunity to collaborate on a responsive redesign for the global Lenovo team.  And though they’re a supplier of smart devices worldwide, their site has not been easily accessible across devices—until now.

The top 10 mobile design mistakes – and how to avoid them – We make decisions as we design and build sites. Sometimes we decide in favour of approaches that meet our needs but cause grief for our end users. Those are mobile design mistakes and these practices need to die.

Responsive Design: Getting Advanced Filtering Right – Designing user interfaces for filtering content lists can be very challenging. Good old and well-established design patterns do exist, but now add small screens and responsive design to the mix

How the BBC should practice Responsive Web Design – If you want to make better products, if you want faster development cycles then embed UX into the development teams and make us jointly responsible for the same objective: a working website.

Responsive Sidenotes – It’s a useful technique to display additional information on devices with ample screen space but still present the information to people using smaller devices.

Is jQuery Too Big For Mobile? – A typical user on an average device and network will take ~50ms to download jQuery and another ~250ms to parse it. If using jQuery improves your productivity enough to generate 3% more revenue, in theory including it is worth the trade off.

Responsive Images: A look at PictureFill and the official Picture Element – PictureFill is the same concept as the picture element, just using spans as a safe, cross-browser compatible alternative. If you can’t wait until the picture element is fully supported by browsers, PictureFill is a light, easy to use solution

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

What’s new for designers, March 2014 – The March edition of what’s new for web designers and developers includes new web apps, photoshop plugins, productivity tools, graphics programs, CSS frameworks, jQuery plugins, and some really great new fonts.

Post-Launch: What After Finishing that Website? – The awesome aspect of post-launch actions is that they are accountable and measurable. Metrics are useful. The only pitfall is to be careful of vanity metrics. eg. Are site visitors really that important compared to your conversion percentage?

Node.js and the new web front-end – Node.js was never about replacing everything on the server with JavaScript. The fact that you can do such a thing is amazing and empowering, but that doesn’t make it the right choice in every situation.

10 web design terms everyone needs to know – Designers can struggle to keep on top of all the different buzzwords and technologies, so here we’ve rounded up 10 of the most essential web design terms that everyone should have at least an understanding of.

The Latest in Web Font Trends – Web font trend data can help us make sense of all those new choices—and give insight into which typefaces are working well on the web, and which might even be overused. Let’s explore where we can find data on what’s popular now, and how we can use that information.

Creating A Website Data Report: Three Degrees Of Separation – A well-rounded report is built with a combination of data gathered from three sources: personal (qualitative research), community (quantitative research) and network (website analytics).

When To Prototype, When To Wireframe – How Much Fidelity Can You Afford? – If any of the answers are positive, and you have the budget and time allocation necessary, then it is worth considering using higher-fidelity mockups, such as interactive prototypes.

4 Common Mistakes You are Making on Your Website and How to Fix Them – Fortunately, the most common errors are easy to fix. Build a site that delivers on brand awareness, clean, focused design and relevant content, and watch your business and consumer base grow.

Why good storytelling helps you design great products – One of the biggest flubs that product teams make is confusing designs that look great with designs that actually work well. It’s a simple mistake, but it can have grave consequences: If your product doesn’t work well, no one will even care how it looks, after all.

The 36 best tools for data visualization – There are many different ways of telling a story, but everything starts with an idea. So to help you get started we’ve rounded up some of the most awesome data visualization tools available on the web.

5 Design Techniques to Incite User Emotion – Create user interfaces that give users a complete experience by offering them something more that touches their emotion. Here are some ingredients you can use to spice up your UI and deliver an emotional and mind-blowing user experience.

Taking A Second Look At Free Fonts – When I hear the words “free fonts,” I still can’t help but picture that horrible CD. But things have completely changed since then, and I find myself actually using free fonts quite often in my projects.

10 Effective Mobile Design Fundamentals for your eCommerce Website – Significant development with the mobile designing pattern to boost eCommerce sales has led various businesses to consider mobile eCommerce. So let us focus on the fundamental mobile designing pattern to increase your eCommerce conversion rate.

How to Crack The Code to an Intuitive Landing Page – A Landing Page can make or break your website – it’s the first thing your visitors engage with when they visit your site. It can determine if they stay around to read more, or close the window without ever looking back.

Are We Thinking About Digital All Wrong? – A strong digital lead with real authority can ensure that digital is included in all management discussions. Finally, a digital strategy can be used to instigate broader discussions about a company’s overall business goals and road map.

Beginner Web Design Mistakes You Should Avoid – Even big brands known for quality can often mess up. I could list a lot of things, but here are the top web design mistakes I see over and over again that need to stop.

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

Debunking the myths of web typography – The Web is awash with poor advice that will lead you to produce inferior work. Collected here are some of the worst myths we’ve found in the guise of advice, and the reasons you should ignore them.

5 Adobe Photoshop Common Mistakes – In this article I have listed some errors that are generally made by the new designers as well as by some more skilled Photoshop users.

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

15 Things To Do Before Publishing A New Post – Here’s a checklist that I go through when publishing a piece of content. It is useful to ask yourself the following questions and make sure to tick all the relevant things off the list before clicking the “publish” button

GOV.UK social sharing buttons: the first 10 weeks – From the figures, it’s fair to say that the introduction of sharing buttons didn’t exactly set the world alight. Overall sharing rates using the buttons are pretty low, way less than 1 percent.

My 43 DOs and 25 DON’Ts of Blogging – Eleven and a half years ago when I hit publish on my first ever blog post. I created a little list of some of the ‘dos and don’ts’ of blogging that I wish I’d known back in 2002 when I started.

How to Promote Your Blog Content: 40+ Experts Share Marketing Tips – One of the biggest challenges that content marketers and blog owners face is trying to get readers to their content.

WordPress

How to Manage and Use Code Snippets in WordPress – However, after a while, the list of codes that we’ve added in the functions.php could pile up and get very messy. If you are experiencing this problem, we’ve got some tips here to help you tackle this.

How to Build a Private Custom Help System for WordPress Clients – If you build or maintain WordPress sites for clients, then one of the challenges you’ve probably faced is that they often need help or reminders about how to do certain things.

How to Improve Usability of Your WordPress Blog? – Usability is a big deal because of Google. They want websites to be usable so they may rank them up on their search engine. Here are a few ways to improve the usability of your WordPress blog.

How to Remove Numbers from WordPress URLs – By default, WordPress uses post IDs (numbers) instead of pretty keyword text in the URLs. This is bad for SEO. In other cases, WordPress will add a -2 in front of your post, page, category, or tag URLs which simply looks bad in front of users.

Beginner’s Guide: How to Use Google Analytics for Your WordPress Site – In this beginner’s guide, I will show you my favorite Standard Reports, and how I use them to grow my blog and connect better with readers.

15 Must-Have Image Optimization Plugins for WordPress – WordPress comes with a wide range of plugins which can help you enable different functions into your site. This includes search engine optimization, profanity filtering, anti-spam protection, chat and comment management.

35+ Resources to Become a Kick Ass WordPress Developer – Luckily, there is a plethora of information available so you can move beyond the basics of tweaking a site so you can start calling yourself a fully-fledged WordPress pro.

How to Set Up a Content Delivery Network (CDN) for WordPress Sites – If your website has an international audience, installing a CDN is really a no-brainer. It’s worth the small expense when you consider the performance improvements you’ll gain.

SEO best practice tips for WordPress – This week, I’ll help your new blog become more visible to search engines, by investigating the world of search engine optimisation (SEO) and offering some best practice tips.

15 WordPress To-Dos To Start Your Site With A Bang – Let’s look at this to-do list I go through as soon as I install a new site. Implement the following tips in order to launch your new site with a bang and give yourself a better chance of success.

Find and Install WordPress Plugins through Github – Github Plugin Search is a plugin created by Paul Clark. This plugin, as the name implies, allows you to search and install WordPress plugins from Github.

WordPress 3.9: An Early Overview – There’s new features, updates to existing one, and even some new surprises in store for those who update.  Here’s your definitive list of the features to look for in WordPress 3.9

Search Engine Optimalization, Conversions, Analytics, etc.

How 90s HTML Coding Will Save The SEO World In 2014 – So, bring back the sprite into your SEO strategies — achieve blinding web performance with an elegant tool that drives traffic and improved conversion rates on the search platform of the future: mobile.

SEO is Dead: Long Live OC/DC – Optimizing Content for Discovery and Conversion, or “OC/DC” for short, encapsulates this idea of amplifying the overall reach and results of content creation.

Using Meta Tags in HTML: Some Basics and Best Practices – Even though the description meta tags have no effect on search engine rank, they do appear in search results. So while a good meta description will not improve your ranking, it will increase click-through rates to your website from search pages.

Tutorials

40 Useful Tutorials And Articles For Web Developers – This compilation presents 40 tutorials and articles for web developers. These resources not only save their time but will also make their workflow more fun and easy.

How to Create Smooth CSS3 Animation Styles and Effects with Ease – CSS3 animation styles and effects give your more freedom to create the design you want. Today, I’m going to introduce to you different transitions and effects that can be done using only CSS3.

Tilted Content Slideshow – The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations.

How to Create an AJAX Contact Form – In this blog post, you’re going to learn how to create a website contact form that submits the form data using AJAX. We’ll be using jQuery to help simplify the JavaScript code and a simple PHP mailer script to handle sending the form data via email.

Create a Cool 3D Tilted Layout with Tilted Page Scroll – First things first, the plugin will have to detect when each element is in the viewport and to do this I had to bind a method to the scroll event so that it loops through each element and detects the location in real time.

Freelance, Business and Workflow Related Stuff

The Realities of Running Your Own Design Business – Don’t let these points dissuade you from starting a design agency – that’s not the point. It’s worthwhile to know, though, that the road isn’t always smooth. The more prepared you are, the more enjoyable the journey.

5 great ways to win clients over – So don’t worry if you can’t pull off ‘badass ninja rockstar guru’. Let that myth go. Instead, figure out what type of selling style you are good at, play to those strengths, and bring something even better to the table.

Are freelancers actually losing out by working alone? – According to a recent study conducted by Erasmus University, Rotterdam School of Management, the answer is, apparently, yes – supposedly the practice of working alongside other freelancers is conducive to productivity.

Too Much, Too Fast. What To Do About Information Overload – Do you feel like you are drowning in a sea of information? In this post, I share a brief overview on information overload. I also share four tactics for overcoming it.

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

If It Isn’t Broken, Don’t Fix It – Over the last few years, I’ve been noticing a disturbing trend in UX design: changes in the design of successful software user interfaces that actually degrade rather than enhance the user experience.

Design is Decision-Making – What is design? What does it mean to design something? What does it mean to be a designer? The last few weeks I’ve been thinking out loud about some specific design topics, but I’ve danced around the central question of what is design.

– § –

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

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

Sorry, comments for this entry are closed at this time.