.. Your Daily Design Dosis

Tweet Parade (no.50 Dec 2013)

.. 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.

Tweet Parade 50

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

Node.js Is Big, And Still Getting Bigger – Shortly after application programming interfaces (APIs) became popular and useful, companies sometimes found it sometimes difficult to manage them flexibly and to keep complex networks of applications working smoothly.

Animating Vectors with SVG – SVG is an XML format, which means it is possible to write by hand or to script. The most common way to create an SVG file is through the use of various drawing applications like Illustrator, Inkscape or Sketch. All of them open and save the SVG format.

How to create a filterable gallery with jQuery – We see filterable galleries in plenty of portfolios, they’re a nice and tidy way of showing off different categories of work. We’re going to build a filterable gallery using the data attribute that came with HTML5.

7 little known but super useful PHP functions – PHP have lots of built-in functions, and most developers know many of them. But a few functions are not very well known, but are super useful. In this article, I have compiled little known but really cool PHP functions.

A beginner’s list of JavaScript gotchas – I consider myself a novice when it comes to coding in JavaScript but lately I played a bit more with this language and stumbled upon a few random things I thought were worth sharing.

Converting your CSS project to Sass – There is plenty of documentation and know-how going around with starting new projects with Sass and Compass, but taking the time to convert an existing project over could use some help. Here’s a step-by-step guide

Cross-browser filters with CSS and SVG – For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the –webkit-filterCSS property to apply graphical filters to HTML content.

3 Ways to Turn Web Images to Grayscale – We are going to walk through some methods that we can use to turn images grayscale. We’ll also look into the stumbling blocks of each method and near the end, we will combine these methods to achieve a grayscale image that works across different browsers.

Make better websites with browser developer tools – Browser developer tools allow us to inspect, edit, debug, log and profile our HTML, CSS and JavaScript, and include an exhaustive range of features and functionality to aid us in these tasks. You can improve your development workflow by getting to know how these tools work.

How to use HTML5 geolocation – You’ll then learn how to take those co-ordinates and feed them into the Google Maps API to reverse-geocode those values and produce a live in-browser map of your current location, complete with a place marker.

Usability, User Experience, Responsive Web Design, Mobile, etc.

From Responsive to Adaptive design – Which is the best of 4 design options for multi-device design? – The presentation started with my outlining the challenges and options that we face today when considering the development of a new digital platform.

Intentional Breakpoints with CSS Transitions – Introducing CSS transitions alongside media queries in your responsive website can smooth out those breakpoints, making some design decisions appear less like a mistake and more intentional.

The Four Waves of User-Centered Design – Technology has evolved dramatically over the years, but focusing on the user needs and business indicators has successfully guided us though frequent and often dramatic industry transitions that came in four distinct waves.

Front-end and UI style guides – This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here to demonstrate the many uses of these documents.

The top 25 responsive design tools – This article takes a look at some of the most helpful responsive resources and tools that have emerged that will help you on your responsive journey.

Good accessibility is good web page design – In case you think that the internet is becoming a friendlier place for screen readers, go take a look at any modern social network in Lynx, it’s not a very pleasant experience is it?

Why Bother with Accessibility? – Web accessibility is the degree to which a website is available to as many people as possible. Accessibility is most often used to describe how people with disabilities can access the web.

Mobile First Media Objects – The media object by definition is flexible enough to hold images and content of varying dimensions and types, so the above examples may not be a one size fits all solution.

13 really useful responsive design tutorials – We’ve rounded up these really useful tutorials to help you from day one. From typography to imagery and layout to responsive design tools, you’ll be a pro before you know it.

Accessibility isn’t a buzzword, it’s personal – Accessibility isn’t about screen readers, contrast, or big fonts. Accessibility is about people. When I say people I don’t mean those people over there with a big “disabled” label.

Holistic Performance – Bad performance online is not a technological problem; it’s a cultural one. Only by thinking about performance throughout the process can we reverse the trend and start making experiences that delight our users, not frustrate them.

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

Anatomy Of A Grid-Based Website – The existence of grid-based design approach for the print dates back to the post-world war era. Grid-based website offer a visual balance and a hierarchy of importance often eliminating anarchy and confusion.

How to Decide on a Color Scheme for Your Website – Color goes beyond aesthetics and has possible effects on the behaviors of your website’s viewers. Deciding on a color scheme can be a difficult choice, with so many combinations and choices it can be hard to choose something that represents you.

10 small business web design disasters to avoid – Creating a website requires a large helping of planning and strategy as well as a good pinch of skills thrown in. To avoid web design disasters, make sure you keep an eye out for this list of disasters to avoid.

What’s new for designers, December 2013 – What’s new for web designers and developers’ includes new web apps, graphic design tools, inspirational resources, web design tools, icons, typography resources, and some really great new fonts.

A Survival Guide To Web Fonts – Basic type design became something of a forgotten art, but it’s come back into vogue again as a way to fight software bloat. Then again, it also helps to understand the ins and outs of modern embedded typefaces as well.

10 Fresh and Handy Tools for Developers – a collection of tools which will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of your project.

Designing A Website For 2014 – As we have been working to give our website a fresh coat of paint, I’ve come across some current design trends that we may or may not implement, but wanted to share with you.

A Comprehensive Guide to Effective Portfolio Websites – In this article we’ll take an in-depth look into the topic of portfolio websites. We’ll start by looking at keys to effective portfolio sites. Then we’ll move on to look at the options for creating your own portfolio site.

15 jQuery CSS Plugins to Speed Up Your Coding – instead of using bloated plugins which have features you will never use by which to produce certain elements within your web project or page, the following jQuery & CSS plugins will allow ease of workflow, and produce similar if not better results within your projects.

Quick Tip: Embedding New Google Maps – The all new Google Maps was made openly available to the public back in July, but it’s still a preview of what the final product will be and therefore lacks a few familiar features.

Designing E-Commerce Websites Properly – Basically, the website selling the e-commerce products has to be focused on the clients’ specific needs when buying online. Every step of the shopping and buying process should be designed to give customers a great experience.

The essential ingredients for perfect parallax UX – There are all sorts of options for engaging users, but one of the most popular is parallax scrolling. Parallax scrolling uses a script to move elements on a webpage at different rates, creating the impression of depth.

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

Best Free Fonts of 2013 – time for our “Best of 2013” series, where we look back over the past year and pick our favorite freebies and resources. To kick things off, we’ve went back through all of the free fonts we’ve discovered in the past year.

Visual Style Guide Template for Logos – With a style guide, you can guarantee that your logo will look its best and stay consistent at all times to help build your brand integrity. Create alternate layouts, color schemes and complimentary typography so others know what logo to use in which situation.

100 Photoshop tutorials to level up your skills – Love it or hate it, Photoshop continues to be the design software of choice for millions designers across the globe for a wide range of tasks, including photo editing, graphic design, typography, illustration, 3D modelling and animation.

The designer’s guide to special characters – When it comes to clear writing, the importance of the mechanics of spelling, grammar, and proper punctuation are always stressed. However, the importance of using the correct typographic special characters is often overlooked.

Get started with type design – As a designer, once you develop a passion for typography, the logical next step is to want create your own lettering, and new technological developments are making this easier than ever.

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

15+ Places to Promote Your Blog On The Web – No matter how good your content is, earning a regular readership requires promoting your blog to audiences who would find it useful. Where should you be promoting your blog to help connect with readers and help them fall in love with your content?

Warning: If You Have A Facebook Fan Page, Read This… – Then I stumbled on an article from AdAge where Facebook openly states that fan page owners should expect their organic reach to continue to decline over time… and the best way to get your stuff seen is to pay for reach.

How to Use Tumblr for Marketing – The beautiful thing about Tumblr is that it makes it really easy to share your content with millions of Tumblr users… so you can get a big audience without spending a ton of money on marketing.

The Complete Guide to Designing for Email -Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it’s worth employing as many tricks in the book as possible to make sure your message gets through.

How to Fix Image Upload Issue in WordPress – This can happen due to a number of reasons. Its possible that your web hosting provider ran an upgrade and something caused the file permissions to change. It is also possible that a hacker made those changes while uploading a backdoor hack

Spam Filtering with Akismet – Today, spammers target everything. Your contact form is no exception. Contact Form 7 provides several ways to prevent spam, and cooperation with the Akismet spam filtering plugin is an important part of the prevention strategy. In this article, I’ll show you how to implement Akismet on your contact form.

5 Ways to Optimize your WordPress Website – The benefits of having a well-performing website are many but the most important ones are: improved user experience, better ranking in the search engines and last, but not least, lower hosting expenses.

14 Insights into Semantic Search and SEO ~ he term semantic comes from linguistics and is all about finding meaning in language. Apply this to search and you get semantic search, which seeks to provide more accurate results.

What is Mobile SEO? [FAQs] – What should you do to rank high in mobile searches? And how are search engines responding to the trend of ever-growing mobile web usage? You’ll find answers to all of these questions below.

Tutorials

12 Awesome CSS Tutorials – It’s crazy and amazing that CSS can now handle a lot more today them it did 5 years ago and codrops is doing really amazing work with CSS as you will see in this post about 12 Awesome CSS Tutorials.

Progress Button Styles – A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Easy Display Switch with CSS and jQuery – I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries.

Tips for Finding Flow – Flow is also a priceless state of mind when it comes to work-related tasks. When someone is in flow, they can get a lot of tasks accomplished, do it well, and often quicker than expected.

How to Deal Effectively with Drastic Deadlines – Fortunately, there are some tactics you can use to effectively deal with most deadlines–even drastic ones. In this post, I take a look at 19 of those tactics–focusing on what you can do before, during, and after your project.

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

How Important Is To Have Always Visible Navigation? – Mobile devices are quickly becoming the de facto way to access the web if they aren’t already there. When people are visiting our sites they’re more commonly visiting on a smartphone or tablet where we’ve chosen a responsive pattern that hides navigation by default.

The Line Of Least Resistance – We need to permit ourselves to keep the vision going — from the ones whom we got it from, to the ones coming to get it. We all have the tools to do it. We just need to be responsible with them.

The Responsive Hover Paradigm – While content can be our top priority, let’s not forget that our designs and interactions, hovers included, can have a great positive impact on how visitors experience our site. Hover wisely, friends.

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.