.. yay, it’s Saturday! It’s 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.
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
Using The HTML <div> Tag In CSS – The div tag is a generic way of adding structure to a html document. The most important thing to remember is that it is a block level element, which means you can’t use it with in a paragraph of text.
Super useful tools for CSS coding – When you develop a website or web app, having the right tools can definitely help you to save a lot of time. In this article, I have compiled a list of fresh and super useful tools for CSS coding.
What is a Box Model? - Every element on a page is in fact a box, whether or not it has a set width or height. I think that this is nothing shocking to you but it is something to keep in mind in order to understand what the box model is.
CSS Regions: New working draft - On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of.
Troubleshooting CSS – I’m not here to talk about my convictions but about CSS. Today, we will do a round-up of common CSS problems in order to see how to troubleshoot CSS.
Writing modular frontend components in 2013 - As frontend developers, we’ve been using object constructor and module patterns to keep JavaScript code manageable and encapsulated. But it’s about time we had some way of encapsulating portions of the DOM.
How to Create Transparency with CSS - If you’re in the process of creating a website, or even modernizing your website, you should definitely explore this nifty CSS coding ability that came out with CSS3.
Working with Shadow DOM – Hopefully this article has showed you how useful Shadow DOM can be when it comes to creating reusable widgets for your interfaces. In this blog post you are going to look at Shadow DOM, one of the four key building blocks that make up Web Components.
Speed Up Frontend Coding With Emmet - Much of this performance comes from the massive amount of plugins that are available to the IDE, in this article we are going to be looking into one of the most productive front-end development plugins called Emmet previously known as Zen Coding.
HTML5 and JavaScript: Custom Data Attributes - In this tutorial we will run through a basic example of using custom data attributes in HTML5, with JavaScript code retrieving the attributes to create an interactive website component.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
12 pro tips for great user interface design - Great UI design is the key to success – but achieving in practice isn’t easy. Follow our expert tips to help you on your way. As its name implies, great user interface (UI) design should revolve around the needs of the target user.
25+ Responsive Menu Tutorials and Scripts – I have collected more than 25 tutorials and ready to use scripts for kick-starting your responsive website project. Use the tutorials to get an idea of the options and then check out of there is a script that match out requirements.
Advantages Verses Complications of Responsive Website Design - Despite of certain complications in development area, RWD is considered the best and renowned designing application these days. It has solved many issues of loading and rendering websites in different platforms.
A Gov Supreme - it’s my experience that the biggest challenges of responsive design (which, let’s face it, now means web design) are not technology problems. No, the biggest challenges, in my experience, are to do with people.
Why mobile web apps are slow – I’m going to try to bring some actual evidence to bear on the problem, instead of just doing the shouting match thing. You’ll see benchmarks, you’ll hear from experts, you’ll even read honest-to-God journal papers on point.
Responsive Design Patterns - Designers should take advantage of design patterns like this, because more often than not, the problem they’re dealing with has already been solved by someone else. No need to reinvent the wheel if it’s already been built, tested, and perfected.
7 Lessons for a Tablet-Optimized Web Experience - Here are seven web design best practices that explore what a truly tablet-optimized experience looks like. These tips are excerpted from Mobify’s free ebook, Tablet Web Design Best Practices.
What do you mean by responsive design? - At its most basic level a responsive website responds to the viewport of the device improving readability, but there are many other details that can be interpreted differently.
Responsive JavaScript in Rails: load what you need when you need it - Instead of loading javaScript up front like we all normally do, why not load the minimal amount of JavaScript up front and load additional JavaScript code when a user acts upon the page.
Solving the Problem of @font-face Inside Media Queries - A good approach to solving this is to use the @font-face rule only for a certain range of media and screens using media queries. This article discusses a solution for this problem that balances performances and hacks.
7 Actions that Earn User Trust - The goal of the Digital Trust Initiative is to create awareness of privacy issues while not getting in the way of the experience. This is an even bigger challenge for mobile interactions due to small screen real estate.
The Importance of Mobile Optimised Content – Say goodbye to nostalgic introductions and long winded descriptions, mobile users want the key facts at their fingertips the instant they load your site. Here are four aspects you might want to adjust to capture your mobile audience
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Trends in Web Design: Flat Design is Just Efficient Design -Like other design trends that have come before it, there are pitfalls to the flat design style, but in general, I consider flat design a welcome trend because flat design is efficient design.
5 Common Call to Action Mishaps—What Not to Do - Well-crafted and strategically placed calls to action (CTAs) are one way to effectively guide visitors to take a specific action. However, not all CTAs are created equal.
10 Rules for Choosing the Perfect Typeface - There is no right or wrong answer to the question, “Which typeface should I use?” However, there are a few guidelines that will help you make an informed decision.
What’s new for designers, July 2013 - The July edition of what’s new for web designers and developers includes new web apps, JavaScript resources, responsive design tools and frameworks, icons, e-commerce solutions, image apps, coding resources, and some really great new fonts.
15 jQuery Plugins for Creating Dynamic Layouts - At first glance a site with fancy animation effects may seem tricky to build. But that is not the case, as you will discover from collection of jQuery plugins we have for you.
A guide to style guides - There’s been a lot of talk about style guides. The name gives us a pretty good idea of what they’re all about: guides to style. But style guides can be so much more than that.
Flat Design As A New Foundation For The Web - Now the industry as a whole is going to have to do the same, as the new flatter aesthetic strips away all the ornamentation that’s been in use the last few years. It’s removing many of the cover up tricks, which is a good thing. Remove the ornamentation and you’re left with the basics.
20 top web design and development trends for 2013 - Our industry figures predict a year of design shifts, evolving device usage, and web consumption adjustments, all of which will impact on designers and developers.
16 Inspiring App Landing Pages And 8 Reasons Why They Are Effective – So what is it that makes a good landing page? What are the elements that can support both your own goals and those of your visitors?
10 tips for quick and flexible design prototyping - some stellar advice for getting the most out of your prototyping process. To find out, we built a functional prototype. During this phase, I stayed mindful of how I approach design problems.
3 Website Trends That Customers (and Business Owners) Will Love - When it comes to the web – and specifically, websites – there are plenty of trends. The trick is to identify which trends will add meaningful value to both your customers and you as well.
Upgrading gracefully: 5 ways to enhance your site’s desktop appeal - With the bump in traffic from feeble mobile browsers, mobile-friendly websites are an increasing necessity. Here are five techniques to upgrade your website for desktop users while preserving, and sometimes improving, its usability.
“This Is How We Built It” Case Studies – We’ve featured studies that have recounted decisions made about particular design elements, as well as studies of full overhauls and their accompanying technical challenges. Most of them provide interesting insights into failures and successes, stories, workflows and design decisions.
Interactivity Is King – With every company combining social media profiles with their standard websites, designers are discovering more and more that creating a successful site means embracing interactivity.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Brand is about more than your brand style guide – We often reduce brand down to a logo, colour palette and some nice typography. In reality it is more about personality than visuals.
How to Make Data Visualization Better with Gestalt Laws – Gestalt laws originate from the field of psychology. Today, however, this set of laws finds relevance in a multitude of disciplines and industries like design, linguistics, musicology, architecture, visual communication, and more.
Using Flat Design in Web and Print Projects - That idea has been discussed in great detail for web projects – especially mobile apps – but not so much for when it comes to print design. How can you convert the flat style to print applications?
5 Secrets for Making Your Logo Stand Out – Your logo is the face of your company. It will often be the first thing people see and the main thing they remember. The whole point is: You invest time in crafting the perfect logo so it will stick in people’s minds.
Six type design tricks - In the first half of this two-part article, HypeForType founder Haigh shares his six expert tips and tricks for designing a font….
Master FontLab: six tips for developing the perfect typeface - So you’ve designed a new typeface: it’s slick, sexy and it’s going to set the type world on fire – once you’ve developed it into a fully functional, useable font, that is.
How To Create A Brand Image With A Business Card – Building your brand as a designer isn’t an easy task and you should be very careful about it. One way of branding yourself is through a business card which isn’t just a calling card, but a snapshot of your brand.
The Psychology of Color in Marketing and Branding - To alleviate this trend and give proper treatment to a truly fascinating element of human behavior, today we’re going to cover a selection of the most reliable research on color theory and persuasion.
Pros and Cons for Each Type of Image Extensions – Before digging deeper into what each extensions supposes, we consider that is way better to have clear ideas about how the images are classified…
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Top 12 free open source ecommerce platforms - The main factors which you have to consider while choosing ecommerce platform is the price, useful functions, user friendly and with strong merchandising tools.
Why Designers and Content Strategists Need to Work Together - In this post, we explain why content strategists and designers need to work together. We also share some tips to help you add content strategy to your design process.
Best Guide to HTML Emails: Tutorials, Tips & Tools - HTML Emails can be very difficult to make. In this post we’ve gathered helpful Tutorials, Tips and Tools to help you get started with HTML email building!
5 Layout Tips to Keep Your Blog Well Groomed - Take care to groom your sight for public display. No matter how good content is, bad design is as big of a turn off as spinach in the teeth or a stained tie.
9 Guidelines To Make Your Blog More Readable – If your blog is an unreadable mess, the viewer has plenty of other options to obtaining the same information, therefore, it’s up to you to keep the reader on your blog, long enough to read the entire post.
Import And Export A Database Using SSH - To get SSH access to your hosts server you will need to contact your current web hosting company. If you are on a shared hosting package you may not be allowed to have SSH access to your hosts server.
Is the Responsive Emails Feature for Usability? – Gone are the days where emails are under the shadow of conventional technology. Responsive design has caught a lot of buzz lately to generate this key marketing channel.
7 Overlooked but Critically Important Details of Profitable Email Marketing – Whether you run an ecommerce store, sell a SaaS product, or offer consulting services online, your email list often is your most important marketing asset.
WordPress
Customizing the WordPress footer by adding widgets - In this quick tutorial we’ll be adding the ability to show standard WordPress widgets (like menus, categories or search) in your template.
The Best Shopping Cart Plugins to Sell With WordPress - Adding cart functionality to your WordPress install makes it easy to build simple online stores with the familiarity of the WordPress template system. Let’s take a look at the best shopping cart plugins available.
50 brilliant WordPress tutorials for designers - Fancy starting your own blog but don’t know where to begin? Want to add something new to your existing WordPress site? Then check out these 50 awesome WordPress tutorials.
Shortcodes Should Never Be Included With Themes. Period – The guidelines require the use several of WordPress’ core features, standard theme hooks, and disallow PHP functions (like base64 and fopen) that really shouldn’t have ever had any place in a WordPress theme to begin with.
Interacting With The WordPress Database - In this article, I want to take you to one of the “deeper” areas of the system, the $wpdb class. The $wpdb class is a simple utility for interacting with the database directly. If you’ve been around WordPress code you’ve probably seen the get_posts() function or the WP_Query class.
Adding a “You might also like” overlay to another WordPress post using scroll events - In this tutorial we’ll be using jQuery to detect when the user has scrolled to or near the bottom of the article.
Finding The Best WordPress Plugins for Your Website - One of the greatest aspects of using WordPress to power your website is its ability to run plugins. They easily extend the capabilities of your website and allow it to perform functions that it otherwise couldn’t without some hardcore coding.
A Look at the WordPress HTTP API: A Brief Survey of wp_remote_get - When it comes to making remote requests within the context of web sites, web applications, and even WordPress-based projects, the model that we follow is generally the same.
10 Speedy Ideas to Accelerate Your Slow Loading WordPress Site – Fix all those bugs and the glitches to help your readers with a smooth ride throughout your blog. These 10 tips will help to speed up your WordPress blog and keep your readers active.
Search Engine Optimalization, Conversions, Analytics, etc.
4 Reasons Why Search Engine Ranking Still Matter For Your Business – Tactics that can help your businesses to grow and to get you more leads but there are few things in the SEO industry that are never going to change and are always essential: one of them is rankings.
5 post-Penguin 2.0 SEO restoration tips - For a significant number of websites, these updates have meant drastic drops in traffic due to previous engagement in aggressive SEO specific campaigns and, because of that, work now has to be done to again fall in line with Google best practice.
We Shouldn’t Care About PageRank - PageRank is useful for one thing, and that’s possibly, *possibly* being able to identify a penalty, faked PageRank (when combining a few other metrics together), or simply that you’ve been hitting the PageRank servers too hard.
3 Steps to Increasing Your Google Author Rank & Why it Matters – If you are familiar with Google Authorship then you’re aware of the dangerous implications these changes will have on content without a verifiable author. This is scary stuff.
Tutorials
Justified and Vertically Centered Header Elements – A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. I just want to show you some simple CSS tricks that will do it right, in my opinion.
Coding an Ajax-Style Paged Document Viewer With jQuery - In this tutorial I want to demonstrate how we can build a small script which handles any set number of documents. The JS code is a little bit tricky since we need to adapt for a large number of pages.
On Scroll Header Effects – The demo for the effects serves as inspiration only and we’ve used a technique that involves changing the state classes of the header which would of course be customized depending on which effect would like to be used.
How to create a simple parallax effect - It’s an appealing effect, and can be applied to as many layers as you like. In this article I’m going to introduce the basic principles by showing you how to build a simple two layer parallax effect.
Blueprint: On Scroll Effect Layout – This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it
Freelance, Business and Workflow Related Stuff
5 things designers wish their clients from hell knew - After asking some of my fellow designers what they wish their clients from hell knew, I compile a list that would be useful if you are considering hiring a designer.
How to Charge For Web Design Work – 7 Tips and Strategies – We’ve done some research for you and found out what are the best pricing strategies and tips for you to apply on your projects. Hope they will help you earn more and have more clients!
10 Mistakes to avoid for new freelance designers - In this article we have made a list of 10 mistakes and pitfalls you need to avoid when starting out as a freelancer.
Do Things that Don’t Scale – Actually startups take off because the founders make them take off. There may be a handful that just grew by themselves, but usually it takes some sort of push to get them going. A good metaphor would be the cranks that car engines had before they got electric starters.
Getting Them Below the Fold – While the purpose of your design may not be to directly make a sale, it still plays a vital role in the overall sales process. Without your design, no one would bother looking at your client’s product or service offering at all.
Your Clients Don’t Have to Like Your Work – The key difference between clients that need to love your work themselves versus those that go about the process in a much less personal manner all depends on who is paying the bills.
So You Want To Write A Digital Strategy? – It is just a document outlining how your company or client should handle the different aspects of digital from the website and mobile to email, social media and digital marketing.
16+ Essential Skills Freelancers Really Need to Succeed – Naturally, if you’re a freelance web designer, you need good design skills. But that’s not all there is. Successful freelancing requires more than a single skill set. Freelancers and would-be freelancers must be competent in many areas.
10 marketing ideas for freelance designers to help gain new clients – Some of the below marketing tips are free for you and others might cost a few bucks, but they’re geared towards getting you additional clients for your freelance design business.
F*cking Brilliant, a great Read or just magnificent Tips!
How to Avoid Becoming an Obsolete Designer - In making intelligent decisions, a designer should continue to improve. By combining skill, applied experience, and a propensity for diving into new learnings—instead of avoiding them—you increase your ability to achieve insight and produce design that functions as intended
Authentic Design – In creating new opportunities, technological progress sometimes leads to areas of excess. In the 19th century, mechanized mass production allowed for ornaments to be stamped out quickly and cheaply, leading to goods overdecorated with ornament.
Experimentation beats expertise - I found the design process utterly transformed once I decided to stop trying to be the expert and start trying to encourage a culture of experimentation.
Drop Your Ego, Mr. Perfect Designer! - That’s because many designers let their egos interfere with their success. If your ego goes unchecked, it throws frequent temper tantrums, like toddlers craving juice.
Just design - As designers, we do well to talk about how design without a plan is just decoration. We champion function over form in our talks, lest we look superfluous to a bunch of people who think we just color with crayons all day.
Progressive enhancement is still important - About 5 years ago it felt like the progressive enhancement battle had been won, but after watching the reactions to Nicholas Zakas’ “Enough with the JavaScript already” it seems all the old arguments are back with reinforcements.
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