Yay, it’s Saturday .. Time for your weekly roundup filled with the best articles and tutorials of last week’s blogosphere. 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.
The single responsibility principle applied to CSS - Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.
CSS Overflow Property - Elements on pages are arranged in form of boxes, and we can control the sizing, positioning and behavior of these boxes with CSS. Suppose a container box has fixed width and the content box doesn’t fit in, here we can use overflow declaration to control ..
BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS - It’s the underlying principles like decoupling html and css that are more important. It’s the idea of reducing location based selectors, mostly likely through a greater use of classes that you should be thinking about.
Why you should care about CSS page performance - If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters. Whether it is how fast the page loads or how it behaves once it’s in place, how well that page works has ..
Transforming Elements in 3D Using CSS3 - we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.
Learning LESS: Variables - Variables in LESS begin with the @ sign. What follows that can be any combination of letters and numbers, dashes and underscores. Once you’ve named your variable, follow with a colon (similar to CSS) and define the variable.
Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap - A problem that has always existed but has become more common lately as more people make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.
Ways to Speed Up CSS Rendering - When coding CSS, one of the best ways to ensure your code runs smoothly on older browsers and slow computers is to write your CSS efficiently for browser rendering, this way your site takes less resource and memory from the user’s computer and therefore runs smoother.
Cross-Browser Debugging CSS - CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs. I learned CSS by reading the W3C specifications, which is why I began coding according to the ..
20 Excellent Pressable 3D Buttons With Pure CSS3 - In today’s post we’ve collected 3D animated ”press-able” buttons created with pure CSS3.You can easily integrate them in your websites or blogs.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Breaking Out of the UX Status Quo - Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward.
35 Useful Responsive Web Design Tools - You can find valuable layout aid tools, prototyping tools, code generators, and even a collection of inspirational responsive website designs in this article. We hope that this collection can help you enter the responsive design scene and make a difference.
How to Turn Any Site Into a Responsive Site - We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now.
Responsive design – harnessing the power of media queries - It’s worth bearing in mind that there’s no simple solution to making sites accessible on mobile devices and narrow viewports. Liquid layouts are a great starting point, but some design compromises may need to be made
Removing Stumbling Blocks In Mobile Forms - Many elements within a mobile form affect how smoothly users will get to a service or product hiding behind a form of any kind. In this post we will look at the most common stumbling blocks for mobile devices.
Using Web Standards to Create a Great Mobile Experience - Mobile is a rapidly evolving medium, with a constantly expanding range of devices. As a result, designing for mobile sites can be particularly challenging — even more so given the need to keep your brand strong by maintaining cross-channel consistency.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Beginner’s Guide to Wireframes and Tools to Create Them - Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it on paper or even code it right away ..
Parallax Scrolling and Its Usage in Web Design - the parallax scrolling effect is not widely used on the web, probably because of two different reasons: it is difficult to develop from scratch and heavy to load by browsers. And if you go for a more simplified CSS3 version, ..
Recently in Web Development (April ’12 Edition) - In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package.
15 great HTML5 and CSS3 generators - I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. Note: click on the images to open the websites.
Effective Typography-Driven Web Design - The best text-driven design uses a minimal set of effects to create a word image with impact. Take a look at novelty typefaces, set a clean and limited font palette, play with bold or sharp color choices, make the letters big (or small), make type art and use strong words or catch phrases.
Texturise web type with CSS - Mask-image can be used to knock out small textural pieces of headline text. Using this technique with paragraph text would hurt readability, but when applied to a large-format display font, it can create a subtle point of interest.
Tools and Resources for Understanding and Creating Stunning User Experience Designs - UX design increasingly popular nowadays and that’s a great thing because it means that companies or developers want to deliver applications which not only work well but also look and feel great.
Mistakes to Take Note of in Designing for a Website’s Call to Action - Designing an effective call to action means that you have considered well everything pertaining to its usage. You have to take note of some mistakes that are commonly committed by some designers.
Applying Macrotypography For A More Readable Web Page - This article focuses mostly on a few simple macrotypographic techniques—with a dash of micro—and on how to combine them all to build a more harmonious, adaptable and, most importantly, readable Web page.
37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning - Here’s a roundup of 37 useful wireframing, prototyping and mockup tools for all areas of design including web pages, software programs and mobile apps. These tools can definitely be ..
Creating Bulletproof Email Buttons - So if a large majority of your customers or clients are using email clients other than iOS, you’ll need to make sure that you can provide a clear cut call to action regardless of whether or not the user chooses to download images.
12 Most Popular jQuery Plugins of April 2012 - Here we are again for another monthly round-up of the most popular jQuery plugins of April 2012, these 12 plugins will make you WOW!
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Design with Depth: Adobe Illustrator “Map Art” Tutorial - One of the many under-utilized tools in Adobe Illustrator is the “Map Art” command. Here we’re going to show you how to use this tool to map a flat object onto a 3D sphere.
Common Typography Mistakes - I’ve seen and made so many mistakes in design that would probably surprise you. But the ones which draw my attention most often are the typography mistakes. These can have a large impact in the effectiveness and appearance of your designs
Helping Differentiate 11 Typography Types with Examples - Having the amazing knowledge of something like typography is priceless if you’re on your path to become a designer. I’ll be Helping You Differentiate the 11 Typography Types and with examples.
5 Cool & Quick Photoshop Shadow Tricks - Today we’re going to pay tribute to the shadow layer effects that come built into Photoshop. We’ll go over five super quick and easy tricks that you can pull off using simple shadow techniques.
Brand management and consistency: is everyone singing the same song? - Controlling brand consistency is a struggle that many brand and marketing managers face over the course of their working lives. Keeping track of a global brand across a myriad of communication ..
How to Create Masks of Transparent Elements in Photoshop - Selections are an essential part of any photo editing workflow, but often, selections aren’t as straight-forward as they might seem. In this tutorial we will explain how to make a selection of a glass that includes transparent elements.
Blogging, Social Media, Writing, Content Strategy, etc.
The Neil Patel Method To Getting Great Blog Content - When it comes to blogging, one of the key pain points is getting content. In today’s post, we’re going to look at the different ways you can attract quality writers for your blog.
How to Write a Great Paragraph - It’s not enough to create killer headlines or spectacular introductions. It’s not enough to write compelling content. It’s not enough to use storytelling. The only way to get your blog posts read, shared and revisited means writing great content.
Tips and Tools for Blogging? I’ll Take a Baker’s Dozen - Here are a 13 tips and tools you need to follow in order to have a successful, shareable and searchable blog in today’s competitive content world.
The Key to Writing Blog Posts That Get Noticed - It’s easy to use the standard blog post writing tool box and prescribe better headlines, different post types, and fancy diagrams depicting the perfect post. The problem is that these solutions focus on “manipulating” the reader rather than giving them what they want.
Pros and Cons of Social Networking for Designers - Similarly, the revolutionary world of social networking also gives more benefits than harms. The aim of this article is to provide designers with an impartial and unbiased outlook on the pros and cons of social networking.
WordPress
Using WordPress as an Intranet – We usually WordPress associate with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.
Optimizing WordPress Loading Speed With header.php & .htaccess - Website loading speed matters a lot for every blog/website, especially for people with shared hosting – which is the cheapest available hosting service. Here are a few .htaccess and header.php tricks to increase your website loading speed by 50-70%.
Controlling The WordPress Toolbar - Many people don’t like having the WordPress toolbar here so they will need an easy way of removing the admin bar. Other people (like me) really like having the toolbar and I like having the additional quick links on the bar.
Search Engine Optimalization, Conversions, Analytics, etc.
Google Goes After Links In WordPress Themes - A WebmasterWorld thread has an SEO claiming he received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.
6 Ways to Generate More Traffic Out of Your Images - The question is…are your images optimized for search, speed and social media? In other words, are they helping your site or hurting it? The following 6 tactics will help you to optimize your images so they can bring you more traffic to your site
Penguin: The new algorithm from Google – Penguin wants to tell us that Panda is dead and the new algorithm came to life. Yes, but how and why. There are tons of information about how Penguin affected SEOs, and most of them are coincident: Do you remember anything about content?
Update on Penguin Update - The Penguin update is supposed to improve search engine results by removing sites that have spammed Google with poor quality links, and repetitive anchor links.
Google Over-Optimization Penalty: Tips to Avoid it - In this post I have outlined the key factors that Google are likely to analyse when assessing website over optimisation.
Tutorials
Fluid CSS3 Slideshow with Parallax Effect - In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.
Typography tutorials: 50 clever ways of working with type - This round-up of typography tutorials has a central theme of experimentation. Learn how to design a headline typeface, create isometric 3D lettering and to smelt your favourite font.
Enhance Required Form Fields with CSS3 - Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.
CSS filter effects in action - With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :notselector.
Zoom In CSS3 Dialogue Pop Up Boxes - To accomplish this task, we’re going to be using 3D Transforms. In general I wouldn’t suggest using these, but they worked quite nicely for this demo. To create the ‘clickable’ effect, we will be utilising form method and the pseudo class :checked.
Code a Set of Animated App Store Buttons With CSS - We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.
How To Create Animated List View Using CSS3 Only - Listing items with some optional list view is a good practice to make user more comfortable on viewing our item list and it will be more nice to add some animation when they change the list view. In this post we are going to create an animated list view using pure CSS3 only.
22 HTML5/CSS3/jQuery Tutorials for Frontend Web Developers - The tutorials I have added below are geared towards designers interested in bulking up their knowledge on coding frontend web layouts.
Freelance, Business and Workflow Related Stuff
How to Create Your First Product Online - Creating products is one of the best revenue sources that you could do online today. Instead of wasting time with Google Adsense, sponsored reviews, and other useless monetization methods to make money online; with me completing ..
The Problem with To-Do Lists - There is no shortage of blogs and resources on how to effectively manage our time, however there is a problem with the tools that are available to us. To-do lists and calendars are both restrictive, each in their own way.
A Comprehensive Guide to Starting Your Freelance Career - Working as a contractor–or freelancing as it is often termed–is both a great stepping stone to running your own business and a viable career in itself. This article discusses some of the ins and outs of both freelancing and running a small business.
9 Website Strategies (Besides Testimonials) for Proving Your Way to More Sales - Featuring elements of credibility and proof on your website is critical to conversions.…especially in this day and age where skepticism of advertising claims is sky high.
Why transparency matters—building equity in your personal brand - Relationships matter in personal life and in business. People DO want to know who they are dealing with. By being transparent, the potential gain is greater than the risk.
How to be a better designer - Dear designer: just like you, I’m flooded on a daily basis with super inspiring, life-affirming, pocket philosophical and wise impressions from the design world. Everything has gone global and it doesn’t require much more than adding ‘designer’ to your email signature for you to become one (I’ve been there).
How to Track Your Time and Increase Your Web Design Income – Once you have completed a time log for your web design project, you’ll be able to see how much time it really took you to complete the project and how much you’re making per hour.
Big question: how important is itto you to keep your clients happy? - Keeping clients happy is often tied to communication. Yes: talk to your clients regularly. When things go wrong, don’t hide, but come clean and talk about it. Good client relationships are like other relationships
How To Get Your Full-Time Freelance Business Started - I’ve been asked for suggestions on this topic a number of times, so I decided to share my thoughts for those who find themselves standing on the proverbial precipice, contemplating taking the leap into full-time freelancing.
7 Critical Documents for Freelance Designers - Most designers go into freelancing because of their love for creative work and the opportunities that are available to help clients. The business-related details almost always take a back seat to the creative work, and many ..
How Freelancers Can Maintain and Grow their Client Relationships - The mistake a lot of freelancers make when trying to expand their business is to focus on the acquisition of new clients, but you can’t do it at the expense of your current clients. Did you know that it can cost 5 to 10 times as much to find a new client as it does to keep an existing one?
F*cking Brilliant, a great Read or just magnificent Tips!
Cheap Architecture - We build ugly storefronts to save money, drown their facades with ads to make money, and once we have collected enough money we spend it on overseas holidays to go to places where we can marvel at all the beautiful architecture we find there.
Ignore the design, please - People can feel appreciated in a number of ways, from a simple pat on the back to a big fat paycheck. Designers are often grouped at the lower end of this spectrum, mostly by choice.
9 Tricks To Design The Perfect HTML Newsletter - An e-mail newsletter is the perfect way to stay in touch with your clients or followers. Often your company or website will have numerous product updates, or possibly upcoming events you’d like to share.
Design is How It… - There is so much to design that we leave to our instincts or chance. As creatives we probably don’t like to leave design to science, but we understand how people work and therefore we should have a better understanding of how design works for us.
You Design It, They Do It - People like to test a number of metrics to see why people are not staying on a website. I think sometimes we spend so much time focusing on analytics that we throw common sense out the window. Don’t get me wrong—analytics are a powerful tool for improving a website. But often the problem is right in front of your face.
Above the Scroll: Does It Matter Anymore? - Where the scroll lands on the screen is even changing with wider monitors and great variances in the size viewers open their web browsers. How can a designer account for all of it?
Make It Obvious - It is sad that pageviews are used as a measuring stick for how well a site is doing on the web because most of the time it is pretty inaccurate. While we think that people go through a lot of pages on site because they are loving the content and want to see it all, ..
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