.. yay, it’s Saturday! It’s 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.
Sketching with CSS – Laying out a design with CSS is fraught with peril of cross-browser bugs and mysteriously collapsing margins. But new tools like flexbox have transformed this once odious task into something you shouldn’t dread.
Making Infield Form Labels Suck Less – There are a number of usability issues with putting labels inside of form fields especially if they’re not implemented well. From a usability perspective, ..
Make HTML5 work today with polyfills – Polyfills are powerful tools that help save development time and costs, improve your site’s code, and enhance the user experience in modern browsers. They’re not the right tool for every job, but they’re a good thing to have in your toolbox
20+ resources for learning web design & development – There are tons of blogs, tutorial sites, and other resources out there that can teach you about web design and development. But what if you want something a little bit more formal, without actually having to go back to school?
Pure CSS from Yahoo! A Minimal & Lightweight Set of CSS Modules – Yahoo! has recently and quietly released Pure CSS, an ultra light-weight and responsive set of CSS modules that you can employ in your web projects very quickly.
Thoughts For Better Variable Organization In SASS – Variables are clearly useful and one of the great reasons to use a preprocessor. However, I don’t think I made the best choices in how I set up the variables. Here are some of the variable names and general organization I created.
Understanding CSS and the modern web – In CSS3 Foundations, you learn CSS3, which includes not just the newest of features, but also those from the previous CSS levels that experienced designers and developers have relied on for years.
How to build (and how not to build) a secure “remember me” feature – As you’ll see it’s also not uncommon to make an absolute mess of it and even when you do get it right, there’s a queue of people ready to tell you how it is, in fact, not quite right enough. Let’s start with the really wrong stuff and work from there.
An Intro to Hitch.js and the Extensible Web – Hitch is a proof-of-concept “prollyfill engine” (we’ll define that later) specializing in CSS selectors. It gives you jQuery-style selector plugins right in CSS itself.
CSS filters, GIFs, and performance – If you’re trying to convey an emotion in a presentation, it’s hard to beat a well-chosen GIF. Alternatively, if you’re procrastinating instead of writing your presentation, searching for the perfect GIF will distract you for hours.
Swapping Out Text, Five Different Ways – It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description” to “Collapse Description.”
Centering Percentage Width/Height Elements – I saw this trick used by Mary Lou over at Codrops and her article/demo Nifty Modal Window Effects. Instead of using negative margins, you use negative
How to style select, radio & checkbox form elements only with css – First let me make a case about not using js in this situation and then I will show you how you can very effectively style form elements with css while progressively enhancing & using the default style.
Height in percent when parent has min-height and no height - I was expecting the child to get the same height as its parent, but that is not what happens. What happens instead may well be according to the CSS 2.1 Specification, but a bit nonintuitive, at least to me.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
8 Techniques for Mobile & Retina Devices Detection – Today we’ll see a few ways to detect mobile browsers so you can chose the best suitable to your needs, and give your user the best experience possible.
Create The Future: Common Techniques in Responsive Web Design – I’ll describe the emerging and available techniques for site layouts that flexibly resize based on screen real estate (referred to as “fluid grids”) so as to ensure that users get complete experiences across whatever screen size they are using.
10 Best Responsive HTML5 Frameworks and Tools – This is a review of 10 open source responsive HTML5 frameworks, boilerplates and tools for front-end web development. I’ve included tutorials and resources related to each of them, and a comparison table at the end.
4 Keys to User-Friendly Web Design – What makes a website user-friendly? In this post, I identify four keys that will make any website design more user-friendly. Keep these handy tips in mind to design a more usable site.
5 Usability Mistakes You Shouldn’t Make – Most of these are really simple things to fix, so if you are making any of these mistakes, go fix them now. Just make sure to keep looking at your user interfaces with a critical eye to catch any other usability issues.
Progressive enhancement is still important – Do yourself a favour, save your JS for the cutting-edge browsers, then you only have to drag the older browsers through HTML & CSS. It’s important to do this at the script-loading stage rather than just before execution.
Infinite Scrolling And Usability – These styles of website are more usable, and require less navigation. Essentially, they require less effort and hard work on the part of visitors to get the content and the messages they are looking for.
Responsively retrofit older sites – For the sake of this article, I’d like to define ‘responsive retrofitting’ as ‘finding the fastest and lowest-risk approach to creating a better experience for users of any size screen’. The key words here are ‘fastest’, ‘lowest-risk’, and ‘any’.
10 Ways to Improve the Usability of Your Website – You should never underestimate the importance of web design usability. Usability can’t be calculated in objective figures, yet the efficiency and elegance of your website design are crucial factors in your website’s success.
Accessible RWD - Whether you use pixels or ems is a personal choice. I think that pixels is the better bet as browsers have to convert ems to pixels anyway, and different devices set the CSS pixel-density based on the assumed viewing distance.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
12 Tips for Creating a Quality Marketing Landing Page That Converts – 10 seconds is all it takes for a reader to decide whether to stay on your page – what can you do to make sure they stay and read your content?
New And Useful Tools For Web Designers – 38 Items – Some of these tools have made a big buzz the last month in social media and also on various newsletters that are targeting web designers.
How To Remove Unnecessary Modules in jQuery – It would be more efficient if we were able to run only that necessary function and not everything other unused function as well. As of version 1.8, jQuery allows us to do this.
Flat Design: An In-Depth Look – Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.
Sizing (Web) components - When using a UI Framework, I think it’s quite important that you can easily customize it. This is especially true for Web Frameworks where there isn’t really a “style guide” like on platforms like iOS or Android.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
What Are Serif and Sans Serif Fonts? – fonts are divided into groups called font families which include categories such as regular font face, italic, bold or bold italic variants. They all have an unique mark but all of them can be classified in two main categories: serif fonts or sans serif fonts.
How to Create Interactive Forms with Adobe InDesign – Another great new feature in Adobe InDesign CS6 the possibility to create fully interactive forms without using Acrobat or any other additional applications.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Taming The Email Beast – Our work environments have followed a similar path. Tools such as email enable us to communicate more, rather than make life easier. In fact, many people are now overwhelmed by the amount of email they receive.
20 tips for great email newsletter design – Most mailouts get instantly deleted. We’ll explains how to get your newsletter design right so people will actually want to read it.
Tip: Avoid using mailto links in HTML email – Using a contact form is preferable to a mailto link In short, mailto links are unreliable and sometimes rather alarming for recipients, so please try not to use them in your email content at all.
How to develop a custom Tumblr theme – The purpose of this post is to share some insight about Tumblr and how you can use it effectively for your own upcoming projects. The true benefits of Tumblr are within the blogging section of each site.
10 Key Features of Popular WordPress Themes – There are a few key components that set the best themes aside from the rest. The most popular WordPress themes – both paid and free – tend to have 10 key features in common.
8 Universal Tips & Snippets for WordPress Developers – Though you may even find many sources to resolve the issues, but sometimes it becomes painstaking to just fix complex issues. Well let’s explore some of the common tips and snippets to overcome your frequent issues.
An Introduction to Thesis: Skins & Layout Structure – So far in this series we’ve covered the building blocks of Thesis and how to manage your site’s settings, but now we want to move toward building your website’s overall structure and appearance, or “Skin” as it’s referred to in the Thesis Framework.
A Comprehensive Guide to Becoming a WordPress Developer – With this article I hope I can give you a quick primer on where to start your long but – hopefully – fun journey! It is difficult to explain programming concepts to beginners by going into maximum detail.
Search Engine Optimalization, Conversions, Analytics, etc.
Why Duplicate Site Content is Killing Your SEO: 8 Mistakes to Avoid Getting Penalized – Duplicate content has negative effects on your SEO efforts. This article breaks it down for you. What duplicate content is its effects and how to avoid it?
Optimize Start Render Time – Start render optimization takes place before the first content appears to the user, and is critical for good HCI feedback. A fast start render time gives the user visual feedback that the web server is responsive.
Blueprint:View Mode Switch – A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.
Blueprint:Responsive Icon Grid – A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.
Making HTML dropdowns not suck – In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like
Loading Effects for Grid Items with CSS Animations – Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration.
A Roundup of the Best HTML5 / CSS3 Tutorials for 2013 – Take a look at some of these carefully selected tutorials below if you are interested in learning about this cutting-edge technology, and maybe getting started.
Scroll Activated Fixed Header Animations – When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.
Web Design: Hide / Show Notification Bar With CSS3 – we are going to show you how to create a notification bar with a control button in this tutorial. The idea is that we will be able to hide or show the notification bar by clicking on a button – similar to the
25 CSS3 Transitions and Animations Effects Tutorials – The primary benefits can be seen on the site itself where it can interactive, and interesting since the browsing experience that the users or visitors of the site will be remarkable, compared to the typical look of most of the websites online.
Using Custom Data Attributes and Pseudo-Elements – In today’s tutorial I want to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup.
Build a Gmail-Style Expanding CSS3 Navigation Menu - In this tutorial I want to demonstrate both a horizontal and vertical menu with hidden content. As you hover, the CSS transition properties will expand to reveal more content, and then retract after losing focus.
Freelance, Business and Workflow Related Stuff
Why Getting Feedback is Vital for Freelance Web Designers – Because freelancers have so much on our plates, we need all the help we can get, regardless of where this help comes from, or what part of our creative process we can get it on.
How To Master The Art Of Self-Promotion – It’s possible to spread your content without cheapening your brand. Here’s how to make your message hot, without looking like a hot dog.
How to Sell Design Services Like Products – Moving from a Customer Service to a Product Oriented Service Firm. What does switching from being a custom service firm to a product oriented service firm look like?
Building A Portable Design Toolkit – We’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust. As a digital designer, you should know what your most precious tools are, and keep a portable set close at hand.
10 Pricing Strategies that Can Drastically Improve Sales – Today we will take a look at some fascinating studies in behavioral economics that paint a clear picture of how you should properly set your prices—without the guesswork.
Passion for Freelance Work– What If You’ve Lost It? – We will talk about being passionate with your design and freelance jobs. Aside from that, we will give you tips on how you can refuel that passion if you feel that it’s gone.
It’s Relationship Building, Not Networking – Networking is an awkward word. Relationship building means you’re meeting people who can potentially be helpful for your career but who are also interesting in their own right.
How to create a design style guide: 25 pro tips – When handing over a creative project, most agencies for freelancers include a document known as a style guide. Here are 25 tips for ensuring your style guide does the job right in ensuring others do it right.
F*cking Brilliant, a great Read or just magnificent Tips!
Frame of Reference – Now that skeuomorphism is a thing, and “flat design” is busy becoming the next flavor of UI styling, I’d like to provide a deeper perspective of the issues we’re facing with digital products.
Group Improvisation – We spend a lot of time talking about workflows. We do our best to diagram them, to wrap them up in a Keynote file with a pretty little bow and offer them to the world as if we’ve figured it all out.
How to learn learning web design – One can’t expect people to learn things if no one has taught them how to or motivated them to do so. Some important things I learned while trying to help people who are new to the ways of the web, watching others doing same and the faults in those processes.
- § -
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