.. 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.
Rotated Table Column Headers – Perhaps not a huge problem for two columns, but if you had 20 that would be very hard to navigate and a poor use of space. A better use of space is to rotate the headers so that the column width can be much narrower.
Prevent CSS Transitions Running On Page Load – Sometimes If you’re working with a lot CSS transitions on a page, you may notice some transitions run when the page loads. Most of the time this happens when you have transitions set on structural elements of a page.
Vertical Alignment – Many people have written about vertical alignment in CSS before. I’m not going to present some brand new technology to help with it, but explain the pros and cons to a few techniques, so hopefully you’ll find one that’s suitable for whatever you’re working in.
Touch Icons: Less is More! – You can add great looking home screen icons for iOS and Android with a single image and two lines of code. Here’s the Github Repo with the markup and a test image.
Why designing in the browser is the way forward – Since this is still a relatively new approach in the industry, I want to give a better insight into the workflow, and why we’re using it.
uncss: Find Unused CSS – There’s no arguing that years of maintaining, adding, and removing from a site will add excess code to the codebase. That excess code comes at the cost of users who have load the extra code, so eliminating the dead code is important.
How to Use steps() in CSS Animations – I am guessing that many of you have found
steps() to be confusing when using it in CSS animations. So, I really got into
steps() and built a few animated demos to help those that might be as confused as I was in tackling this elusive beast.
How to Enable CSS3 Border Radius in Internet Explorer 8 and below – CSS3 gives us the ability to create rounded corners with the
border-radius property. But as you might already know, this new feature is not recognized in Internet Explorer 8 (IE8) and its earlier versions.
The Power of em Units in CSS – So I’m going ride his coattails in this post. Here you’ll find a quick introduction to em units, followed by a live demonstration of the technique Simurai describes.
How to Evaluate Front-End Code for Inefficiencies – Using real-world examples found on several websites, let’s take a look at common “red flags” to look for when writing code and evaluating its quality.
CSS Preprocessors to Speed Up Your Coding – Most of the developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.
Usability, UX, Responsive Web Design, Mobile, Performance, etc.
Whatever goes up, that’s what we do – After an investigation into the problem by Facebook’s data team, they discovered that the new News Feed was performing too well. It was performing so well from a design standpoint that users no longer felt the need ..
Bringing Responsive Images to Browsers – After almost three years in pursuit of a standardized solution to the problem of responsive images, the Responsive Images Community Group is excited to announce that the
picture element is officially coming to a browser near you.
5 Proven Ways to Make “No Results” Pages Work for You – So is there a way you can fix the broken UX of “No Results” pages and make them work for your benefit? Actually there are five!
So You Have a Mobile-Friendly Website. What Now? – Instead, I want to talk about what happens next. This post will cover some big-picture trends, case studies, examples and tactics, but the overall theme is “online everywhere.”
Ethan Marcotte on how responsive web design came about – If there’s one man in the web industry who probably doesn’t need an introduction, it’s Ethan Marcotte. But as he sits in his white-walled office and sips his morning coffee, it seems the most logical place to start.
How to ensure your content is ready for responsive design – It’s essential that producers understand the principles and rationale that sits behind the design techniques deployed on the sites they look after, and actively liaise with development teams to find out about the capabilities of what they’re working with.
A Guide to Animated GIFs in Email – Many marketers are finding that adding interactivity is just the thing to increase subscriber engagement, and are increasingly turning to animated GIFs to provide that bit of extra interest.
The importance of “beauty” while designing your website – There is no accounting for taste. But it made me wonder, how important are the aesthetics of a website? Does a beautiful site convert better? And what is the relation between aesthetics and usability?
Webdesign in Common, Web Typography, jQuery, Tools, etc.
5 Predictions of Modern Web Design – The web and graphic design industry is expanding in leaps and bounds. We foresee many trends emerging in the web-design realm with more focus being given on creating less complicated and more sophisticated designs.
Content-out Layout: the Resources – If you’re interested in a deep dive, I have compiled this list of the most useful thinking on the web about ratios, grids, and fluid design.
Why Website Speed is Important – We can confidently conclude that slow sites have usability and SEO issues because we know that users hate waiting for web pages to load and that Google uses site speed as a factor for its search rankings.
(Re)Adopting the Design-in-Browser Approach – I think it’s time to go back to the core of web design and skip the Photoshop part where not really needed, by simply start coding our websites in the text editors again. We, web designers, should never have completely abandoned that.
15 common mistakes designers make – I’ve compiled a list of common design mistakes for you to be aware of. Although I’ve committed most of these crimes myself, I have learned from them and hopefully they can help you too…
6 Common Favicon Design Mistakes – If you want an effective favicon that your audience will instantly associate with your company you’ll still have a bit of work to do. As long as you steer clear of these 6 common design mistakes you’ll be able to create something eye-catching.
Improve your designs with this 10-point checklist – This design checklist is a guide that I created for myself over time. Following these 10 steps allows me to stay on track with multiple projects simultaneously, and allows for a healthier design process overall.
JS Manners – JS Manners is a tool to score scripts that 3rd parties (people or companies outside your dev team) provide for you to put on your page. These scripts can save you a lot of time and provide neat features on your site, but they can also be security risks, cause performance problems, and make debugging a nightmare.
Increasing Conversion Rates For E-Commerce Websites – Whether you have an online store that only has a few products or a huge online store with over 100,000 products, there are some basic things that you can do to spruce up the performance of your online store.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Latest Illustrator Tutorials for 2014 Graphic Designs – So in this context, here I would like to show you a brief but complete collection of the up to date Illustrator Tutorials for the making of the 2014 Graphic Designs.
Erik Spiekermann on why type is brand – A brand that doesn’t pull out all the typographic stops will not communicate properly. Only those that do know how to speak to their audiences will survive. Type is visible language.
Understanding Smart Objects Via Copy – If you would like to work more efficiently in Photoshop, then it is important to know how to make the most of smart objects. This means understanding the difference between simply duplicating a smart object and creating new smart objects via copy.
Retro Text Effects with Illustrator’s Appearance Panel – In today’s Illustrator tutorial we’ll take a look at the Appearance Panel and see how it can be used to build up layers of non-destructive effects that can then be saved as Graphic Styles so the effect can be instantly applied to any elements.
Corporate Branding: What it is, and How to do it Right – Your brand is WHO you are, WHAT you do, WHY you do it, and who you do it FOR. It’s your promise to your customers. It represents what customers expect your company to deliver.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
6 Tactics That Turn a Blog Into a Business Engine – Here are six tactics that need to be fundamental parts of any such campaign. When they are, your blog will become an engine that powers your business.
A Checklist for Writing Emails That Get Opened – So what’s the secret to get those emails from cyberspace to your customers’ inboxes with high odds for an open? Here are 6 email marketing tips to make your investment worth the send.
How To Create a Content Style Guide to Improve Your Blog’s Quality – Content style guides are easier to set up than you think, and the payoff can be substantial for the success of your blog and the enjoyment of your readers.
5 Ways to Attract More Readers to Your Blog – When you blog to promote your business or industry, it’s important to make sure your content gets seen. In this article I’ll share five ways you can attract readers to your blog content.
Your Audience Doesn’t Know What it Wants – Your audience isn’t really coming to your blog because everyone already knows exactly what will solve all of their problems. If they knew that they probably wouldn’t be reading your stuff!
5 Reasons Why I Don’t Install WordPress Plugins – I have my favorite set of WordPress plugins that I cannot do without but if we end-users are more selective with the plugins that we adopt for use, this may little by little help improve the overall quality of plugins.
How To Build A Premium Content Site Using WordPress – In this article we’ll look at how to approach creating and maintaining a premium content site and look at several potential technical implementations.
7 Really Annoying Things About WordPress (and How to Fix Them) – Luckily, WordPress is updated frequently and it gets better with every update. There are also lots of clever developers out there who have written plugins to deal with some of its shortcomings.
Trim the Bloat: An Introduction to Keeping WordPress Healthy – This series will aim to help you prevent that bloat in the first place, or, at the very least, will cut away some of the bloat that you already have.
Everything You Should Know about WordPress Custom Fields – Hopefully at the end you have a sense of what WordPress custom fields are — a basic key-value store for post-entities in WordPress — store your data simply that doesn’t lend itself to a five word summary.
Hassle Free Responsive Images for WordPress – Here I’ll show you how to add support for responsive images to your WordPress site in the form of a small WordPress plugin. We’ll be using the Picturefill library here.
Features for Theme Developers (WordPress 3.9) – WordPress 3.9 will be released this month with some great new features. I think the enhancements for media will get a lot of attention in this release- but there’s also a ton of hidden gems.
Eight Useful Code Snippets for WordPress – In this article, I would like to show you eight useful code snippets that will enhance WordPress. I have tested that all snippets are working using the current default theme Twenty Fourteen
Search Engine Optimalization, Conversions, Analytics, etc.
The NoFollow Tag – When and How to Use it to Prevent Google from Penalizing You – But what is a website owner to do if their online articles had informative content but also include a sizeable number of backlinks that point visitors to different websites?
Parallax Scrolling Websites and SEO – A Collection of Solutions and Examples – Parallax Scrolling is one of the latest trends in web design, yet most parallax scrolling websites are not SEO-friendly. I have observed this trend on sites like Awwwards, theFWA and many more.
Minimal Form Interface – A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.
A Fresh Approach to Responsive HTML5 Tables – You’ll need to view this page in a browser window less than 600 pixels wide to witness the transition into the alternative layout of the table.
Freelance, Business and Workflow Related Stuff
Automatically Track the Time You Spend in Photoshop – There’s a (recently) free tool called TimeTracker that automagically tracks how much time you use up using Adobe Creative Suite software (i.e. Photoshop, Illustrator, InDesign, etc).
Why Clients Aren’t Interested in Your Proposals – Rather than beating ourselves about it, let’s try to understand the reasons why clients aren’t interested in our proposals so we can tweak our approach to create better ones.
How to go freelance – Going freelance is one of the scariest career moves you can make. But done well, it can make you better off, give you more freedom, and most importantly, make you happier.
Learning How to Make Money from Home Doing What you Love – Many times we look at freelancers and the businesses they start and only see the end results-the successful enterprises they worked so very hard to establish. And make no mistake, there is a lot of hard work that goes into any successful business.
How to Get Web Design Experience – Most employers in the web industry care about demonstrable skills above all else. They’re not interested in college degrees or boring resumes. Rather, they want to know what job candidates can do right now.
4 Ways to Wow Your Clients And Make Them Addicted To Your Services – In this post, I’ll share four steps that will keep your name in front of your clients and help them to remember you for their next web design project.
5 Things Every Great About Page Needs – If you’re not optimizing your About page, you’re missing out on an opportunity to enhance your online presence, attract more followers and earn you more sales—if you incorporate all the right elements.
Some Ideas for Maintaining Your Freelance Mental Drive – Yet I could not have done so without learning some really key tips and tricks along the way to keep my mind in the right gear, and on the right road (and in some cases, on the right planet!).
F*cking Brilliant, a great Read or just magnificent Tips!
The Pastry Box Project – I don’t work in the tech industry. I work on the Web. Every day I read about the sorry state of the tech industry. Stories about bubbles, sexism, IPOs, prejudice, elitism, drama, and get-rich-quick schemes fill my feeds.
Why Entrepreneurs Are Obsessed With Failures – There is nothing you can learn from failure; failure only peels your character layer by layer to unleash the more enlightened version of you, which was always there.
Tools Don’t Matter – Our tools don’t necessarily make us skilled at our crafts, they simply enable us to do them. And if those tools stop working or a better one is invented, we simply switch without losing the knowledge of our craft that we’ve built up over time.
Why design is about solutions, not visuals – We often hear the phrase ‘design is problem solving’. I think that’s close, but really I believe that design responds to problems. They don’t need to be (and shouldn’t try to be) the ‘perfect’ answer.
Why wireframes should be left to die – For years we’ve tried to maintain the metaphor of the wireframe as part of our web design process. It’s time to give up the ghost and finally let wireframes die.
Thoughts About Design And Art – We should think about adding artistic value to most everything we do. Design is as likely a home for that artistic value as anything else.
Paper prototyping is a waste of time – Paper is great for starting design work, but it’s the wrong tool for testing. Design on paper but always test with a screen.
– § –
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