.. Your Daily Design Dosis

Tweet Parade (no.39 Sep 2013)

| Comments Off

.. it’s Weekend again, 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.

A Complete Guide to the Table Element – The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows.

CSS Filter Primitives — SVG Filters on HTML Elements – Today I want to look at filter primitives, one of the other and more powerful ways to add filters to images and elements. Filter primitives offer us a bit more than named functions.

Hyper useful, ready to use HTML5 snippets – HTML is super easy to write, but when creating webpages you often need to do the same repetitive tasks, such as creating forms. In this article, I have compiled 10+ ready-to-use HTML snippets to fasten your front-end coding.

How to style range sliders in Webkit – In most browsers there is still no way to completely customize an input slider, but webkit browsers do provide some nice control.

Best HTML5 Libraries & Frameworks For Developers – HTML5 libraries and frameworks are very useful for the developers to create stunning HTML5 apps by using the unique functionalists they offer.

Targetting Menu Elements with Submenus in a Navigation Bar – I was working on a dropdown navigation bar and wanted to differentiate the menu items which contained sub menus from those that didn’t. I wanted to be able to do this automatically, without relying on JavaScript or having to add classes to the markup.

Solved By Flexbox – Problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with Internet Explorer 11 and Safari 6.1 now in beta, Flexbox will soon be supported in every modern browser.

A Look Into: CSS Border Corner Shape – Border Corner Shape allows us to manipulate element corners further. The Border Corner Shape allows us to form beveled corners, scoop-style corners, and rectangle-notch corners.

Write Your CSS with JavaScript – You probably don’t realize it, but LESS or SASS have a lot of constraints. I managed to change that by writing my own CSS preprocessor. I stopped writing CSS and moved everything into the JavaScript world.

HTML Future: Shadow DOM, Templates and Introducing Web Components – Today we take a leap into the unknown: the mysterious and dark shadow DOM, and its partner in crime, HTML5 Templates, both of which are part of the wider web component specification.

A Preview of The New Dialog Element – The new <dialog> element makes it really easy for developers to create popup dialogs and modals for their web applications. Before now this required using a JavaScript plugin.

25 Creative Text Effects With CSS Only – 25 creative text effects with CSS only will help improving visibility of your content. We all design websites with sole purpose of having visitors every day. Doing such thing will help to sell the basic idea behind it.

Hiding Native HTML5 Video Controls in Full-Screen Mode – If you’ve ever worked with HTML5 video then you have probably wondered how you get a bunch of control buttons, sliders, and slider thumbs on your page, when you’ve only added a single <video> tag to the DOM.

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

How Does Flat Design Damage and Improve Usability? – Flat design done well removes some visual depth cues in order to return to the fundamentals and it provides many more cues beyond depth to communicate.

4 Ways to Make Your Mobile Site Feel Like a Native App – It covers many different aspects of perceived performance of mobile websites as well as practical solutions to speeding up your site. It’s not about how fast your site is; it’s about how fast your users think it is.

Empowering the User Through UX Design – When you really think about, the element that is key to all technology is whether it empowers the user to do something more efficiently, more creatively, more expressively, and just plain better.

Responsive scrollable tables – Every technique for making tables flexible (or “responsive”) that I have seen comes with its own set of drawbacks. That’s expected really – I don’t think this is a problem that can be solved perfectly, so we have to compromise somehow.

The Tangible Web: Thoughts on Designing Websites for Touchscreens – Touchscreens and the mobile web just made designers’ lives a lot more complicated, BUT it’ll be our creativity and ingenuity that sets the standards of the next generation of touchscreen and gesture-driven user interfaces.

Onboarding Techniques and Examples for Your New Users – You have a small window of opportunity to quickly introduce your app’s key features and teach a first-time user how the app works. The process of familiarizing a new user to your app is called onboarding.

Image Compression for Web Developers – This article will provide a bit of reason, history, and technique to understand and properly address image compression issues for your website.

The Evolution of Responsive Web Design – and What’s Coming Next – Finally, the server-side components (RESS), works together with the client-side components, which includes the media queries, and this can produce more rapid loading sites for accessing over various cellular networks.

Responsive Web Design for Corporate UX Design – In this edition of Ask UXmatters, our experts discuss responsive Web design within the context of corporate UX design.

Making Web Sites Accessible Without Sacrificing Aesthetics – The Web Accessibility Initiative aimed to improve Web usability for those with disabilities. But fifteen years after its launch, organizations still widely ignore online accessibility.

12 surefire ways to increase conversions on mobile devices – Smartphone conversion rates are typically lower than on desktop and tablet due to a number of factors, not least screen size and a perceived lack of functionality.

5 Steps to Make Your Website More Accessible – Whether the user has a disability or not, it’s crucial that they can use your site. After all, don’t you want to help out all your users, increase conversions, build a fanbase, and have happy, loyal customers?

