.. Your Daily Design Dosis

Tweet Parade (no.46 NOV 2014)

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

Coder’s Block Blog / Fun Times with CSS Counters – CSS counters are one of those “oh neat, didn’t know CSS could do that” features with a lot of interesting potential. In simple terms, they let you keep a running tally of things in CSS — no JavaScript needed.

7 CSS Units You Might Not Know About – Today, I’m going to introduce you to some CSS tools you might not have known about before. These tools are each units of measurement, like pixels or ems, but it’s quite possible that you’ve never heard of them!

Form controls with CSS currentColor and pseudo elements – Making some nice custom form controls with pseudo elements and currentColor might be the best possible scenario. With that in mind, I chose to style some radios and checkboxes.

SVG Animation and CSS Transforms: A Complicated Love Story – SVG is all the rage these days, and browser support is generally excellent…with one glaring exception: CSS transforms. This is particularly painful when it comes to animation because scale, position, rotation, and skew are so fundamental.

CSS {all: initial} to prevent widgets inheriting CSS from a host page – Imagine you have some sort of widget – an ad box, a sign-up form, some execrable collection of social buttons, whetevs – that you’re injecting into arbitrary pages using JavaScript.

How CSS level 4 selectors could boost devs’ powers – Times are changing. CSS is becoming a kind of Swiss Army knife for the web. We can already use a range of helpful selectors such as :nth­child, :nth­of­type and :not() to target specific DOM elements. With CSS level 4 selectors, there will be an extra layer of power.

Responsive Web Design Tools And Resources That Will Help You – There are also many resources where designers can go for help and knowledge. Here I will give you some of the best responsive web resources and responsive web tools that I have found.

The Limits Of CSS Selectors – A great deal can be accomplished with pure CSS, but the power of the syntax is limited by its inability to affect certain elements. Understanding those limitations is the first step to determining whether a CSS-only, hybrid JavaScript-CSS script or pure JavaScript solution is best for your web design and development problems.

Material UI – A CSS Framework and a Set of React Components that Implement Google’s Material Design, Material-UI came about from our love of React and Google’s Material Design. We’re currently using it on a project at Call-Em-All and plan on adding to it and making it better in the coming months.

5 Gotchas You’re Gonna Face Getting Inline SVG Into Production – Having successfully addressed the above challenges, I’d assert that teams building modern web applications should definitely consider using inline SVG right now.

2 CSS objects that will simplify your HTML structure – Today I’ll share with you two cool things that I use all the time. Split & Join objects will help you building your HTML structure.

Sass Functions to Kick-Start Your Style Sheets – In fact, Sass has a number of built-in functions that help make setting up styles for your project a lot quicker and easier. Today we’ll look at just a few of them, ranging from manipulating color to number powers that can help us in making our own functions.

Sketchy Avatars with CSS clip-path – Without the use of lots of images, it’s very difficult to get that hand-drawn vibe. With some light trigonometry and very basic knowledge of CSS’ clip-path, we’re able to do this with relative ease and good performance.

5 Things You Can Do With HTML Meta Tag – As web developers, we’re used to setting the page description, author, or keyword via meta tag. However, there are a number of meta tag capabilities that most of us probably aren’t aware of. Here I’ve put together 5 meta tag features that you may have not heard of before.

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

The UX of Infinite Scroll: The Good, the Bad, and the Maybe – Like almost any major design pattern, it’s neither good nor bad, in and of itself. It’s up to us as designers and developers to apply our logic, experience, and foresight in order to include or exclude it from our projects on a case by case basis.

Responsive Images Revisited—The Srcset Attribute – Today I’ll cover some background, history, and browser support, before digging into the srcset attribute and the associated sizes attribute. The srcset attribute is a simple way to suggest different images to browsers based on their pixel density.

Responsive Web Design or Native Mobile Apps? – It is very important we understand how misleading the ‘choice’ of “RWD or native app” is. It is as wrong as thinking that if you have a native application and a website then your website doesn’t have to be responsive.

9 basic principles of responsive web design – Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts

Front-End Dev guidelines – The following are general guidelines for structuring your HTML markup. Authors are reminded to always use markup which represents the semantics of the content in the document being created.

The iOS Design Guidelines – Designing iOS apps can be difficult sometimes, but finding correct and up-to-date information about all of Apples’ devices shouldn’t be. These design guidelines will help any designer who’s building neat things for iOS get started within seconds.

Responsive Content Modeling – The most important thing anyone can do on a web project is find its nucleus. The core, that central piece of content around which everything orbits. Finding that reveals how all of the content fits together.

15 essential Sass mixinsIt’s never good to rely too heavily on a tool, and if you think Sass mixins begin and end with the @include statement then you should probably try writing out a few of your own. Sass mixins are available for a huge range of tasks.

