.. Your Daily Design Dosis

Tweet Parade (no.21 May 2014)

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

Coding in color – We think syntax highlighting makes the structure of code easier to understand. But as it stands, we highlight the obvious (like the word function) and leave most of the content in black.

Linking to fragments on a page – When an element has an ID, you can link to it. All browsers I know will scroll to the position of that ID on the page. Today I found a script that tries to solve that problem. From now on you can link to any text you like on my blog.

CSS: The Good Parts – I’ve decided to pour my thoughts of how the CSS of an application should be modelled into a formal style guide. I’ve been using this approach for over a year, and now I’m also moving to implement it on the job, as well.

Moving A Git Repository To A New Server – Suppose your company decides to change its code-hosting provider or you wish to move your own Git repository to a different host. When I had to move a number of Git projects to a new host, it took me quite some time to find an accurate method.

CSS Shapes Polyfill – The CSS Shapes Polyfill is one method of achieving consistent behavior across browsers. It is a bit of JavaScript that checks to see if a browser supports CSS Shapes; if not, it approximates the behavior with a series of floats.

How should I name my element? – Naming is always a challenging task when developing a component. We can create truly complex pieces of code but we still have a hard time to name a simple variable. The same is true for naming custom elements and we’re here today to help you with that.

How To Unload Unnecessary CSS With Grunt – But, frameworks aim to cater to as many web scenarios as possible. Thus, they include loads of predefined CSS that you may not use in your website as well. In this article, we are going to show you how to unload those unnecessary styles from the stylesheets.

How to easily use Google Fonts with Sass – In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code.

How to Configure Apache to Serve SVG/SVGZ the Right Way – In this week’s episode I’ll explain how to make Apache send the right headers. With the correct headers SVG and SVGZ can be displayed directly in all browsers which support it.

Learning JavaScript as a designer – Don’t let anybody tell you that you can’t learn anything you want. If you want to learn to code, just do it. Figure out the way that works best for you and invest the time necessary to expand your skills.

Single Responsibility – Limit the scope of your modules, keep the styles small, and make sure your modules are properly encapsulated to ensure that your styles are both maintainable and predictable. Use submodules, modifiers, and context classes to make sure that your modules are nice and flex-y.

The Dangers of Stopping Event Propagation – If you’re a front end developer, at some point in your career you’ve probably had to build a popup or dialog that dismissed itself after the user clicked anywhere else on the page.

Advanced Techniques for Professional CSS Development – Once you learn the basics of web development it’s common to either move into backend languages or push further into more detailed concepts.

5 Ways that CSS and JavaScript Interact That You May Not Know Abouf – We have our .js files and our .css, but that doesn’t mean that CSS and JS can’t interact more closely than the basic JavaScript frameworks will allow.

How to Style and Animate SVG Elements with CSS – The purpose of this tutorial is to give you a deeper insight into how a SVG file is constructed and to give you the tools to experiment and animate the SVG files.

How to get started with the Tumblr API, part 1 – Every well known service on the Web has an API we can play with to get its data feed and Tumblr is no exception. In this article I’ll give you a feel for this API and teach you how to make some simple requests.

A Detailed Introduction To Node.js And MongoDB – Node.js is a rapidly growing technology that has been overtaking the world of server-side programming with surprising speed. MongoDB is a technology that’s revolutionizing database usage.

CSS Sorcery: Performing Magic with the Attribute Selector – The attribute selector is any attribute that’s inside of an HTML element. The attribute selector is part of CSS2.1 as well as being IE7 friendly, so everything you see here will work in all the major browsers.

Don’t Name Your Inputs ‘action’ or ‘submit’! – Most browsers have a bug that isn’t really a bug. In fact it was purposely put there to make your simpler, but if you (or someone else writing the HTML code) do something in the right (read “WRONG!”) way, it could completely blow up.

HTML5 Forms: CSS – In the second article of this three-part series about HTML5 forms, we’re going to look at styling or — more specifically — the pseudo-class selectors you can use to target input fields in various states.

SVG `use` with External Source – we can <use> to reference them from elsewhere. Ideally, that “elsewhere” is an external file, because that means that file can be cached by the browser, efficiency!

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

Responsive vs adaptive webdesign, which is best for you? – Responsive layouts generally perform better than adaptive layouts, but in some cases an adaptive approach could serve users better. Either way, the goal is to make your website always look its best at the desired resolution.

Grids with no gutters – On the web, you almost exclusively use flush left, so viewing the grid as a set of guides instead of as a set of columns makes sense. The only “grid” is the grid of the invisible lines by which the text is aligned. So do not mess with gutters, they are not worth your time.

HTML Wireframes – In a traditional waterfall process there’s a clean line between the wireframing phase and the visual and code phases. Developing wireframes in the browser blurs that line, which is nothing but a good thing.

The Difference Between Prototype and Wireframe – even the best design professionals tend to get confused between wireframing and prototyping, and tend to use ‘wireframe’ and ‘prototype’ as if they were the same thing.

