Time for a new roundup with the best design-related articles and tutorials of last week’s blogosphere, hand-picked for you. It’s all about webdesign, graphic design, SEO, tutorials, social media 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. The different articles and post are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
idiomatic-css - Principles of writing consistent, idiomatic CSS. The following document outlines a reasonable style guide for CSS development. These guidelines do strongly encourage the use of existing, common, sensible patterns.
Gaussian Blur and CSS3/SVG - I think it’s just important to understand that both the SVG and CSS filter properties affect an element and all of it’s children. A child element cannot be ‘un-blurred’, only blurred more. There are a few methods of recreating this Gaussian blur effect, ..
Hot in web standards! CSSblending modes, Shadow DOM…- Here, in the first of a regular series of reports, I’ll sum up the hottest topics and emerging trends every professional web designer needs to know about.
The Top 10 Javascript MVC Frameworks Reviewed - Driven by a dire need for the right level of abstraction and features, I have tried out – some more cursorily than others – every framework I could get my hands on. Here lies a brief synopsis of each framework.
15 Best CSS Practices to Make Your Life Easier - When it comes to using CSS, it can be really easy to get yourself into a big mess. Whether it be from all the small changes here and there, or from a messy job to begin with, it can be a struggle to clean it up.
12 CSS3 Vendor Prefix Crisis Myths - The issues are widely misunderstood — which is why we find ourselves in this mess. Hopefully, this article will shatter several vendor prefix crisis myths…
Using jQuery to leverage HTML5 data attributes - HTML5 allows us to create our own custom attributes to store data. Custom attributes can be called anything we like, like variable names, but they need to be prepended with the word ‘data’, and words are separated by dashes.
JavaScript Profiling With The Chrome Developer Tools - Website performance is about two things: how fast the page loads, and how fast the code on it runs. Plenty of services make your website load faster, from minimizers to CDNs, but making it run faster is up to you.
Allowing Users to Resize Web Page Elements with CSS3 - With CSS3 you can give your users a greater level of control over how they view your pages without having to employ complex JavaScript functions. Using the resize property in CSS3, you can set elements to be automatically resizable.
Learning LESS: Divide and Conquer - One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).
Some CSS and HTML5 Slide Decks Worth Checking Out - Here’s a small collection of slide decks that I’ve collected in recent months. This set is focused on HTML5 and CSS stuff.
CSS variables - Weeee, CSS variables just landed in WebKit, this is pretty exciting! I know there are “purists” that say that stuff like variables has no place in the language and we don’t really understand CSS, it’s different, etc, etc.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Sketching A New Mobile Web - The mobile Web has gotten a bum rap. It spends most of its time either in the shadow of the desktop or playing the role of the native app’s frumpy friend. Luckily, we’ve got the tools to change that. Progressive enhancement, mobile-first and responsive design can help lead us towards a more unified, future-friendly Web.
Responsive Web Design Is More Than A Mobile-Optimization Strategy - Responsive Web Design is not the Holy Grail. But that is OK, because there isn’t any such thing. RWD does, however, work the way the Web works. Mobile-optimized sites may be the appropriate solution ..
10 Things To Know About The Single Usability Metric (SUM)- There is no usability thermometer to tell you how easy to use a website or software application is. Instead we rely on the outcomes of good and bad experiences which provide evidence for the construct of usability.
Visual Hierarchy in Mobile Design - Unfortunately, many of the new mobile apps are not designed with visual hierarchy in mind. Mobile (web) apps need an ordered and visually appealing design for a comfortable and enjoyable user experience.
11 Cool JQuery Mobile Tutorials - The new trend of using JQuery for your website is taking off more and more developers are developing things you will only see in flash years back with JQuery.With JQuery also great for mobile it’s no surprise that everyone is using it for mobile websites and apps.
10 tips for great user interface (UI) design - Leading designers tell us how to build user interfaces (UIs) for all kinds of clients. You’re bound to find something here to improve your knowledge.
Challenges In Responsive Web Design - Responsive web design is not a simple task However, here is a list of some of the greatest challenges in responsive web design.
A Primer on Responsive Design : From Content to Development - It’s important to understand how consumption of online content is used and what’s really happening in a responsively designed site. Users are consuming more content on mobile devices than ever before, ..
Really Useful Resources and Tools for Responsive Web Design - In this article, we will go far beyond the media queries, and showcase a list of pretty useful tools and resources everybody could use to improve the display of their website for mobile, tablet, and of course desktop browsers.
5 Essential Points You Should Know About Responsive Web Design - Perhaps some web designers have not understood what responsive design stands for yet. This is why we’ve decided to create a list of the web design elements you should not lose track of during this process.
Responsive images: what’s the problem, and how do we fix it? - Responsive images is a surprisingly complicated topic, and one that’s been steadily gaining attention over the last year as more developers discover they need them and then discover there’s no good solution yet.
Multi-Device Adaptation vs. Optimization - Direct comparisons between multi-device design solutions for the Web often miss the point: each is better suited for particular things.
Improving the Usability of Your Website - In light of the big implications of usability, this article discusses some of the higher level concepts around UX, and in doing so gives you some practical steps to improve the usability of your site today.
HRWD – Hybrid Responsive Web Design – Hybrid responsive web design does not aim to create solutions for the mobile web, the desktop web, the tablet web, the smartTV web. Each project should be evaluated to see which techniques will be the most benefical, not only to your clients, but also to their users.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
15 Outstanding Tools to Collect, Organize and Share Your Web Experience - Nowadays the web is enormous and it’s a big advantage to have a place where you can store all your bookmarks, pictures and links, access them anytime, anywhere and be able share them quickly.
Minimal Web Designs Guide - Do not try minimal designing just to follow a trend or to set a new trend. Go for minimal designing only if it is the requirement of the project. Minimal web designing is a great way to enhance important features and get rid of useless distractions.
What You Need to Know Before Building a Landing Page - The following tips will help you create a website that meets your user’s needs. If you are a designer or developer, a marketing or campaign team member should be supplying this information.
8 Fresh and Useful jQuery Plugins for May 2012 - We have collected 8 of the latest of these JQuery plugins and newest scripts by which to help you enhance your website related tasks and keep your website a step ahead of the competition.
Web Developer Resources: A Mega-Compilation - I’ve put together a huge collection of some very helpful web developer resources. These include beginner’s material for HTML5/CSS3 along with more complicated theories for JavaScript and PHP programming.
Optimizing Your Design for Conversions - There’s a lot more to designing a great website than optimizing it for web traffic. After all what use are a lot of eyes if they’re not buying products or otherwise engaging with the site?
Create a website style guide - What is a style guide? Put simply, it’s the document that tells you how to tell your story. It establishes writing rules, voice, typographical treatment, visual elements and interaction decisions.
8 jQuery Plugins for Enhancing Typography - Being able to improve and manipulate web typography has always been one of the biggest changes for web designers. But thanks to the ease of use and popularity of jQuery, developers are coming up with some clever ways to do just that.
Are Website Builders and Ready-made Templates a Competitor to Designers - Website builders and ready-made templates are a way for everybody to create a site even if he or she has absolutely no knowledge of HTML, coding, or design.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Famous Logos & The Secret to Successful Branding - So what makes or breaks a good logo when it comes to branding? How do you get the public to recognize a shape or flash of color in an instant as you drive past a billboard?
Designing Brand Identity: Essential Learning Standards - When we talk about branding it means applying your design for commercial purpose. It is a great opportunity for the designers to match artistic talent with commercial application.
Create Awe-Inspiring Icons In Illustrator [Tutorials] - Many designers know that Illustrator is also a well-known tool because it helps you to design creative objects, if you are a designer you are on a right place because below I am going to share with you Illustrator tutorials.
3 Essential Steps toward Successful Rebranding - There are two main reasons for which a company contacts a designer or design firm for a brand identity project: they are either a new company looking to establish a powerful and expressive identity, either they have an already..
How to Design Effective Infographics? - ”Infographics” aim to convey information to readers at a glance or with lesser time needed to read a short article. In other words, these “infographics” are simple representations of data or information, usually statistical information.
How Web Design Has Changed Print - Print design – from newspapers to magazines to ads to books – and web design are often linked because of their differences. The two often come up in conversation at the same time as opposites. But there is more to the story.
Blogging, Social Media, Writing, Content Strategy, etc.
Focus on the right-hand side- Recent studies suggest that people who are right-handed (which is 90% of us) tend to trust information positioned on the right of the page; more so than the information provided to us on the left side.
Nice Blogs Finish Last - Content marketing works and brands everywhere are getting on board, writing, editing and posting fresh content. That’s nice. But for most bloggers, ideas for post come along almost randomly. But was it what the audience needed?
The 10-Step Content Marketing Checklist - But this is my “essential” list for you to build a solid content marketing program on. Check these off, and — based on my experience in my own businesses and those of my students — you’ll have the right framework to create a successful program.
7 Ways to Use Your Blog to Attract New Freelance Clients - I believe that a blog needs to “pay its own way” and justify the time and money you will invest. The good news is that a few “tweaks” to your blog can boost its performance and deliver high-paying clients.
The Difference Between a Mediocre and a Great Website - Is your website attempting to do (or say) too much? Are you confusing your customers, and your potential customers by not being specific enough?
The best blogging advice I ever received and how it transformed my blog - So I’m giving you a chance today to launch your blog! I don’t care if it’s not perfectly designed. I don’t care if you still have design work to do on your theme.
WordPress
Front-End Author Listing And User Search For WordPress - Creating a front-end page in WordPress that lists your authors. We’ll discuss why you would want to do this, we’ll introduce the WP_User_Queryclass, and then we’ll put it it all together.
Using Relative URLs In WordPress - Relative URLs has some benefits: smaller page size (and thus download time) and making the site more portable when you move to another domain. This post will show you how to make your WordPress site support relative URLs.
For the Novice Developer: The Anatomy of a WordPress Theme- From storage to variables, file structure to features, all WordPress themes can be broken down and explained using basic terminology and compartmentalization.
10 Best WordPress Plugin to Clean Your Blog - Just like anything, your WordPress blog also needs some maintenance, servicing and cleaning every now and then to keep it running smoothly, speedily and effectively. Some of the basic things like updating WordPress and ..
Designer’s Guide to WordPress - I have been designing websites for nearly 15 years. My background is in design, not programming so my focus has always been the visual interface and usability. Currently I design exclusively in WordPress because ..
Up and Running With Custom Post Types Part 2 - In this post, we’ll cover creating Taxonomies for your custom post types, creating custom fields and meta boxes, saving your data and using it in your WordPress themes.
How to Protect WordPress from Malware Infections - In this article we’re going to go over the basic steps of how to protect your WordPress website from malware, virus infections, and malicious code and scripts.
What’s New in WordPress 3.4 - With WordPress 3.4 set to arrive this week, it’s a great time to familiarize ourselves with the new features and additions. The new version of WordPress brings many improvements, including custom backgrounds and headers, a live theme-customizer, ..
Search Engine Optimalization, Conversions, Analytics, etc.
The Secret to Using the Best Keywords for Search - Your best keywords are (and always will be) the ones for which you are able to offer real knowledge. That’s about it. Secrets can be surprisingly simple. But chew on this once more before this train finally pulls into the station…
Significance of Google Analytics For New Bloggers- If you are new in blogging it’s important that you have a complete know-how about the Google Analytics, basically this effort is also just for the new bloggers.
How To Clean Up And Optimize Your Existing WordPress Blog Posts For SEO - So you wrote a lot of great posts over the past few years which still receive a lot of traffic from search engines, but you’re always wondering how long it will last. Or maybe you were affected by ..
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress - tracking and monitoring each visitor who comes across a website might seem to be a bit broad, but users can actually use JavaScript on certain links to track not only the actual clicks that a link gets, but where those clicks come from
5 Tips to Do Internal Linking the Smart Way for Better SEO - Internal linking of your website’s posts and pages is one of the most often overlooked steps in search engine optimization process, and yet it is as important as building links from external sources.
6 Months with Panda: A Story of Complacency, Hard Decisions, and Recovery - Although six months with Panda seems extreme for a company that moved quickly to rectify problems, at least it shows you can recover. One key learning, it should be that you shouldn’t let complacency sink in.
Ten Simple SEO Tips - Search Engine Optimization is a bugaboo, full of misinformation put out to prey on the fear and anxiety business owners have about wanting to rank high in a particular niche. If you could do just one thing that would help a lot would you do it?
Tutorials
Building a List/Grid View Switcher with jQuery - A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids. I’ve built a simpler example using basic CSS and some jQuery commands.
How to Create an Infinite Scrolling Gallery in 10 Minutes - Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.
Create a page turn effect - To demonstrate the power of combining CSS3 transforms with transitions let’s create a gallery widget for jQuery that mimics a page turning effect. Most modern browsers now support CSS transitions, but not all support 3D transforms just yet.
CSS-Only Responsive Layout with Smooth Transitions - Create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.
Perfectly Rotate and Mask Thumbnails With CSS3 - Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard!
16 Useful Tutorials And Techniques To Create Html5 And Css3 Forms - These tutorials will help you to create inspired web forms with great specification. So let’s move ahead and give us your feedback through your comments. Enjoy..
Mobile App Design/Dev: Building Navigation With JQuery - How to build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls
Create a Pinterest Inspired Shuffling Effect With jQuery - I’m certain you’ve seen something similar before with jQuery Isotope where blocks are perfectly positioned into a series of columns, and as the screen size changes, the columns re-shuffle to make sure they fit inside the screen.
Freelance, Business and Workflow Related Stuff
Freelancing: The Important Parts - Freelancing is an art, and a science. It is difficult to master, and notoriously hard to continue doing. Creativity is hard to call on a moments notice, and almost impossible to squeeze out with barely any sleep. Freelancing in general though is ..
Sales 101: Change their mood, not their mind - A good salesperson will use a combination of logic and emotions to close deals. Using just logic or emotions by itself isn’t effective, so you have to get better at reading people and mixing up your pitch by using both of those elements.
F*cking Brilliant, a great Read or just magnificent Tips!
How to be a great developer - The market is getting more competitive so arm yourself both with excellent devops skills and the ability to think like the humans you work with. And, if you’re hiring developers then help me make the world a better place: expect more from them.
Why Web Designers are Choosing the Emotional Approach to Attract More Clients - The websites of yesterday lacked personality and character and were based on serious company personas. Businesses left humor and creativity at the door because they thought users would think these traits were trivial.
Why every designer should create side projects - As a designer, your work life shouldn’t be too bad and the projects you work on for clients might even fulfill you. In that case, why should you even bother with a side project when everything is fine, do you really need the extra work load?
Applying Dieter Ram’s ten principles to web design - One day, as the story goes, he asked himself, “Is my design good design?” His answer to that question gave rise to his famous ten principles. His ethos is the mantra of modern designers: Less and More.
Design is aboutsolutions, 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.
Coding Q&A With Chris Coyier: Box-Sizing and CSS Sprites - the new incarnation of Smashing Magazine’s Q&A. It’s going to work like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange.
What Should a Web Designer Learn From a Blogger and a Blogger Learn From a Web Designer - It is a trend amongst designers to share their thoughts, techniques, and skills with other people by using a blog. Much more, some designers learn this job by consulting the blogs ..
I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign