.. Your Daily Design Dosis

Tweet Parade (no.50 Dec 2014)

| Comments Off on Tweet Parade (no.50 Dec 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.

JavaScript Modules the ES6 Way – JavaScript admittedly has plenty of flaws, but one of the largest and most prominent is the lack of a module system: a way to split up your application into a series of smaller files that can depend on each other to function correctly.

OS Specific Fonts in CSS – What’s the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)? My immediate thought was to use the old trick where you put the User Agent in a data-attribute on the root element that you can select off of.

CSS Animation for Beginners – When done well, animations can add valuable interaction and feedback, as well as enhance the emotional experience, bring delight, and add personality to your interface. In fact, to animate means to bring to life.

CSS Sprites With Sass & Compass – In this article, I briefly introduced you to the concept behind the CSS sprites technique. Then, I showed you the basics of Compass’s sprites generator. There are more options than we have covered here, but I hope you got the idea of generating sprites with Compass.

The State of JavaScript in 2015 – The JavaScript world seems to be entering a crisis of churn rate. Frameworks and technologies are being pushed out and burned through at an unsustainable speed.

ES6 Modules: The End of Civilization As We Know It? – This article shares some techniques and tools for building web apps using future friendly ES6 module syntax. We begin with an exploration of current module formats and ways to work both forwards and backwards in time.

A Browser-Native Modernizr: Using @supports in CSS@supports is supported in Firefox, Chrome, Android (4.4+) and Opera, but not yet Safari or Internet Explorer. That creates something of a paradox: @supports would appear to be only useful in browsers that already support it, leaving the rest out in the cold.

ES6 Modules: The End of Civilization As We Know It? – This article shares some techniques and tools for building web apps using future friendly ES6 module syntax. We begin with an exploration of current module formats and ways to work both forwards and backwards in time.

Exposing Additional Form Fields via Checked Radio Buttons – There is a :checked pseudo class in CSS. I often think of it in connection with the “checkbox hack”, in which you use it on a hidden checkbox with the ~ adjacent sibling combinator to do simulate toggling behavior without any JavaScript.

Flexbox Cross-Browser Inconsistencies – Now, I developed this solution on Chrome so there’s maybe a bit of a bias there – of course Chrome does what I expect. However, I think the differences that other browsers have can be argued to be mistakes; behaviours which you wouldn’t expect given the css.

How to Quickly Set Up Less.js – There are several ways to install and configure Less, but for developing in the browser, or if you’re just interested in trying it out without having to install it on a web server, the fastest way is to reference the less.js library in an HTML document.

How to Make Changes to CSS Animations and Transitions Using JS – When it comes to creating animations, there are two ways you can choose to perform the task – with CSS or JavaScript. Which one you’ll select depends on your project requirements and the type of effects you want in your design.

Integrating SVG Data Using JavaScript – Almost every person in the web development community is aware of SVG (also referred to as Scalable Vector Graphics). SVG is nothing more than an image format (just like JPEG and GIF) used to define vector based graphics.

Top tips (for Sublime Text, Sass, CSS, Terminal and more) – This post is a random collection of tips in no particular order. They are things that made me go ‘A-ha!’ when I found/figured them out. May be you know them all – maybe there will be one or two you hadn’t come across.

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

How to Make a Performance Budget – a good performance budget balances user experience with browser experience. Again, it’s not an all-encompassing strategy, but it’ll get you in the ballpark. I know there are better ways, but none of them give me something to act on in Photoshop.

Why UI and UX Design Mean Nothing Without Great Content – So if I now tell you that it’s the same difference between UI and UX applied to a bad piece of content vs. a great piece of content, you get an idea of how much impact content has.

Collaborative Responsive Design Workflows – Make time to try new tools and techniques and don’t just work on them on the side – start using them on an actual project. It is only when we use a tool or process in the real world that we become true experts.

Understanding & Designing Great Microcopy – Microcopy is littered throughout every website to explain features, interfaces, and minute details. In this post I’d like to cover a brief overview of microcopy and how you can design better interfaces by focusing more on the unique pattern of words.

40+ essential resources for responsive websites – But if you’ve been tasked with creating a mobile responsive design and aren’t sure where to start, this list of resources is sure to give you the spark you need to create a fluid, friendly design that accommodates nearly every mobile device – past, present and future.

8 Usability Testing Tools When On A Budget – For the average entrepreneur, some of these packages are far too expensive. However, as we have said before, usability testing need not be expensive. Indeed, there are many other tools available for the budget-conscious business owner.

