.. 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.
Introduction To jQuery Selectors – But, the new CSS selectors rely on the browser’s capability, making them not applicable in some cases. jQuery has a set of selectors, which could be an alternative way.
Animated Media Queries – There really isn’t a such thing as an “animated media query” so much as elements that just transition as expected when a new media query starts affecting the page.
Leveraging the Most Out of CSS Classes – When we combine all these techniques, we find utter simplicity in forming both the structure and skin of an element, while minimizing the amount of element specific style declarations in our stylesheet.
Full-width justified vertically centered navbar – After exploring lots of different methods I’ve found two solutions to the problem. As is often the case, both have their drawbacks and you need to choose which compromise to make.
Coding conventions in web development – These conventions usually cover such aspects like comments, folders and files organization, indentation, and so on. We advise you to follow these rules when you write code, it will help to improve the readability of your code and make maintenance easier.
Resetting styles using ‘all: unset’ in Firefox 27 – Since reset style sheets explicitly list all of the properties and what value to set them back to, their use can result in unexpected styling when browsers begin to support new properties that the reset style sheets do not include.
Single-direction margin declarations – I’m going to focus mainly on
margin-bottom throughout this article as it’s the most obvious to explain, but this can be applied to both directions (top/bottom, right/left).
How to use the Dialog element – In the last couple of years pop-ups and modal boxes have become a lot more popular, and with the HTML5 dialog element we can create easy HTML dialogs and modals
5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours – Five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.
Git/Github Resources – I suck at Git/Github and need to get a lot better. I asked for resources a while back and here’s what people came back to me with.
Text Compression for Web Developers – So how do you shrink your web-app’s footprint without going insane? This article will walk you through the process, and help you keep your sanity.
Usability, User Experience, Responsive Web Design, Mobile, etc.
Incorporating More Quiet Into The UX Design Process – Behind every successful design is a dynamic creative team, and it takes all kinds of personalities and skills to get the job done. However, the culture and expectations of a design agency are often largely centered on one outspoken, gregarious personality.
Six Mobile Myths – The sharing of information and experience has helped us all to gain a better understanding of best practices, pitfalls, and considerations when designing mobile products.
Responsive scrollable tables – But I do think that one of the simplest and least inelegant ways to handle data tables is to make them horizontally scrollable when necessary, and so I thought I’d describe how I do that.
Examples of Mobile Design: Anti-Patterns – In this article, the last one in this series, you’ll discover the most common anti-patterns and understand why and when to avoid them. Let’s discover more about the world of the so-called “anti-patterns”.
Mobile Design Details: Avoid The Spinner – In most mobile applications that translates to adding progress bars or spinners when something is happening or loading. While the intentions behind these progress indicators are good, the end result can actually turn out to be bad.
Making of: Entertainment Weekly’s Responsive Mobile Site – Our mission: design a responsive site for phones and small tablets. While that site focused on efficient delivery of news and headlines, the new site was to branch out and include the full EW.com experience.
What Does Responsive Web Design Have to do with Accessibility? – roughly 60% of tablet and smartphone users prefer to use their browsers to access news on their devices. Similarly, users with disabilities do not want separate sites in order to access content.
Best Of Both Worlds: Mixing HTML5 And Native Code – Rather than build an app entirely with native or HTML5 technology, why not mix and match the technologies? With a hybrid application, building a mobile experience that leverages both native and HTML5 code for the user interface is quite possible.
5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before – In this post, you’ll find five awesome design patterns from Style.com that you’ve likely never seen before while browsing the web on a smartphone.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
What does designing in the browser mean? – Designing in browser requires a change in mindset. We’re not designing pages, but systems. We’re designing tiny bootstraps for each site that should cover a kitchen-sink-like range of site elements.
Page Weight Matters – Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets.
Bring back the baseline – Utilising pseudo elements, we can essentially push the paragraph element out of its container. This has the following effect on the box model ..
Cohesiveness of Site and Product – Before you know it, your website has eye-catching aesthetics, an elegantly designed UI, a complete set of social and interaction features, but absolutely NO relation to the product you’re trying to represent!
Smart, Effective Strategies To Design Marketing Campaigns – In this post, you’ll learn what to look out for when creating your own small campaign and how these elements fit together in existing campaigns around the Web.
FullPaged: A Single Paged Layout jQuery Plugin with UI Animations – I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.
9 Stunning Super Handy Icons Fonts – Using an icon font is a great time saving tool and is perfect for quick editing and use on retina displays, with this in mind I wanted to share a collection of 9 stunning, super handy icons fonts.
Following the Crowd: Will Flat Design Suit Your Website? – Flat Design is an approach that some can take too literally. Most sites can benefit from taking the best aspects of flat design and applying them in a manner that is suitable to their website.
What’s the Difference Between a Web Designer and Web Developer? – Almost everywhere you look someone is talking about or calling themselves either a web designer or web developer. Who really is a designer or developer? Can you be both?
What’s new for designers, October 2013 – The October edition of what’s new for web designers and developers includes new web apps, app creators, coding resources, productivity tools, testing tools, and some really great new fonts.
Type Makes A Difference: An Exploration Of Type-Focused Websites – We’ve focused on typography and on how engaging it can be; hopefully, it has broadened your view and drawn your attention to some of the minutiae involved in effective typography.
All About Responsive Iconography – We need to design icons that accommodate different size ranges and we need tools that display icons at the proper fidelity based on their display size. None of the current opinions are perfect.
Flat UI and Forms – The problem is that most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. What happens when flat and forms collide? User experiences can, and often do, suffer.
Building Content Hierarchy Through Design – Here, we looked at the ideas we had for laying out our content in a way that worked well and had a good hierarchy to it. Now, we want to make that content hierarchy work visibly and visually through our designs.
Improve your websites with microinteractions – To create a successful product that users love, you need to focus on both parts of design: the big picture and the details. Microinteractions are those details and are the ‘feel’ part of the ‘look and feel’.
10 Super Useful Tools for Better Web Typography – Today with the growing popularity of web fonts and modern CSS techniques, this task has become easier, but it never hurts to have all the help you can get with something so critical.
A Guide to Designing a Portfolio Website – For web professionals, having a portfolio website is crucial because it’s one of the key ways of attracting new projects and clients. In this guide, I’ll walk you through the different parts of a portfolio website.
Review of Top Free CSS Editors – And especially because we love CSS so much, today we will take a look at some free CSS editors that will help you code better and, why not, quicker.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
A Quick Guide to Sans-Serif Fonts – The Sans-Serif has gained the reputation as a “modern” style of typography, but we can find some very early examples of sans-serif type, written in Latin, Estruscan, and Greek letterforms.
20 Illustrator Tutorials – Learn to Make Fabulous Vector Graphics – Adobe Illustrator is a powerful tool for creating vector graphics which can use for web and graphic design. Vector Tutorials are the best way to learn trendy styles and effects.
Creating geometric patterns in Illustrator – In this tutorial I’ll explain 2 of the patterns shown in the example. The 2nd looks not too difficult to create, and the 3rd one is the most complex one of the two.
Beginner’s Guide To Book Cover Design – Book cover design is booming and even has its own awards. The traditional process of getting a book cover design can be extremely time-consuming and the result is often disappointing for the author.
Gaining Confidence as an Inexperienced Freelance Designer – What does it take to get started as a freelance web designer? If you’re brand new to both web design and freelancing, what are your first steps?
8 Important Elements To Include On Your Personal Branding Website – The hub of your online personal brand will be a website that showcases your expertise, experience and personality, here are eight essential elements you need to include on your website.
Fatal Mistakes in Logo Design and How to Avoid them – Ignoring these common mistakes could result in a logo that loses the interest of potential customers and clients, at best, or a completely inappropriate logo, at worst.
6 Business Card Mistakes You Might.Be Making – If you don’t want your business card to convey how competent and professional you are, feel free to make any or all of these mistakes in designing your business card.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
4 Ways to Optimize Your Old Blog Posts Today – So if you have old blog posts that are pretty good, and still generating some traffic, you can optimize them today to make them even better. Here are four ways that you can update your old blog posts to get even more traffic to them
12 ways to improve your blog – Regardless of the type of blog you have, there are always things you can do to improve. The following are 12 suggestions that can help anyone – the beginner, the business blogger, or the company who blogs.
A Simple Process for Creating a Popular Blog – I used to be skeptical about the value of maintaining a blog. I used to think blogging was a waste of time. My thinking was: the time you spend blogging could be better spent on getting more projects and doing paid work.
5 Ways Designers Can Get the Most From Social Media – With so many different networks to master, it is easy to become overwhelmed. That is why it is important to get the most from social media sites in the few hours or minutes per week that you do have to spend on them
Delete and Relocate Your Way To Better WordPress Security – You cannot protect your site against any and every hack attempt but with a few simple steps you can quickly move those hack bots onto the sites of less conscientious WordPress owners.
Schedule Events Using WordPress Cron – Cron is a system originally built for UNIX that enables users to execute commands, programs and other actions at specified times. As Wikipedia so eloquently puts it, “Cron is a time-based job scheduler.”
How To Quickly Backup Large WordPress Databases – There are so many alternative plugins and methods which just don’t encapsulate the feelings of manual backups. Some hosting providers are nice enough to keep backups for you in the event of hard drive failure.
Displaying Information of a WordPress.org Plugin on Your Website – In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on WordPress.org on our WordPress website using shortcodes.
How to Show Different Menus to Logged in Users in WordPress – When running a WordPress membership site, a forum in WordPress, or allowing users to submit posts, you may come across situations where you want to show different navigation menus to logged in and logged out users.
How To Create A Child Theme, And Why You Should Be Using One – We will go over how to create and use child themes, and why using them is so important. Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache.
Our favorite free WordPress themes, October 2013 – Every month we’ll be bringing you our pick of the best free WordPress themes released in the previous four weeks. Here are our favorites for October ..
Search Engine Optimalization, Conversions, Analytics, etc.
The Essence of SEO: What Is High-Quality Content? – Let take a deeper look at search, how it’s evolving, and how that affects us as marketers. Then we’ll review the challenges you face as a content creator and what you need to do to create higher quality content.
Are You Doing Your SEO Wrong? – I decided to create a free website analyzer that will crawl your site and tell you the specific things you need to fix. All you have to do is go to website analyzer and enter in your URL.
Science of Conversion Rate Optimization – Conversion tools are aptly called ‘tools’. You can compare them to a hammer; you’ll use the hammer to get some nails in a piece of wood, but you won’t actually have the hammer do all the work for you, right?
5 Killer SEO Tips for Boosting Your E-Commerce Site – The fact still remains that following White Hat SEO policies, e-Commerce websites can actually benefit a lot. Here are a few practical tips that help fine tune your SEO strategy and avoid ending up on Google’s bad SEO list.
How to Create a CSS3 Mega Drop-Down Menu – Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content.
Freelance, Business and Workflow Related Stuff
How to Get Clients to Pay You on Time – Drawing upon my time spent freelancing and the expertise of some of my contemporaries, I would like to discuss five things you can do to limit your struggles with late payers.
Should You Be Freelancing on Tumblr? (What You Need to Know) – So, as a freelancer, what should you know about Tumblr? In this post, I’ll explain what Tumblr is and share several Tumblr blogs that might be helpful to freelancers.
Don’t Be A Web Designer – Providing the above online design services as well as offline design services have been essential to my business. Just web design alone is not enough.
Collaboration Between Designers and Copywriters – So how do you make sure you get the most out of your designer-copywriter partnerships? Great copywriter-designer teams use the following tactics to create stronger design work, together.
F*cking Brilliant, a great Read or just magnificent Tips!
A Simple Guide to Saying No — Saying no can be unpleasant. It can feel like a fully decked out marching band (complete with snare drummers and baton twirlers) showing up in your inbox one day and you choosing instead to rain on their parade.
Art Directed Articles. Still a Good Idea? – The idea of an “art directed article” is that it is designed specifically for the content of the article. It might share some characteristics from the parent site (it probably should), but lots of design elements change to suit the specific article.
What comes first content or design: The argument continues – It is now important to integrate content creation into the web design and development processes from the word go and focus on content and only content in the beginning of any design process.
How Companies Can Prevent User Backlash After a Redesign – Wometimes those good intentions end up backfiring, and users get upset with the new changes. User backlashes often happen with site redesigns because companies don’t test their interface before they redesign it.
- § -
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