6 simple rules for designing mobile websites – What that means to your business is that you have to be easily accessible through all the different devices, and thus your web design has to cater not only to computer users, but also to smartphones.

The UX of Mobile Settings – Which OS offers the most easy-to-use settings screen? Which empowers the user the most? When should someone who changes their device settings be considered a power user? How do you approach the architecture of these screens when the user is virtually everyone?

It’s Not UX vs. UI, It’s UX & UI – Visual and sound design are only a few UI elements which feed into the UX. While you can’t necessarily control your website’s UX, you can control the UI — so make sure you have a general UX goal and design your UI accordingly.

10 Responsive Design Problems and Fixes – The problem is that performance cannot be mocked up in Photoshop, and new methods to meet design challenges have to be adopted. So here are 10 problems with creating responsive design websites, along with 10 possible solutions.

The Real Cost of Slow Time vs Downtime [SLIDES] – The other was a brand-new talk that I’m frankly kind of surprised I’ve never done before: a shallow dive into the topic of measuring the financial impact of slow performance versus the financial impact of outages.

Responsive Navigation Solutions and Resources – As responsive web design quickly evolves, more and more usable solutions and patterns are emerging to help you easily build a navigation system for your site that will work seamlessly on both mobile devices and desktops.

Responsive Techniques that Every Website Should Use – In this article I’d like to share a few responsive web design techniques that can be applied to any layout. Each website project is intimately different yet great designers can recognize the common similarities in most work.

Webdesign in Common, Web Typography, Tools, etc.

Color Theory Basics – Having an alluring and cohesive color palette is essential in creating a successful website. In this guide we’ll explore the many aspects and considerations needed to help you create your website’s color palette.

Empathy and Design: What You Should Consider – Empathy takes into account a lot of variables – intellectual identification, emotion, imagination, attitudes and beliefs, social conditions and even daily connections and mood. So you see, creating empathy can be a lot tougher than it sounds

Bad Practices To Avoid If You Want To Keep Your Site Visitors – One of the things that website designers rarely take into consideration is how their visitors will feel using their website. There are some that are anything but user friendly. Those are the sites we tend to avoid.

Applying the Rule of Thirds to Web Design – Keep in mind that you don’t need to follow these guidelines if they don’t help you craft great interfaces. However many designers have found success with this rule of thirds methodology so it’s worth testing in your own workflow.

The Essential Elements of a Portfolio Website – Consider your portfolio your playing field. You’ve got to give your best performance. At the same time, be wary of any information overload you might possibly be indulging in.

5 Free Online Tools for Testing Your Website’s Performance – “Site speed plays a very important role in website’s success” – this should be quiet apparent for those who have spent some time in the industry. According to a study done Tagman, one second delay in page can cause 7% loss in customer conversions.

New findings: For top ecommerce sites, mobile web performance is wildly inconsistent – Measuring mobile performance is extremely challenging — much more so than measuring desktop performance. Here’s how we tackled mobile performance measurement for this research,

What’s new for designers, November 2014 – In this month’s edition of what’s new for designers and developers, we’ve included new apps for design, frameworks and boilerplates, new mobile apps, new jQuery and JavaScript resources, resources for startups, and much more.

Tips for Designers Who Don’t Code – The point is, you really don’t know until you get away from Photoshop and start prototyping your designs in the environment to which they are accustomed; the web browser.

7 Crucial Web Design Trends For 2015 – Looking back at 2014, we can see some spectacular trends emerging in the web design landscape: code-free design platforms, parallax effects, single-page websites, and many more.

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

An Introduction to Typesetting Books in Adobe InDesign – You will learn how to create Masters with page numbers and running headers, thread text throughout the book, choose appropriate sizing and fonts, and apply Styles to the text.

Embossed Vector Text Style: Up Your Class in Minutes – Embossed text has an uncanny way of being classic and modern at the same time. Creating embossed vector text styling is easy to do in Photoshop, but in Illustrator, it is super simple to create letterpress styled text while keeping the text editable.

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

Why Your Blog Isn’t Growing and How to Make It A Success – If your blog is dependent on Google search engine rankings like most websites, you should know that one record month of traffic can easily be followed by a record low. Here are some possible reasons your blog is failing to capitalize on its current readership, and what you can do about it.

Preparing for a Social Media Crisis – Social media has radically altered the PR function but no more so than when it comes to crisis communications. Where a company once possibly had hours, or even days to respond to a crisis depending on the news cycle, they now may have only minutes to respond.

WordPress

Best WordPress Cheat Sheets and Code Resources – Although WordPress has gotten easier to manage for administrators it has grown very complex for developers. There are numerous APIs and it seems like every update includes more detailed functionality.