Quick And Dirty UX Design Techniques – In this article we will explore a number of UX design techniques you can add to your workflow. These techniques are intended to help you build a representation of the end user experience using different tools and methods to quickly reach a rudimentary portrayal of the end design.

Learning to be Accessible – Working on a project where all users can access and use it well, that’s satisfying. One of my most satisfying moments professionally was hearing from a blind user who was thankful they were able to use our app.

Responsive Enhancement – Progressive enhancement isn’t a technology. It’s more like a way of thinking. Instead of thinking about the specifics of how a finished website might look, progressive enhancement encourages you to think about the fundamental meaning of what the website is providing.

The Pain of Duplicate Scripts – The motivation for this optimization is to avoid the performance costs of loading a script multiple times. Duplicate scripts occur often, especially for 3rd party widgets that might get copy-and-pasted multiple times in a single page.

Everybody Scrolls – It’s crucial to keep design practices aligned with the way users really interact with digital products and interfaces. Our first piece of ongoing research into usability best practices tackles scrolling.

The next UX challenge on the web: gaining offline trust – We’ve so far have done a bad job advocating the need for offline functionality. The web is an online medium. It’s understandable that people don’t expect a browser to work without an internet connection.

Responsive Type and More With Only CSS – It is actually very simple. One unit is equal to 1% of either the viewport’s width vw or height vh. You can also set a min and max with vmin and vmax.

Making Sites More Responsive, Responsibly – A product’s overall experience can make or break its success, and when it comes to defining these experiences our development choices play a huge role alongside more traditional user-focused activities.

Accessibility Teaching Materials: Free Download – I prepared a booklet (PDF) of materials that I use to teach a short class in web accessibility. There really isn’t a great resource for a class in web accessibility that covers the basics in just a few hours.

Instant Fluid Videos with Viewport Width Units – Thankfully we now have access to the vw sizing unit and as long as you don’t have to support old Android devices or IE8, it’s relatively safe to use. Super easy responsive videos.

A Bulletproof Guide to Using HTML5 and CSS3 in Email – While support certainly isn’t universal, many of the leading email clients support HTML5 and CSS3. In fact, about 50% of the total market and 3 out of the top 5 email clients support them. Support may be even bigger for your particular audience.

Researching the Performance costs of JavaScript MVC Frameworks – We’ve long been curious about the performance of popular JavaScript MVC frameworks such as Angular, Backbone, and Ember, primarily because they offer elegant solutions to complex problems and we want to be able to use them in our own client work.

Webdesign in Common, Web Typography, Tools, etc.

Creating a type style guide – As you think about the type on your site, think about the CSS as well, aiming to make it modular and easier to maintain. Creating a style guide can help you get there.

The 80/20 Hybrid Approach to Designing in the Browser – Designing in the browser has been a point of discussion for a few years now and still is. With the web design world switching to flat design, designing in the browser has been seen as the future, but it is really that effective?

7 Design Details Only Graphic Designers Can See – In graphic design, attention to detail is very important. To be a good graphic designer, you must start by training your senses to recognize different design details that only we designers are trained to see.

Designer’s guide to DPI – This guide is designed as a “get started” or introductory read for the starting to intermediate designer who wants to learn or get more knowledge about cross-DPI and cross-platform design from the very beginning.

How to optimize your website for speed, and why you still should – While this phenomenon isn’t disconcerting at first glance, the impact it has on performance and maintainability is awful. Add in aging devices, bandwidth restrictions, or slow speeds in general… and we have a much bigger problem.

50 Most Useful jQuery Plugins from 2014 – We have the 2014 edition of our top 50 jQuery plugins of the year. They are the 50 jQuery plugins that we feel are the most useful, most innovative and most time-saving solutions to many of the modern design and development issues you may have.

Using Golden Ratio In Web Design Is Not Ludicrous, It’s Actually Ideal – Anyone who uses the golden ration in web design is working with the same concept that has been known to artists and architects over many centuries. This concept is based around a natural order of proportion that we as humans appreciate for its perfection.

CSS Back to Basics: Terminology Explained – Confusion can arise mostly due to miscommunication and misuse of similar terms. CSS brings a lot of new concepts to the table. We’ll cover some of the most popular terminology to master as a CSS guru.

50 fantastic freebies for web designers, December 2014 – We’re back with yet another gargantuan collection of free resources to fill up your toolbox and keep you rolling out awesome work well into the new year. We’ve got it all: icons, inspiration, fonts, UI kits and tons more.

5 Common Web Design “Faux Pas” You Should Avoid – Before you implement all the stylish techniques in your design repertoire, consider the unintended usability consequences. In this article, we’ll discuss five common web design techniques and their potential usability problems.