Web Design Concepts to Entice User Interaction – In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website.

How To Integrate Waiting Time Into Your User Experience – In his article about The Psychology of Waiting Lines David Maister explains why perceived waiting time usually has little to do with the actual time. There are several factors that affect our perception of time.

Forget About the Details in UX Design – Or, put differently: just because you are obsessing over details does not mean you are contributing to UX in a significant way, quite the contrary may be true.

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

50+ fantastic free tools for designers – This great selection has over 50 free resources including coding tools for developers, icons sets, fonts, PSD and vector design sets, patterns and flat UI kits, and many more, meant to dazzle everyone with your next mobile projects, website or blog.

So, You’re a Web Designer, Right? – What is the role of a web designer nowadays? An article about the changes that came with the awareness of responsive web design and the new workflow of designing in the browser.

Pros and Cons of Working With Design Kits – Today we’re going to take a look at the pros and cons of using different types of design kits, and even show you a few kits in the examples that might be worth trying out for various purposes.

Designing In The Open – I suppose a good place to start is to talk about what designing in the open is, its pros and cons, and examples and tips. Designing in the open means sharing your work and/or process publicly as you undertake a design project

Photoshop for web design: 20 pro tips – For many web designers, Photoshop still plays an integral part in the website creation process. When designing individual site elements, here are some tips that may prove useful for your next project…

Data-Driven Design In The Real World – Too often, testing and analysis are one-off activities, providing plenty of important-looking numbers but not lot of context or specific direction. I’ve learned a lot about connecting the dots between data and design improvements.

Weekly Free Resources for Designers and Developers [September 23rd,2013] ~ Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are mostly latest releases or the ones you might not have seen yet.

5 Ways to Optimise Your Social (Count) Buttons – In this post, we are going to discuss several solutions to optimize social buttons, which also improves your page load performance. We have been trying some available tools and scripts out there and here are our top 5 of the list.

The Elements of a Style Guide – Style guides don’t magically turn people into good writers, but they do get everyone on the same page and help keep your company’s content consistent. And consistency is a must.

20 Resources for Beginner Designers & Developers – The key to starting out a successful career in design, is creating your own toolkit. This toolkit should be an array of design resources that help you transform a blank canvas into something incredible. Today, we’ve compiled 20 of the best design resources

It’s time to adopt object oriented thinking – My desire is not to describe object-oriented programming, but rather to introduce the overarching principle that can be applied outside of the role of developer.

Tools for image optimization – Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this.

Internet speed and the effects on web design – Some of the things to consider when it comes to designing your website to cater for the varying internet speeds that are used these days include ..

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

10 Tips for Designing Logos That Don’t Suck – So you’re designing a logo. How do you as a serious professional stand out from the crowd and produce quality logos that don’t suck? Read on to find out.

30 Best Adobe Illustrator Tutorials – So take the treat of the day with these best Adobe Illustrator tutorials and take your knowledge on vector graphics to a newer height.

How to Control Gradient Mesh in Illustrator – I would like to say that having enriched oneself with information from this article, you will still feel uncomfortable when working with gradient meshes, as this complex subject requires more in-depth study.

What Simplicity Really Means – A good way to approach a minimalist project would be to build up a complex site and refine it down to the essentials. But what are the essentials? Read on to find out.

Logo Crash Course Part 1 Anatomy of a Logo – I have come up with a logo crash course to explain the basics. It will focus on the visual side of branding, and some of the principles behind good logo design.

The Beginner’s Guide To Brand Positioning in 4 Steps – Business and marketing professionals will frequently throw around the term “Positioning” during meetings, pitches, and branding sessions.

On dashes, hyphens, and other important aspects of life – A dash is a gentle character, and when used correctly, adds elegance to the words she touches. Below I cover the common uses of three horizontal marks: the hyphen -, the en dash –, and the em dash —.

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

24+ Reasons Why Blogging Is Good for Freelance Web Designers and Other Freelancers – In my opinion, this shouldn’t even be a question. There are so many business benefits to blogging that it only makes sense for most web designers and other freelancers to take part. The benefits of blogging far outweigh the disadvantages.

A Guide to Content Optimization with Performance Testing – This key piece of information helps you better understand which of your content pieces are hitting the right mark, and where you need to focus your content optimization efforts in order to increase your content marketing success.

17 Superb Tips For New Bloggers – Blogging is just amazing. I mean, you can do a lot of things with blogging. Here are some tips I learned from my own experience and blogging experts and veterans out there.

Guest Blogging: A Beginner’s Guide – Getting your guest post out to the right place is an essential piece of the guest posting puzzle because you want to be certain that you’re feeling out the appropriate opportunities.