The perfect focus keyword for your post or page – Your keyword strategy should have given you some idea what you want to write about. For blog posts, you will usually aim for a long tail keyword. In our WP SEO plugin you will find a drop down menu which supplements your entry with suggestions.

7 Tips To Improve Your WordPress RSS Feed – One of the problems with having an RSS feed is that people can use this to easily take your content parse it and automatically publish it on their website. Here is a list of 7 tips you can use to help improve your WordPres RSS feed.

A Beginner’s Guide to Using WordPress – WordPress is one of the most powerful content management systems (CMS) available. It’s versatile, meaning you can use it to create anything from a simple blog to a very complex website.

30+ Ways to Use API’s in WordPress with NO Coding – People ask things like can you import and post my tweets and Instagram pics? It seems like I’ve integrated everything from forms to maps, auctions to videos, and back again.

When is Managed WordPress Hosting Right for Me? – We hope by now you have better indications on which type of hosting to choose. If you are contemplating different options it can pay to send them an e-mail with both hosting and WordPress specific questions or call them to see how well they help you.

All You Need to Know About Making Widget Areas in WordPress Themes – Some of the best features of WordPress are the ways in which any user, once he or she learned the WordPress interface, can quickly change complex site features. Sidebar widgets are a great example ..

Stop Printing Ugly WordPress Pages With This Easy Fix – Surely someone there can help with this printing problem before it happens in real life – and yes, sure enough – you’ve stumbled onto this article about ugly WordPress print-outs and what to do about them.

Search Engine Optimalization, Conversions, Analytics, etc.

Don’t Make These 9 Common SEO Mistakes – Some of the tips below are things that do work well in social, but they aren’t necessarily best practices when it comes to SEO. There is often no downside to applying the principles if you are focused on SEO.

Enabling Multiscreen Tracking With Google Analytics – This article outlines common challenges and how to configure Google’s new Universal Analytics to efficiently overcome them, using features such as custom dimensions, enhanced link tracking and server-side data feeds.

4 Easy & Honest SEO Mistakes That Could Penalize Your Site – I’ve watched four such mistakes happen recently. These sites were honestly attempting to follow SEO best practices, but they were penalized. Why? I’ll explain all.

SEO 101: 18 Search Rankings & Engagement Factors You Can’t Ignore – There are a lot of SEO guides and “How-to” blog posts available, but the truth is, many of these resources contain outdated or just incorrect (and outright bad) advice. I decided to put together a list of 18 factors that many people simply ignore or forget to implement.

Tutorials

Drag and Drop Interaction Ideas – Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. The demos are just some experimental ideas of how these kind of interactions can be imagined.

3D Animated Mockup in CSS and jQuery – With CSS 3D transformations supported by most modern browsers nowadays, we can enrich our web projects with powerful animations, and be confident most users will enjoy the full experience.

38 Visually Awesome CSS Tutorials & Techniques – In today’s round up, we are unveiling 38 most useful CSS tutorials along with some cool techniques that would help you a lot. These are the tutorials that focus on making the smaller details of the web visually appealing.

Apple iMac With Retina – Have you seen the latest Apple iMac with Retina product page? If not, go and check it out (in Chrome or Safari). How was the fancy zoom out effect created? Scaling down a single huge image? Or was there some other trick?

12 Fun Sharing Button Effects – Everyone loves eye candy and smooth CSS3 animations. This is why today we are sharing our latest experiment with you – a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more!

Changing Active Menu Item on Page Scroll Using jQuery – On page scroll event, the selected (active) menu item will be changed according to the current section being viewed. It will also happen if user clicks on any of the menu item link. This type of implementation is good for single page websites having fixed menu bar.

Text Backgrounds and Gradients with background-clip – Today we’ll be looking at a fun technique to spice up our text, specifically our headers. With this technique, we will be able to place a background image or gradient on our text. Even better, we are able to animate it!

Pure HTML Share Buttons – Share buttons are a great way to drive more traffic to a website. Unfortunately, most share buttons social networks provide are ugly and may even require loading of external scripts.

Freelance, Business and Workflow Related Stuff

Why “content first” should be your new war cry – Users don’t want to spend their time admiring your website. It’s not what they’re there for. They’re there to find what they’re looking for, and move on to the next task in their day. Delivering what users want as quickly as possible is the secret to making them happy.

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

Overwhelmed by Code – There is a lot of pressure out there: to learn new things, to spend all your time coding, to be the super developer. I now believe that to be impossible and unhealthy. It means you aren’t living a balanced life and it also means that you’re living under constant stress and pressure.

Your Free Design Work Will End Up In The Trash – How many of these works still adorn walls, how many are printed on paper or are live on the web? Zero. And do you know why? Because people don’t appreciate the things they get for free.

– § –

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.