Best of SVG 2014: Icons, Tools and Resources – No matter if you are new to the SVG designer or user crowd or if you have been in it from the beginning, it never hurts to add new helpful websites to your list. Below are some excellent SVG icons, tools and resources, and all are some version of free.

The myth of DIY websites and its impact on web developers – Do-It-Yourself websites are here, and they’re not going anywhere. That’s just a basic fact of our industry. However, there is a large misunderstanding about the ease of use concerning WordPress and other Do-It-Yourself website-building platforms, and it needs to be addressed.

50 CSS Tools & Resources from 2014 – Today we have the 2014 edition of our 50 favorite CSS resources. It’s a huge post of all of the really cool CSS resources, frameworks, libraries, UI kits and tools that have been released this year.

The Best & Worst Web Design Trends of 2014 – As flat design grows more popular I expect other styles to rise up in popularity as well. And even though 2014 has offered a lot it is merely a page in the history of web design as we move transiently into 2015.

7 tips for designing awesome animated GIFs – I usually make them in ScreenFlow, which is also what I use for our product videos. It’s simple enough to learn quickly, but packs some pretty useful animation tools. GIFs aren’t just for goofing around.

Design Considerations: Text on ImagesLearn the methods of overlaying text on images. Picking an image is up to you, but let’s say it isn’t particularly dark. You could darken it in an image editing program, or, with CSS, overlay a transparent color.

Putting Design on the Map – Showing features on a map presents interesting design challenges. When designing maps, the hardest challenge is dealing with how the data is represented and how it is understood by the user.

How to Plan Site Architecture, The Right Way – Planning your website architecture is crucial for the its scalability and success. How do you plan your website architecture? If making a website is like building a house, then planning the content is like laying the foundations.

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

The basics of branding: How to make your business iconic – In a free market, your brand can be your most valuable asset. It helps you stand out from competition, gives your company a clear sense of place and purpose and it’s an important element of customer loyalty.

Why Luminance Is The Key Component Of Color – Because of the way the rods and cones in our eyes work, we’re more sensitive to luminance than we are to chrominance. It’s difficult for us to tell which of two colors is lighter or darker when information about hue and saturation are present.

Eight tips for combining typefaces – The more effective combinations usually rely on typographic principles. These principles are not scientific, rigid, or fail-safe; all of them can be broken, but they should all be understood.

4 Free Artistic Paint, Sketch & Ink Photo Effect Actions – Today’s freebie contains not only an Action to apply that painted effect in a single click, but also 3 more photo effects based on common artistic styles, such as watercolour, pencil sketches and inking.

Ultimate Guide to Color Theory for Designers – This guide explores the subject of color relative to web and graphic design. The information is meant to be introductory while also getting into more applicable topics for digital designers.

How to Create an Icon Set using Adobe Photoshop – In this tutorial, we are going to design a set of icons in Adobe Photoshop. An icon set needs to have the same background and theme. For learning purposes, we are going to design a sun icon, an ice flake icon, and an RSS icon.

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

How to Get More Eyes on Your Blog – Most bloggers will come across one point in their careers where they notice that traffic to their blog is slowing down. If this happens to you, the important thing to remember is not to panic.

How I Reached 100,000 Visitors with These 7 Rules – I’ve taught you a lot about content marketing… from what tactics others are using to showing you what’s working. But I’ve never really opened up and shared the rules I blog by. What you don’t know is that I rarely release a blog post if it doesn’t follow 7 key rules.

Writing a blog: creating a clear blog post structure – In this post, I will give practical tips to help you set up a nice and clear blog structure. Before the end of this year, I will write a final post about text objectives.

The Ultimate Guide to Starting a Design Blog – Are you looking to get more clients for your design services? How about establishing your name recognition and becoming a respected authority in the industry? Writing a design blog can help you to accomplish all of these things and many others as well.

7 Insights to Consider When Redesigning Your Blog – I also started the process by compiling a list of 7 insights I’ve learned from designing client sites and applied them to redesigning my site. These insights were the litmus test for every design decision.


Avoiding Common WordPress Image Issues – I’m talking about using the wrong themes and plugins, and neglecting to optimize your images. So in this post we’re going to look at the three most common mistakes you’ll find on image-heavy sites and how to avoid them.

Leveraging the WordPress Platform for SPAM – We’ve all seen WordPress comment and pingback spam, but thanks to strict moderation regimes and brilliant WordPress plugins that focus strictly on SPAM comments, comment spam isn’t a major problem for most websites these days.

Using Transients with WordPress to Cache All the Things! – If you’ve ever felt the thrill as a Windows user hacking your registry to make one minor adjustment that saves you time or tweaks your system in a particularly rewarding way, you might relate to how cool transients are.

How to Use AJAX in WordPress to Load Search Results – The main benefit of AJAX is that it is asynchronous, meaning the whole page doesn’t need to reload in order for it to receive new data. WordPress is well-equipped for AJAX. It has a great mechanism for working with it, allowing you to implement AJAX functionality with little fuss.

Debugging In WordPress – Debugging your website is very important for any project, you will need to be able to debug your site in all the difference environments from local to live. But depending on the environment you will want to debug in different ways.

10 Useful WordPress Functions You Might Not Know About – I’ve been coding with WordPress for around 8 years now and occasionally I still find something new! Let’s take a look at some of my favourite overlooked functions and learn how to use them along the way.

Adding Action Hooks to Your WordPress Theme Framework – The advantage of creating action hooks in your framework is that any content you attach to them can easily be overwritten by functions in a child theme or by plugins.

Securing Your WordPress Site: iThemes Free Security Plugin Review – iThemes Security (formerly Better WP Security) is one of the top ranked WordPress security plugins. There are many faithful supporters, but how well does it really work to protect your site, and your users?

Adding and Using Custom Image Sizes in WordPress: A Guide to the Best Thing Ever – The image sizing API is one truly great thing about WordPress. I hope this has gotten you a long way toward understanding the what, how, and why of creating custom image sizes and featured image sizes.

The WordPress wp-config File: A Comprehensive Guide – The WordPress configuration file, also known as wp-config.php, is most frequently used to set up a database connection and is then forgotten. Despite its neglected nature, it is a powerhouse of features and opportunities for optimization.

How To Create Your Own WordPress Shortcodes – In essence a shortcode is a placeholder for some other content. A well-known shortcode is the built-in gallery shortcode. Just type into the WordPress editor and it will be replaced by a gallery of images taken from media uploaded to the post.

Search Engine Optimalization, Conversions, Analytics, etc.

Close More Clients With A Quick Local Site Audit – We developed a “quick audit” process that allowed us to spot major local optimization issues with only a few minutes of effort. In fact, this process was so quick, we realized that we could perform the audit while actually on a sales call.

The 4 Hardest Parts Of SEO – I have been doing search engine optimization (SEO) since 2002, and I’ve overcome a fair number of SEO challenges since then. Ultimately, though, the hardest things about the job are not what you might expect.

Thin or Duplicate Content: Not a Safe Bet for E-Commerce SEO – The results of using thin and duplicate content can be fatal for e-commerce sites because Google completely disapproves of these practices. E-commerce offers universal outreach, and is completely accessible at any location and at any given time.

10 days to a better bounce rate – The bounce rate is a percentage of visitors who leave your page immediately after landing on your website without clicking onto other pages. Take time over the next couple of weeks to implement these strategies, and you may just see your bounce rate go in the right direction.


Inspiration for Dialog Effects – A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg. Please note that this was tested in latest browser versions only.

Expandable Image Gallery in CSS and jQuery – A new approach could be to expand the image, make it full-width by covering adjacent content and pushing down lower positioned content, and turning it into a full-width slideshow!

Freelance, Business and Workflow Related Stuff

The 7 ways I handle fear, doubt, and the crazy inner-turmoil we entrepreneurs face – There is a whole industry out there that tries to teach people to conquer these feelings and never again feel fear. It’s all about positivity and changing your mindset. I have to be honest: I think it is all a lie.

6 Common Misconceptions CEOs Have About Web Development – Most CEOs have serious misconceptions about web development. This is a problem because businesses are more reliant than ever on their online presence. CEOs in companies of all sizes struggle with this.

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

Responsible Web Components – I’m worried about this year-zero thinking. First of all, I think it’s self-defeating. In my experience, the web technologies that succeed are the ones that build upon what already exists, rather than sweeping everything aside. Evolution, not revolution.

If you Think Paper Prototyping is a Waste of Time, you’re Doing it Wrong – Quick and dirty is the name of the game, so don’t waste time going overboard. Keep your prototype simple and communicate your ideas clearly. Remove anything that does not add value and focus on expanding upon the idea itself.

10 things that will make you a better developer – I believe everyone can make this step and start being a better developer today. This is why I asked great developers from all around the world what they think makes someone a really good developer.

Lazy-loading Google Maps – On every scroll and browser resize interval the plugin checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn’t loaded before) Google Maps API script file and then initiates the corresponding map instances.

– § –

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.