Don’t Ditch Your Blog: 6 Reasons Why Your Blog Rocks for Marketing – There are more places than ever to market your brands… so do you still need a blog? To stay relevant marketers are now creating YouTube videos, making albums on Instagram, creating infographics for Pinterest and generally getting social.


How to Create an Awesome Responsive Menu for Your WordPress Theme – Here’s five simple steps to add mobile-specific menus to your responsive theme and provide an awesome viewing experience for your mobile visitors.

Customizing the WordPress Admin – The Dashboard – In this tutorial you’ll learn how to customize it by removing some of the existing metaboxes, moving some around, and adding some new ones.

Powerful WordPress Tips And Tricks – Though I peek at the source code regularly, I still discover new tips and tricks. I’ve compiled my own list of 21 techniques that are handy, clever, fun or best practices rarely followed.

Search Engine Optimalization, Conversions, Analytics, etc.

How to optimise your images for SEO – However, very few websites are optimised to take advantage. A recent study we conducted on the top 20 websites in a particular industry (thought to have fairly advanced SEO), highlighted that their optimisation in this area was poor, at best.

Improving Search Rank by Optimizing Your Time to First Byte – TTFB has 3 components: the time it takes for your request to propagate to the web server; the time it takes for the web server to process the request and generate the response; and the time it takes for the response to propagate back to your browser.

Google Reveals Major Update to Search Algorithm – A major update to Google’s search algorithm that the company calls “Hummingbird.” The new algorithm affects 90% of all searches, and has been in place for about a month.

FAQ: All About The New Google “Hummingbird” Algorithm – Google has a new search algorithm, the system it uses to sort through all the information it has when you search and come back with answers.


Quick Tip: Add a Progress Bar to Your Site – Concepts that make sense for a locally running application are transferred to the web. In this quick tip, we will use the new NProgress jQuery plugin to add a progress bar to a web page.

Build a custom HTML5 video player – It’s common knowledge that with HTML5 websites you can play audio and video files directly in the browser without the need for third-party plug-ins, via the <audio> and <video> elements.

How To Create Flat Style Breadcrumb Links with CSS – In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

Build an HTML5 Form With on-Off Input Sliders Using jQuery- In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update.

Building Vertical-Tabbed Content Sections with jQuery – In this tutorial I want to demonstrate how we can build a custom vertical content section using jQuery. All of the internal content is held inside div containers which can be navigated with an icon-based menu.

How To Build a Grid-Style Image Gallery with jQuery Modal Popups – There are a number of free open source image gallery plugins you can build with jQuery. Each has their own unique features and reasons you may incorporate the design into your website.

Freelance, Business and Workflow Related Stuff

Determining the Real Wants of Your Client – Here are a number of tips to help you figure this out, and once you are familiar with effectively asking the right questions, it can make it far easier to ensure that your client is on the same page.

Why an Online Portfolio Is Insanely Essential For Your Freelance Business Growth – Whether you are a freelance writer, graphic designer, journalist or photographer, you should always consider having your portfolioattached to your business line.

Beyond Freelance Web Design: What to Know Before You Grow – You’re thinking of moving beyond freelancing. Naturally, there are quite a few differences between running an agency and freelancing. In this post, I’ll outline some of them.

10 Difficult Design Clients, and How To Deal With Them – Difficult design clients come in all shapes, sizes and personalities. But it is how you deal with them that define you as a business owner. Have you had a difficult design client recently?

10 mind-shifts you MUST have today to be a successful and happy freelancer – Below, you’ll find ten mind-shifts you must have (about your clients, about your work, about your rates, and about your business) if you truly want to be successful.

How to increase your productivity as a Web Designer – Understanding and working closely with your client is the key to being a successful web designer. Increasing your productivity means doing a good job for your client and gaining more business in the long run.

22+ Bad Habits That May Wreak Havoc with Your Design Business (and How to Break Them) – It’s easy to get caught up in a bad habit. When you do, you end up making the same mistake over and over–sometimes without even realizing it.

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

The 3 Future Waves In Design, And How To Ride Them – The product design industry has collectively responded to this challenge over the last few years; but as we do, new waves are coming that will drive product design going forward.

Sustainable Web Design – Yet the internet’s carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually, which is bigger than that of the entire aviation industry. That amount is set to double by 2020.

On Writing Interfaces Well – Aesthetics are debatable, but writing is essential. Peel away the layers of styling and you’ll be left with words. Writing is the meat of a design, and it’s one of the hardest things to get right.

How designers control your mind through your eyes – So why is sight so important for designers to manipulate? Because it is the single most influential, and accessible sense we can have partial control over.

Future of Web Design – In this increasingly digital society, a good website with its unique look, feel and functionality is what brings a business to life. Unarguably, it is the customer’s first touch point.

Self Promotion – Design community is like any other community and you have to earn your stripes within it, before you can expect anyone to start doing you any favours.

- § -

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.