.. okay, it’s weekend! Time for a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.
Creating & Styling Progress Bar With HTML5 – HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks. In this article, we will discuss how to add this element in the document, how to style it with CSS and animate the progress bar meter.
Take Control of the Box Model with box-sizing – In this article, we’ll go over a few important things to know about the box model, like how it affects defining accurate fixed and fluid sizes, then learn how to tame it with the new
Feature Support & Polyfills – There are a handful of common practices to get websites to perform adequately in all browsers, some of which have already been covered within this guide. When incorporating CSS3 properties, fallbacks are recommend to support older browsers.
HTML’s New Template Tag, standardizing client-side templating – A new
<template> element which describes a standard DOM-based approach for client-side templating. Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime.
The Problem Of CSS Form Elements – In this article, we will cover some of the CSS patterns used by Web developers to tame the visual layout of form elements.
Exploring Device Orientation and Motion API – The Device Orientation API exposes two different types of sensor data: orientation and motion. Such APIs will let Web developers easily deliver advanced Web user experiences leveraging modern devices’ sensors.
HTML5 forms introduction and new attributes – HTML5 introduces a number of new attributes, input types, and other elements for your markup toolkit. In this article we’ll be focussing on the new attributes with a future article looking at the new input types.
Customize Checkboxes and Radio Buttons with CSS3 – With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, we are going to customize the look of
6 CSS Mistakes Web Designers and Developers Make – In order to help clear up on some common mistakes made in CSS, we cover six CSS mistakes web designers and developers tend to make.
WebKit for Developers – Be able to diagnose browser differences better, report bugs at the right tracker, and understand how to develop against specific browsers more effectively.
Upgrade to Better Intuitive, User-Friendly Website with HTML5’s Smart Elements – However, there are some browsers that need to catch up with the latest design elements but gradually the move will standardize the web in the times to come. Let’s take a look at the 5 HTML5 elements for building smarter, intuitive websites
Project insights – A benefit of using SVG is that they are retina ready and scalable by default and in this case offered a significantly smaller file size. These benefits also come with some potential downsides…
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Understand your audience with good research – Understanding your audience is about finding out as much as possible about the people behind the numbers including their social and cultural situations, media consumption, likes, dislikes and needs.
Not All Responsive Web Design is Created Equal – It’s not enough just to ensure your website is responsive, it also must be easy to navigate on any device. Let’s take a look at some of the basics of web usability techniques for ensuring your site is completely device inter-operable.
Non responsive – Listen to Twitter and you’ll believe that building anything less than mobile first, fully responsive websites in this day and age is very very wrong. It’s not that simple.
No more ‘Mobile’ – In this industry, we speak a specialist language; some terms and phrases are firmly embedded in our craft, whilst new ones emerge daily. It’s important that we understand each other, collaboration is common, whether its designer to developer, client to supplier or agency to freelancer.
10 Web Usability Tips – Usability is the most important function of every website. It doesn’t matter how attractive your site is. If it isn’t easy to use, it won’t engage your audience.
Font Hinting and the Future of Responsive Typography – Font hinting has been the source of countless headaches for type designers and users. Meanwhile, some of the most fundamental and important elements of typography still can’t be addressed with the web of today.
Mobile Form Usability: Avoid Splitting Single Input Entities – Divisions of a single input entity into multiple fields can lead to interaction issues, required vs optional field ambiguity, and misalignment between the user’s perceptions and your site’s form design
Protip: All browsers that support SVG background images also supports multiple background images – Say you want SVG with PNG fallback for IE8?
Why Pinterest-style infinite-scroll layouts are worthless for everyone except Pinterest – I’ve heard appreciation for this sentiment from designers and engineers alike, which has brought to wonder… with all the resources they have available to them, who the heck are these companies finding to do their UI design?
There Is No Mobile Internet! – We need to embrace a device-agnostic approach to communicating with connected consumers and forget the idea of a “mobile Internet”. There is only One Web to experience.
Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site – But of course it didn’t pass and it wasn’t a fad. Mobile responsive design continues to charge forward stronger than ever. I want to give to you three reasons why you should choose a mobile responsive website design over a separate mobile site.
Build responsive emails – User take-up of mobile email is massive: some email campaigns get more mobile opens than desktop, yet many marketing emails render poorly on mobile devices. Mobile support on the web has never been better
Prototyping Responsive Typography – Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. Responsiveness, when added on top of this, makes this period of change we are living very fascinating.
12 useful tips for optimising mobile landing pages – Optimising desktop landing pages is a tricky business, as you need to make sure all the most alluring content is visible along with a clear call-to-action. These problems are obviously magnified on a smartphone screen.
Usability testing myths – This article presents five controversial beliefs about usability testing and discusses if they are myths or if there is some useful truth to them. The discussion leads to practical advice on how to conduct better, faster and cheaper usability tests.
7 Usability Mistakes That Will Kill Your Online Sales – Right now, on your site, 7 deadly usability mistakes could be hacking and slashing away at your sales… And you probably don’t even know they are there.
Up and Coming Mobile Design Trends – Many posts out there don’t actually talk about mobile design trends; some talk about mobile design being a trend but that is by far very different. Because mobile apps and websites are growing in popularity and design quality, I wanted to write a post about the up and coming mobile design trends.
3 Types of Breakpoints In Responsive Designs – At the very least there are 2 distinct types of breakpoints, those for major changes and those for minor ones. I think there’s a 3rd group in between where the change isn’t as major as changing the entire layout, but is significantly more than a tweak.
Logical Breakpoints For Your Responsive Design – Another popular tactic is to create a breakpoint wherever the layout breaks. But it still leaves us with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.
Responsive web design: the war has not yet been won - As widely adopted as the RWD process is, there are still numerous designers, developers, freelancers, and agencies who continue to opt for the safety of fixed widths, or adopt the process in a semi-complete sort of way.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Tips For Improving Your Landing Page – When it comes to optimizing your landing page to get the best results, it sometimes seems like you’re taking a shot in the dark. Does the copy need to be reworked? Are your images compelling enough, or are they the right choice for your demographic?
What The Future Of Cloud Computing Means For Web Designers – Cloud computing is one of the latest technologies that have come to change the way people interact with the web. Cloud computing accords you the chance to hold information in multiple servers irrespective of your position.
Wireframing and Sketching for Web Designers: Tools, Utilities and Reasons – By wireframing you are basically defining the primary steps and the shape your website or product is going to have. One of the main purposes of wireframing is to set the main priorities and describe the functionality of your future creation.
5 Things Business Owners Need to Review for Their Website – Websites can make or break a business that depends on the Internet in any way for sales. It is important that businesses make it a point to check their websites often to ensure everything is running smoothly.
10 signs to indicate you need a Website Upgrade in 2013 – We have assembled a checklist of symptoms to check against to establish if you need to upgrade your website in 2013. Here is the list of typical signs
Let’s Talk About the Importance of Favicons – There are certain things you are probably overlooking when it comes to your website’s design. The perfect example is your site’s favicon. Do you know what a favicon is? Are you using yours effectively?
Your Guide to Creating a Successful Small Business Website – Your website, when well optimized, can act as a new and effective marketing channel. Use your website to act as your online sales person.
Designing For The Modern Web – Mobile is shaping the Web in a dramatic way. It is now more exciting than ever to design for the Web thanks to CSS3 / HTML5 and a plethora of accessible new tools.
The Importance of Site Speed in Web Design – In the quest to add more content, unique functionality, and better design to our websites, sometimes we sacrifice a speedy loading time. But studies have consistently found that this is a big mistake.
Reusable Divisions Of Space: Grids And Modular Design – On the surface it might not seem like a discussion of typographic grids would fall into this same discussion of modularity. Aside from the idea of building a library of grid patterns, how do grids fit in to reuse?
Image Techniques for Creating Depth in Web Design – Creative manipulation of images, from layering to composition to special effects, can add depth to web projects. The element of depth can add a greater touch of reality to certain design projects.
A Developer’s Guide to Images – This short guide is aimed at explaining the basics of image formats and giving you some simple rules that you can apply everyday when you are actually trying to get shit done with Photoshop.
How to design from a blank canvas – But what happens in the rare case that client company has no website? They have never even thought about having a website in the past. This is totally new territory to them — they’ve got a totally blank canvas.
Essential web design tips for start-ups – With so many new websites and start-ups springing up every day, a high-quality, professional web site is no longer optional — if it ever was. If you want your company to be taken seriously, let alone stand out, you need to have a design that is both memorable and professional.
Improve page load times – The goal of a CDN is to serve content to end-users with high availability and high performance. So what does this mean for us as developers – and why should you use a CDN for your files?
Fresh Resources for Designers and Developers – March 2013 – This round we got plugins to help your site detect swipes and gestures as well as to enable mention input, a tool to creat your own stickman comics and a new tool to test your codes on Internet Explorer.
Step-By-Step Landing Page Copywriting – Let me start by warning you: This is a long post. I want to take you through the process of writing and designing the ConvertKit sales page.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
How to Transform and Duplicate Objects in Adobe Illustrator – Your knowledge of basic functions of transformation and duplication in Adobe Illustrator can save you a lot of time. You have no need for manual operation when Adobe Illustrator can do it instead of you.
Role of Size in Logo Design – Bigger or Better? – But in reality, the big size is not always the ideal option. A good logo should be identified in size and there’s no question whether it should be small or big as long as it delivers the exact message.
Is My Type Stressed? A Primer on Stressed Typography – Type stress refers to the change in direction of a stroke, vertically or horizontally. It can also refer to the feel that is created by type in relation to how it is perceived. Stress can be by design or created with effects as it used for certain projects.
The 10 laws of Photoshop etiquette – There are rules when it comes to creating, sharing and handing over Photoshop files. Follow them and colleagues will love you. Disobey them and invite their wrath! Designers, freelancers, lend me your ears.
How To Create Brand Personality For Your Website – It’s a tough gig to get right. In order to help you create a digital persona for your organization, here are 10 useful tips to help you create brand personality for your website.
Logo Design Process Start To Finish – Done right it should be a mark that will represent a brand for years to come, and unfortunately you don’t get the chance to measure and iterate based on weekly usability tests or usage metrics..
Blogging, Social Media, Writing, Content Strategy, Email, etc.
A Step-by-Step Checklist for Writing Your WordPress Blog Posts – In this post I want to cover all of the necessary tasks to carry out before publishing the post. In the final part of this series next week I will cover the tasks you should carry out after publishing.
The “Above the Fold” Myth Debunked – Even if everyone is not willing to admit this, people have learned how to scroll. It’s 2013 after all. But this is the present and there is research that supports the fact that “Above the Fold” is a myth.
WordPress Meta Boxes: a Comprehensive Developer’s Guide – This tutorial will attempt to cover everything you could possibly want to know about using meta boxes in WordPress. Much of the information will apply to plugins as well, but there will be a few minor differences.
How To Clean Up & Optimize Your WordPress Install – Over time WordPress saves snippets of information to its database, which can become bloated with unnecessary values. In this post we’ll look at 10 ways you can give your WordPress install a spring clean to trim the fat and put everything in its place.
How to build effective 404-error pages in WordPress – One of the fundamental rules of UI is not to leave users in dead-ends without guidance. There is always a back button in the browser, but do you really want your visitor to have to use it?
Create Your Own WordPress Login Page – In this tutorial we are going to look at how you will create a new login form for users to be redirected to a different area.
How to Setup WordPress RSS to Email Subscriptions – Email isn’t going away and it’s still a really useful marketing tool. I often subscribe to newsletter via email still, as I find they are easier to prioritize in my life rather than just subscribing to the RSS of a site.
6 MORE Things I Wish I Knew When I Started Working With WordPress – Let’s focus on the interesting stuff – the facts about WordPress that are not that obvious when you’re just getting started. Today, let’s start with the “crown jewel” of WordPress management … SEO.
Search Engine Optimalization, Conversions, Analytics, etc.
5 Busted SEO Myths for 2013 – The problem with SEO is that it has always been open to interpretation, and as a result, plenty of myths are floating around. Some of them are easy to unmask, but some sound very legit. And that’s where the problems start.
Importance of Anchor Text in SEO – Generic, Targeted, Brand Link Ratio – Anchor Text is a clickable text in a hyperlink from a webpage, and is one of the most important SEO factor you should take care of. Search engines like Google heavily weight its SERPs based on the anchor text of links to a page.
Landing Page Optimization With Google Analytics – Google Analytics is a powerful tool when it comes to assessing the performance of a website. Learning where users enter your site and what they do from their point of entry is a great way to evaluate the effectiveness of each page and user pathway.
Coding a Horizontal Navigation Bar with jQuery Dropdown Menus – For this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet.
Full Width Image Slider – This slider has a 100% width layout and it is responsive. It operates with CSS transitions and the image is wrapped with an anchor. The anchor can be replaced by a division if no linking is needed. With a max-width set to 100%, the image will size down for smaller screens.
How to Build an iOS-Style Content Slider using jQuery – Building a custom slider widget to work properly in modern browsers and smartphones is not easy. Many of the supported browsers for Android and iOS devices are advancing, too. This means we can expect support for greater ideas in the near future.
Uniqlo Stripe Hovers – Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. Let’s reproduce the effect in a progressive enhancement style: less browser support but more efficient.
How To Create Unique jQuery-Based Tooltips – Tooltip libraries are fairly common amongst the open source community. A quick Google search will net you a series of results which you could apply into any typical project.
Create an accordion menu using CSS3 – However there is one problem with using the :target and that is that it makes it impossible to close the content areas again or have multiple sections open at the same time. We fix this by using hidden checkboxes, we can control the opening and closing.
Freelance, Business and Workflow Related Stuff
Is It Time for Freelancers to Slow Down? – And it’s not just freelancing. Our entire culture seems to be in a rush. In this post, I’ll describe some of the problems associated with trying to accomplish too much. I’ll also address one reason why freelancers try to work too fast.
The Freelancer’s Guide to Writing Proposals – Writing proposals is something of an art form: you need to lay out the concept for a project, with all the amazing benefits that will make a client want to write you a check immediately, as well as the negatives, like the big price tag.
Me, We or Idea. What stage of freelancing are you at? – There are 3 types of motivations that most freelancers will find themselves in – and they represent the stages that their business will inevitably be in.
How to manage other designers: 10 expert tips – At some point in your design career, you’ll be tasked with managing a project, whether informally as a lead or senior designer or formally as a fully fledged project manager. So how should you go about it? Some pointers to guide you to people-management success.
Why Being An ‘Average’ Freelancer Might Just Be Enough – As a business-focused freelancer, how do you feel about the area of personal development? Have you found it useful in reaching for success in your freelancing business?
Startup Launch Checklist – From programming to last minute company tasks, we compiled a list of over fifty items.
F*cking Brilliant, a great Read or just magnificent Tips!
Are UI walkthroughs bad for learnability? – “When it comes to teaching users to use your UIs, I would recommend to do so mainly by progressive disclosure with slight visual cues and subtle animations – only use a walkthrough as a final resort.”
It Doesn’t Matter – Just because something is hard doesn’t mean it’s not worth pursuing. Sooner or later, your ecommerce-enterprise-startup-brand-app-highered-corporate-B2B site will need to address the reality of our multi-device world and all the problems that come with it.
You’re Good. Get Better – Value the instincts and opinions of your peers and clients, but don’t be afraid to back up your process if you know you made the right choice somewhere. Most importantly, don’t stop improving. You’re good. And you’re only going to get better.
Play by your own rules – Listen to your users more than the press. Don’t get sucked into the gravity hole between you and your competition. Ruthlessly run your own path, not someone else’s.
Give a crap. Don’t give a fuck – How do you know if you’re doing a good job? There’s always an external way to measure quality—being prepared, attending to the details, listening to the collective wisdom about what it means to do good work. Give a crap about the little things, and you’re good.
Invention is slow – Can creativity be divorced from limitation? In truth, design is not very hard. If I ask you to close your eyes and imagine a chair, you’ll picture an object in your mind I’m sure satisfies basal restrictions for what it is that defines a chair, without thinking on it very much.
- § -
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