Busting the UI=UX Myth – These fields, even though significantly different in nature, sometimes tend to misguide people down a path which says “UI=UX“. But, we as designers know that it’s not true.  So, let’s try to bust this myth today.

WTF is a User Experience Expert anyway? – You may be good with UX design, but unless you have worked on something that’s used by millions of people and/or generates millions of $ in revenue, you are most likely not a user experience expert.

Mobile And Accessibility: Why You Should Care And What You Can Do About It  – Mobile has revolutionized the way we use the web. This is especially true of disabled users, for whom mobile devices open the door to a whole new spectrum of interactions.

How we fixed responsive images – Honestly, at first they appeared a bit daunting, but after staring at my screen for the last couple of hours I’m convinced they are the (immediate) future of responsive images.

Empathy for the User: Experience Design Secrets from an Expert – User experience (UX) designers are among the unsung heroes of the digital world. They make the tools, sites and apps we use simple, understandable and usable.

Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw – Some of the newest and most notable visual responsive website builders are Webflow, Adobe Edge Reflow CC and Macaw. Yes, a million others are out there, but we’ll focus on a few in this article.

How to Create an SEO Friendly Infinite Scrolling Page – If you think that an infinite scrolling page is the best design option for your site, but you also want to retain great SEO, then read on. I’m going to show you exactly how you can achieve both of these objectives

How to Test a Mobile Website – There are many different ways to test websites on mobile devices, but they are not all created equal. Here are five different methods to test a mobile site, ordered from the most ideal to the least favorable.

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

What Makes HTML5 The Future Of The Web? – HTML5 has come a long way to attain the WORA maturity for handling diversified applications in more or less every mobility field. Let’s analyze in detail the countless benefits of HTML5, which are sure to make it a must-use technology for the future.

The Definitive Guide to Form Label Positioning – When it comes to the design and development of forms, one of the most popular topics is the positioning of labels. There are a range of different options, but many articles on the subject touch on only some of the advantages and disadvantages of some of these options.

Why and How to avoid Hamburger Menus – We now have the data that suggests Sidebar Menus — sometimes called Hamburger Menus/Basements, are a bad design pattern and consequently reduce user engagement.

The Startup’s Guide to Budget Design – So I thought it would be interesting to explore the different options out there when it comes to design. But first, a word of warning: no matter which price point you end up selecting, remember that you generally get what you pay for!

10 Ways to Promote Your Design Project – It just takes a little planning and work. Here are 10 easy (and mostly free) ways you can promote a design project. (And all of the examples are from designer portfolios.)

Use The Efficient Power Of Emotional Design To Connect With Your Audience – Designs that use emotion to communicate will usually resonate with more viewers on a personal level and create stronger and more lasting connections with them.

The Emotional Side of UX: Turning Casual Visitors into Brand Evangelists – But there’s one more thing beyond positive UX that can create a stronger connection with users and that is emotion.

Best Validating Tools For Testing Your Website on Mobile Devices – So, if you are considering to develop a mobile version of your website as well then this collection will be helpful for you. Here we have listed down some of the best tools for testing your websites on mobile devices.

Is Infinite Scrolling A Good Solution? – In the end, infinite scroll works for these media sites not because they pay people to make it work, but because they have people, meaning users, that make it work.

How to use filters to enhance your website’s impact – Here we’ll take a look at how sites are using filtered photos to elevate their designs, and then share some more professional tools for creating your own filtered pics, sans-smartphone.

A Maintainable Style Guide – This is bad because once your Style Guide falls out of sync with your application(s) it has entirely lost its purpose. It is no longer a trustworthy representation of the state of your UI and will quickly fall out of favour with the design and development team.

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

Spotify Iconset – A month ago the full redesign was unveiled, and I’ve finally had a chance to write up some of the process and decisions that were made…

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

What’s the Best Way to Grow Your Blog? – There are plenty of tried and tested ways to get more traffic to your blog. I’m going to run through some of the most popular here, and explain what situations each method is best for.

6 Key Shifts in Thinking About Social Media – The report also revealed a number of shifts in focus, as marketers try to stand out from all the noise to get noticed and get results online. Here are six key shifts in thinking that are highlighted by this year’s industry report

Headings and why you should use them – Usually the website owner can’t change a single thing about the heading setup of the website, as he is unwilling or just lacks the knowledge to change the theme of the website. But headings do matter.

57-Point Blog Marketing Checklist – Whether you’re just looking to spruce up the look and feel of your existing blog, or are ready to take your efforts and expertise to the next level, the 57 tips on this handy checklist will support your journey to blogging success.

Never Fall for a Custom CMS. Ever – At some point in the maturation of that dev shop, they faced a choice: do we (1) build our own CMS, or (2) learn to competently use one of the hundreds of available open-source or commercial options available.  I’m completely mystified why people keep trying the first option.

The Big List of IFTTT Recipes: 34 Hacks for Hardcore Social Media Productivity – Here are loads of different options available through IFTTT for powering up your social media marketing. I thought I’d share a few of our favorites and some that might help you work smarter, too.

WordPress

5 Quick Ways to Speed Up Your WordPress Site – This is a quick round-up of simple measures you can put in place to speed up your pages. Optimizing your site can make a big difference in site speed, encouraging them to stick around and engage with your content.

