First roundup of the year 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.
Wishing everybody a great, successful and healthy New Year! Let’s kick some butt this year!
Think Twice Before Using matchMedia to Conditionally Load Stylesheets – I’ve experimented with using matchMedia to restrict the loading of social media buttons to larger viewports so I think using matchMedia to conditionally load content is a great idea but I was less convinced by the benefits of conditionally loading CSS.
Progressive jpegs: a new best practice – Bandwidth-wise, images are hogs. They are the largest average web site payload (62%), and they are most often the content bottleneck. When images arrive, they come tripping onto the page, pushing other elements around and triggering a clumsy repaint.
Details about “float” property – Proper use of CSS float property may turn out a daunting task even for an experienced coder. This article contains the examples of applying of property float, as well as some mistakes with illustrative examples.
All you need to know about CSS Transitions – In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.
A Look Into HTML5 Basic Elements: <Header>, <Nav> & <Footer> – HTML5 development is not finish yet. But, there a few new elements in HTML5 that can be used today, elements that are already supported in current and old browsers (with shim) such as
15 Free Useful CSS Snippets – CSS is one of important component in web development, it is use to make different styles such as adding shadows, animations, font styles etc. Today, we are presenting you 15 free useful CSS snippets to use in your work.
Improving Your Work-Flow – Separate Your Mark-Up From Your Logic! – I urge you to try using this technique when building plugins in the future. Hopefully you’ll find ‘separation of concerns’ to be of benefit to you.
Just Say NO to Wireframing – This word is commonly misused and the cause of considerable frustration for those of us that design experiences. Yup, we Design Experiences. The problem is that in many organizations Wireframinghas become synonymous with Design.
Introduction to gradients – The problem with gradients is that they are a syntactic nightmare. This page gives some more information, as well as workarounds. The gradient spec writers and browser makers changed their mind not once but twice.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly – Now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales, and more.
The Not So New Best Practice: Progressive JPEGs – Recently, Chris Coyier posted a hotlink to an article called “Progressive JPEGs: A New Best Practice” by Ann Robson. While I feel she makes some valid arguments for using progressive JPEGs this is far from new and far from a ‘best practice’ for the web design world.
The device-agnostic approach to responsive design – Responsive design can become both device-agnostic and context reactive, effectively providing content optimized for the current device. Optimization should result from task and context analysis, ..
Responsive Design for Apps — Part 1 – A few months ago I was tasked with finding a good solution for a client who wanted to move to responsive design, but had a web app that they needed to support as well.
What responsive design is not – As more and more designers turn to responsive design we start to see, and hear, more about what it is and what it can do for us; but what about the things that responsive design is not?
How Responsive Design May Lower Mobile Device Cost – More designers, developers and entrepreneurs embracing the versatility that responsive design provides. The drop in mobile device cost may just be icing on the cake.
Trent Walton on RWD,friends and passion – Paravel founder Trent Walton answers your queries about responsive design, working with friends and getting hired to do what you’re passionate about. Oh, and talks turbo-powered space yachts …
Stop Explaining UX and Start Doing UX – I always include user research in my proposals, but clients never want to pay for it. Nobody in our company understands what we do. They think we’re just here to build wireframes and make things look pretty.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
11 Types of Marketing Emails You Could Be Sending [+ Free Templates!] – Oftentimes, marketers do give a lot of thought to email design when it comes time to launch a campaign. It makes perfect sense:
Top Wireframing Tools Every Designer Needs to Consider – Using a wireframing tool is indeed a fast and easy technique to plan the layout and to easily communicate your ideas with the clients. This part of design supports the entire web design process starting from its preliminary stage.
Future trends in web design: predictions for 2013 – we hereby present the latest predictions for web design, hot off the press! I spoke with 11 designers and creative professionals about what they foresee for web and UX design in the coming year.
7 Conversion Optimization Mistakes To Leave Behind in 2013 – Optimizing websites for conversion is catching on, but there are still some major blunders that companies and organizations seem doomed to repeat.
Add Flair to Projects With Alternate Lettering – Most typefaces have more than just 52 letters – 26 uppercase and 26 lowercase. They also contain an assortment of alternate characters that can help add flair and interest to your typography.
Techniques for Creating Motion in Web Design – Create a livelier page by using images and objects that create a sense of motion. Get inspired by great web design examples and learn about some practical techniques.
5 Designing Aspects that Successful Website Designer Get Absolutely Right – When it comes to website designers, there are some that are successful and there are others that are not so. The thing is that in a creative field ..
7 Newly Released jQuery Plugins for Developers – 7 Useful recently released jQuery Plugins which will enable you to optimize and enhance your web applications as well as any new features you may be considering adding to your website.
What is @font-face and How to Use in CSS – @font-face is a CSS rule that allows you to input your own font to appear on a website even when the particular font is not installed on the visitor’s computer.
In search of the perfect radius – As of now, it seems, after all, we’ll have to rely on our eyes to find the best fillet radius. Not a comfortable position to be in but that is where we are. But, note that we’ve already established the formula for inner radius.
Creating an Effective Coming Soon Page – Due to all this abundance I’ve decided to take a closer look at the construction of a coming soon page and list some of its most important elements. Both from the designer’s and marketer’s point of view.
How to Develop a Website Redesign Strategy That Guarantees Results [+ Free Template] – A redesign can be a huge success — or a total flop. It can also be a long and tedious undertaking, which is why every redesign needs to start with a clear vision and/or problem to solve.
How to Optimize Your Landing Pages for Long-Term Lead Generation – What if the campaigns you’re working on this month were still generating leads for you six months later? What about three years later?
Make the perfect portfolio – Your portfolio is your calling card and your art gallery, the place where you showcase your skills and the stories behind your most impressive projects, where you show not just what you’ve done, but what ..
Creativity: Key to Improve Your Web Designing – You can boost your creativity skills by widening your horizons and by following the principles of certain congenitally creative people. Here are few ideas to foster your creativity for your next web designing project.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
40 Useful Adobe Illustrator Text Effect Tutorials – Creating unique and eye-catching typography depends upon the creative talent and skills of the individual when using the graphic tool.
Rebranding Your Startup – So when we raised our Series A, a proper rebranding was on our to-do list. We successfully acquired the domain through a broker (the previous owner was very reticent to sell). That was the simple part. Now the real work of doing the rebrand.
White space is your friend – tips for graphic design – Visual imagery is a language and, like any language, it has some basic rules that make communication possible. As learning professionals, more and more we are being asked to ..
Six Great Alternatives to Helvetica – Helvetica has important faults that any designer who takes typography seriously should be aware of, and could even warrant alternatives.
3 things you didn’t know you could do with InDesign – Some of them are part of its core, but you can also expand InDesign’s features thanks to scripts and plugins. Here are three things you can do with InDesign that you might not have known about…
The Seven Pitfalls of a Modern-Day Brand – If you run your own business or you are tasked with improving your company’s brand image, you know better than most that the barriers maybe lower and people maybe easier to reach, but life is still tough.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Six Rules of Blogging – Rules are rules no matter who you are, where you’re blogging, or what you’re blogging about. Here are six rules of blogging you’ll need to remember.
How to Become an Influential Writer in the Age of Author Rank – Hard work is required, but you can write authoritative content — even if you feel like a beginner. But you need to start right now ..
5 WordPress Mistakes Even Experts Can Miss – Keep in mind that even though I’m labeling these tips as “advanced,” there’s absolutely no reason why you can’t tackle them.
4 Ways to Make Your WordPress Site More Accessible – If you want your site to be accessible to individuals with disabilities, you’ll find that basic WordPress has much that is needed to facilitate the development of an accessible website, and it is not hard to take that further through the addition of plugins and good technique.
Timesaving WordPress Code Snippets and Hacks – We are going to share with you some useful WordPress code snippets to save your time and you can design a great WordPress theme with these handy and ready to work code snippets.
Imposing SSL and Other Tips for Impenetrable WP Security – Today, we share a few more interesting and effective tips to help you secure your website/blog against information theft, breaches, intrusions and interception.
Creating WordPress Themes That Sell – 5 Guidelines You Should Know – Often we find talented developers not making it big with WP themes in terms of financial gains. In this article, we take a look at certain things that you should do right in order to make money from WordPress themes created by you.
Creating Responsive Pricing Table Plugin for WordPress – This tutorial is intended to provide knowledge to WordPress developers on creating a plugin from scratch which enables customization in different projects.
7 Powerful SEO Tips For WordPress Blogs – Here are few basic SEO tips for WordPress blogs to consider. Follow them, you will certainly see a huge growth in your search rankings in the long run.
Search Engine Optimalization, Conversions, Analytics, etc.
How to Use the Broken Link Building Strategy to Get Links – In this post, we’re going to look at broken link building tools, ways to discover broken links, and how to acquire them.
5 Deadly Sins of SEO and Online Marketing – Since becoming an SEO consultant several years ago, I’ve stumbled over many of these proverbial mines, and so have the clients I’ve worked with. Here are five fatal online marketing and SEO mistakes that you should steer clear of.
Optimizing Images for SEO – One of the easiest ways to optimize the content of a page is to focus on the images. Most pages contain images, whether they be photographs, illustrations or icons.
SEO Tips for 2013: Author Rank, Co-occurrence and More – If the past is any indication of the trajectory, the industry will continue to change and evolve, and effective campaigns will be maintained through a diverse and holistic perspective to SEO
Why Optimizing for Users Is the New SEO – And now that search engines are getting better at deciphering the semantics of human language, its time for SEO to take a more human-centered approach. We must embrace these times and learn how to reach our audience where they are on their terms.
The Making of the Interactive Treehouse Ad – I thought I’d create a little interactive area to kind of wet people’s whistle on what jQuery can do, and get them excited to learn more about it.
Coding a Minimalist Portfolio Layout with Dynamically Sorted Projects – In this tutorial I want to demonstrate how we can build a dynamic filtered portfolio list using jQuery. To speed up the development process we can use a jQuery plugin Quicksand to help with the sorting animations
How to Create a Simple Multi-Item Slider – A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.
Build a Twitter Clone From Scratch: The Design – the process of designing and building a web app from scratch – in multiple languages! We’ll use a fictional Twitter-clone, called Ribbit, as the basis for this series.
Freelance, Business and Workflow Related Stuff
Starting An Open-Source Project – It’s actually not that hard to create a successful open-source project when you stop to think about your goals.
Preparing For A Front-End Job Interview – Preparing for an interview as a front-end developer is hard. There is no “standard” interview, and what was relevant last year might no longer be relevant today.
F*cking Brilliant, a great Read or just magnificent Tips!
Design is not veneer – Now, let me tell you what design is not: it is not a silver sixpence. And it’s not something you add to your site in half an hour. There are no ‘quick design fixes’. Design is not synonymous with aesthetics, although aesthetics are a component of design.
The Design Lesson: 1 of 1 – Once you’ve learned, understood, and internalized the fundamentals of artistry (and every designer must), I hold that there is one and only one design lesson any graphic designer needs to learn
Don’t break rules, reinvent them – And, of course, web design uses HTML and CSS — two languages with which browser makers and designers find common ground. But many web designers create amazing variety with the same language rules by asking what if instead of falling into of course.
- § -
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