How to Remove the Login Shake Effect in WordPress – In this article, we will show you how to remove the login shake effect in WordPress. The login shake feature is added with a JavaScript file that WordPress adds on every login page. All we need to do is remove that JavaScript.

A look at the posts_where filter in WordPress – The video below walks (quickly) through how I used the posts_where filter to set up queries for specific date ranges. We needed to query payment data (stored in wp_posts) between two dates, which at the time was not supported by the default WP_Query args.

An Introduction to Custom Post Types in WordPress – As you start to understand the power of custom post types, you can see how WordPress can easily be converted from a basic blogging system to a complex custom CMS.

Using WordPress to Create a FAQ System With Custom Post Types – To that end, I’m going to show you how I handled her requests with some simple lines of code using custom post types, taxonomies, and shortcodes.

WordPress Meta Boxes: Aiming for Simplicity – I thought it might be work sharing one way to help separate the business logic from the presentation logic as it relates to incorporating WordPress meta boxes either in themes or plugins.

How to Add a Color Tinted Full Width Google Map in WordPress – So in this short tutorial, I’m going to show you how to easily make a Google Map look more integrated with your branding and website.

How to Create a Survey in WordPress With Gravity Forms – We use Gravity Forms, and we believe that it is one of the must have WordPress plugins. It can be used to create contact forms, lead generation, collect donations, add user submitted posts, and much more.

Using Grunt with WordPress Themes – A tool like CodeKit does many of the same tasks (and I highly recommend it if the command line terrifies you), but Grunt gives you more control and a huge library of modules to work with.

What You Need to Know About WordPress Custom Page Templates – You can change the CSS rules that affect the site, you can create a new file in your template hierarchy to correspond to the specific page, or you can use a theme page template designed specifically for that page.

How to Protect Your Site from Malicious Plugins – Premium plugins typically offer a whole host of features and expand the functionality of WordPress by leaps and bounds. And since they’re born out of the developer community, many people trust them without a second thought.

Search Engine Optimalization, Conversions, Analytics, etc.

Why Link Building Will Not Die, Just Evolve – From my perspective, consistently delivering great results in search has primarily been due to the impact of high quality backlinks that I’ve built for my clients over the last nine years.

How to Avoid Getting Slaughtered by Penguin 3.0 – Avoiding Penguin 3.0 is just like avoiding the consequences of any other penalty. The only twist is that you tilt your remediation to be especially defensive regarding the historic targets of Penguin updates.

Advice From Matt Cutts of Google on Title Tags, Myths, and Website Size – You may have noticed that Google will oftentimes change your title to be something different than what you specified in your title tag.

Remove Page Elements For Higher Converting Pages – In this article, I’ll provide several examples of ways to effectively remove page content. The suggestions are fairly simple and can have a significant impact on your bottom line.

10 Steps to Optimizing Your Web Page in 2014 – We’re nearing the mid-year mark. Are you satisfied with your website’s performance? You only need to make a few simple fixes to improve your website’s rank in search and increase traffic and conversions.

Tutorials

Creating Round, Flat and Flip-Style CSS Toggle Switches – In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality.

Inspiration for Article Intro Effects – Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.

Create a Responsive CSS-only Masonry layout – Pinterest has inspired many to do a masonry-based layout on their sites. We have some solid JavaScript alternatives out there to create masonry layouts, but how about using only CSS to do that?

Frame-by-frame animation with HTML and JavaScript – The frame-by-frame technique is universal. CSS based animation is available in most browsers these days and offer a very smooth perofmance. SVG and WebGL animation are kid of a niche, but both are very interesting nonetheless.

Freelance, Business and Workflow Related Stuff

6 Obvious Mistakes Every Freelance Designer Make – With the anticipation that you all will be able to avoid some mistakes if you are making any of them unintentionally here I begin discussing about the obvious mistakes freelance designers make.

Why Your Freelance Prospects Fear You and What to Do About It – If you’re having trouble converting prospects to clients, it could be because you haven’t addressed your prospect’s issues to their satisfaction. In this post, I’ll list four things your prospective clients are afraid of.

12 Ways to Make Money in the Design Industry, Aside from Client Work – While all of those are perfectly legitimate options, there are thousands of designers and developers who are earning a living in the industry with less traditional approaches

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

No more JS frameworks – JavaScript frameworks seem like death and taxes; inevitable and unavoidable. I’m sure that if I could be a fly on that wall every time someone started a new web project, the very first question they’d ask is, which JS framework are we using?

Making Good Design Decisions – Making great design decisions is difficult because you are marrying the creative process with the logical process of reasoning through the goals, inputs, and plan

You’re a designer. Not the CEO – The best politicians are not the ones who try to be everything to everyone. They’re the ones who take their skills and couple that with the needs of their constituents (your company) and then make hard, but thoughtful, and inclusive decisions.

It’s OK To Not Know – Over the course of six years, I tried six different jobs and now I’m at my seventh halt. This is one thing I’ve learnt from all these different experiences.

– § –

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.