.. yay, it’s Weekend! Time for a new roundup with last week’s best tutorials and articles found on the interwebz. 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.
Lessons from CSS modules – I’ve really taken to the idea of using modules in my CSS. I’d like to share how I implement modules, and the benefits it can bring to your stylesheets.
data-js selectors, enhancing HTML5 development by separating CSS from JavaScript – It’s based around how CSS documents came into play, the concept behind CSS, and how we separate style from HTML elements. CSS documents were created to give reference to HTML, to target them and apply styles to them.
34 Free Open Source CSS Code Snippets for Developers – In this showcase gallery I have organized 34 outstanding and free CSS code snippets. All of these examples provide some type of website interface element.
Writing the best CSS when building with HTML5 – HTML agnostic means to use as little HTML in your CSS (or none). The key factor here is to avoid becoming markup reliant and avoid declaring qualified names (the element name). Let’s take a basic structure for an unordered list navigation:
HTML5, Older Browsers and the Shiv – HTML5 introduced a few semantic elements that are not supported in older browsers. All you need to ensure compatibility is to add a CSS rule to your website that causes the relevant elements to behave like block elements.
Magic Numbers in CSS – Magic numbers in CSS refer to values which “work” under some circumstances but are frail and prone to break when those circumstances change. They are usually always related to fonts in some way or another.
How to use the download attribute – What’s great about this attribute is that you can even set a name for the downloadable file, even when it’s not the name on your server. This is really useful for any app that deals with the downloading of images, such as image upload sites.
A Look at What’s Coming Up: CSS3 Flexible Boxes – For your information, this post is about the new CSS3 Flexible Box Layout Module, which as of January 10, 2013 is supported in Chrome 21.0+ and Opera 12.10+ only.
Use HTML Comments to Indicate Pseudo-elements – I suppose you could also include HTML comments in modules to list the different states that the module could be in, as represented by classes in the CSS.
Creating Content List Columns Using Entypo Font Icons – In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach.
Web Design: A Guide to CSS3 pseudo-classes – The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class.
How to Create a Responsive Centered Image in CSS3 – Image lightboxes would need to implement several equations to determine the viewport and image dimensions then size and center accordingly. Fortunately, we can now rely on CSS3 media queries and transforms to do the hard work for us.
One less JPG – Before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.
Thank God We Have A Specification! – This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed.
CSS Background Animations – Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
What UI really is (and how UX confuses matters) – People mix the terms UI and UX together. UX is tricky because it doesn’t refer to any one thing. Interface design, visual styling, code performance, uptime, and feature set all contribute to the user’s “experience.”
Planning Your UX Strategy – User experience (UX) strategy shouldn’t therefore be confused with design objectives. This article is about how to plan and coordinate actions to organisationally achieve good UX.
Getting creative with usability – While the aesthetics of a site create a first impression, the functionality is what gives the user a lasting experience that they’ll hopefully want to return to. It’s the interplay between these two priorities that ends up creating all the best, most memorable sites on the web.
Responsive Web Design and Accessibility – Q: How do responsive design and accessibility fit together? Both are about creating Web sites that work with different devices.
Mobile first: Luke Wroblewski interview – The Mobile First approach is to start designing for mobile devices — which typically have less screen size and less capabilities than desktops — and progressively enhance the product.
Mobile: Never Use Native Drop-Downs for Navigation – Many responsive mobile sites are using native drop-downs (as in: a select tag) for main navigation and many plugins have been developed for this specific purpose, yet our usability research shows that this is a poor strategy.
Unraveling HTML5 vs. Native – Many IT directors and software architects that had been pushing HTML5 as the future of mobile within their organization began to see their strategy questioned by upper management.
LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 – In the first post, we described how we build a snappy mobile experience using HTML5 local storage. In this article, I am going to talk about the challenges we faced building an infinitely swipe-able list.
Why should you become retina ready? – On websites that are not retina ready, pages will look awfully pixelated and blurry in their normal state as well as when page sizes are increased. Retina ready websites, along with the devices, allow you to see more pixels per square inch.
9 UI Patterns Web Designers Should Know – User interface patterns offer solutions to common design problems. Implementing them isn’t an exact science; however, there are best practices to follow.
How To Maintain Hierarchy Through Content Choreography – One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed.
To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far – Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.
Responsibly Responsive: A better future on the web - I’m often asked how I’ve changed my process to adapt to a world that is all about responsive web design (RWD). Short answer is, I haven’t.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
5 Common Causes of Slow Website Performance – A distinct count of each issue type was then summed up across all 1000 sites and ranked in the order of decreasing frequency as discussed below.
Trending Now: Designing With Video Backgrounds – Using video, though, does come with its challenges and may not work for every project. But use of video backgrounds is beginning to really take off. Here’s a primer on what you need to know to get started.
Best Practices to Create a High Quality Website – Tools, Checklists – Thus, it is important that the websites are a perfect blend of rich design, precise and helpful information and absolutely flawless. It should be quick loading, attractive and serve the purpose of the users.
10 things print designers need to know about screen design – Making the move from designing for print to designing for screen, and particularly for the web, can be a frustrating process. It feels like everything should be straightforward and simple.
7 Landing Page Tests You Can Run Tomorrow! – As crowds go wild for this type of session, I’ve decided to use this space to focus on effective landing page elements and provide several examples thereof.
The Flattening of Design – It turns out Microsoft’s decision to focus on “flat design,” a type of visual scheme where everything has a smooth and even look, was a few years ahead of the rest of the technology and user interface industry.
Five good and five bad examples of click-to-call mobile CTAs – Mobile searchers by definition have a phone in their hand and the stats show that it’s likely that they are searching for contact details, so businesses should consider including a large CTA that simply says ‘Call now’.
30+ Hot CSS3 Image Hover Scripts – Hover effects is one of the common techniques used in web design to make web pages more interactive and stand out visually CSS image hover scripts makes it simple to add cool dynamic effects on otherwise “static” images whenever the mouse hovers over them.
Five killer ways to use fixed navigation – There are many considerations worth practising for a fixed navigation design. What’s good for large display sizes, such as a desktop or laptop monitor, may not work on a smaller screen like that of an iPhone.
5 Principles of Persuasive Web Design – What’s the best way to persuade somebody when talking to them? You have to be confident, talk fast and swear a little, among other things. But what about persuading somebody without words – possible?
A Complete Guide to Good Website Designing – Therefore I’ve pieced together this guide to help designers, clients and businesses to plan and bring to fruition successful websites.
10 Cloud-Based UX Design Tools to try in 2013 – Tools for UX designers that can help in the process of creating mood boards, concepts and interactive wireframes and prototypes. These tools have been selected for the usability of their designs and ease of learning.
Thinking beyond ‘Click Here’: 10 Tips for Optimizing CTAs – Improving the conversion rate is an art which is mastered by a few. People will suggest you with ample options to enhance your sites conversion rate, but one option which has been tried, tested and approved by many is the optimization of Call to Actions (CTAs).
Making it Work: Flat Design and Color Trends – When it comes to color, flat design schemes often trend as super-saturated and bright, more retro or monotone. That’s not to say these are the only options, but as the trend has evolved they are the most popular.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
How to Control Gradient Fills in Adobe Illustrator – Adobe Illustrator has only two types of gradient fills. These are linear and radial gradients. Radial gradient can be transformed into an elliptical one.
Repurposing Photoshop For The Web – The pain points of using Photoshop to design for the Web are well documented and support the staunch anti-Photoshopian’s cause to remove it from their process.
iOS icon design: A designers exploration – When taking an app-first approach to designing a product, how should a designer approach the icon. I wanted to explore a few of the more pervasive approaches I’ve noticed.
Building a brand using the web – When building a brand, most organisations start with print. However, the web is the perfect place for building a brand and testing different approaches.
The ultimate guide to logo design: 40 pro tips – In this article, we’ll first look at the basic principles of creating a logo design and share some pro tips for finessing your process…
120 Photoshop tips, tricks and fixes to try today – Improve your skills and speed up your workflow with these 120 expert Photoshop tips, tricks and fixes covering brush tools, layers, shortcuts and more.
How to create a social media-friendly brand, website and logo design – the most important and often overlooked aspects of social media marketing is social media design. Graphic design is one of the most powerful ways to effectively communicate to your audience.
What Branding Really Means, and Why it’s Usually Code for BS – If you think you should spend money on branding, you are right. But if you think your brand is your visual identity then you are completely and miserably wrong, and very likely to waste a lot of money.
Font kerning: 10 expert tips – Kerning is the process of adjusting the spacing between letters to achieve a visually pleasing result. Some designers find it easy, others find it a tricky process where success is achieved more by luck than real judgement.
The Importance Of Good Business Card Design With Examples - In order for the business card to do its desired job, it must be professional, attractive and memorable. This can be certainty if you make sure you follow a set of rules.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
What Should You Do With Your Blog Homepage? – Now, don’t take this personally or anything. It is just an odds thing. In my line of work, I happen to look at a lot of blogs and a great number of them have very ineffective homepages.
Content strategy 101, Part 2: making data meaningful – Content’s purpose is to convey information. But its form is data, which is why information architecture is so important.
How to decide which content management system is best – When trying to decide which content management system is best, developers often think about how easy the content management system is to integrate before ever considering how easy it is to use.
Using LinkedIn As A Networking Tool – Though many people have created a profile on LinkedIn, they often overlook it as a business resource that should be used for networking to grow your current business.
WordPress
Ongoing WordPress Security Attacks, The Details and Solutions – The short and simple explanation of what is happening is that one or more illegal botnets are being used to brute-force attack WordPress sites.
Creating A Custom Taxonomy In WordPress – WordPress comes with inbuilt functionality which enables you to group posts or post types together. This functionality is called a taxonomy, by default WordPress comes with two default types, there is categories and tags.
WordPress Plugin Development for Designers – Custom Post Types – We got good responses containing the possible solutions. So we are going to start the third part by fixing the responsive issue in the slider.
How to add the Google+ Comments to WordPress – Personally, I am going to stick with the default commenting system but I know a ton of folks who would love to deploy the G+ comments to their WordPress websites.
Search Engine Optimalization, Conversions, Analytics, etc.
5 Design Strategies to Improve Website Conversions – Designing a website that achieves a high conversion rate is difficult, but this task can be made a whole lot simpler, if you put in place a design strategy with primary focus on improving conversions.
Sitemaps – The Beginner’s Guide – Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by User Experience Designers and Information Architects to define the taxonomy through grouping of related content.
13 Keyword Tools for Effective Research – In this article we’ll take a look at 13 of the leading tools specifically related to keyword research. Many of the pro tools listed here also include a variety of tools for other aspects of SEO (such as link building).
The designer’s guide to Google Analytics – All too often, designers are guilty of designing beautiful websites without consistently monitoring their performance. Of course it would be easier to just design a site and let it be, but monitoring your sites and improving problem areas are key.
Tutorials
Learn How to Create Scroll based CSS Animation – First and foremost we need to use a jQuery plugin called Skrollr. Once we have this plugin we use the HTML5 data attribute to embed data based on how many pixels the user has scrolled down the page.
Fullscreen Layout with Page Transitions – A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.
CSS only responsive navigation – I would say that this is a perfectly feasible solution to put on your website but…it’s not plug and play, you have to learn how to use the code and adapt it to your site.
Build a Responsive Pricing Table with Neat Hover States – During this tutorial we’ll be creating a sleek pricing table with some striking hover effects. We’ll make the whole thing responsive, shifting the layout at a couple of breakpoints.
How To Code Unique Avatar Photo Styles with CSS3 – In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported.
Simple YouTube Menu Effect – A tutorial on how to recreate the effect of YouTube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.
Coding an Image Thumbnail Hover Magnify Effect with jQuery – I have run into a number of simple effects to generate image magnification. You can sometimes find this on e-commerce websites for product images when you hover onto the thumbnail and a bigger zoom effect will display.
Freelance, Business and Workflow Related Stuff
Are You Selling Clients What They Want? – Knowing the customer’s needs better than your competition will give you the best chance to convert more leads into sales and ongoing client relationships.
How To Manage Client Feedback – It’s never easy to hear a client critique your work. But there are ways to handle feedback that won’t create tension or cause your work to suffer.
How to Build and Develop a Passive Income Website – What kind of a business can you build and work on from home to make passive income? One of the simplest ones is building websites designed to generate traffic from search engines that are monetized with Google Adsense.
How to stay positive as a freelance designer – While it’s important to be realistic and plan ahead this perpetual negativity adds unnecessary stress to our lives, weakens our resolve, and lowers our self-confidence.
12 Tips for Becoming a Contagious Freelancer – There are some freelancers who always seem to stay busy, even when others struggle to find enough work. You can recognize them by looking through their testimonials.
How to create a great ‘about’ page – Many believe the “About Us” page is an afterthought because everyone wants to see the work or the products or read up on the services. But providing the right history and information can increase a website’s effectiveness.
Freelance vs. Agency – Which is Better at Selling Web Design? – The reality is freelancers and agencies don’t need to worry about each other. They need to focus their energy on the person who is directly in front of them: the customer.
Coding, Fast and Slow: Developers and the Psychology of Overconfidence – I’m going to talk today about what goes on in inside developers’ heads when they make estimates, why that’s so hard to fix.
How to launch a startup – We all know that there are a few differences between small businesses and larger corporations, especially when they begin considering the web design aspect of their marketing plan and branding.
So You Want to Be a Freelance Web Designer, Huh? – Well, be forewarned – freelancing is not all sunshine and roses. It has its own unique set of advantages and challenges.
F*cking Brilliant, a great Read or just magnificent Tips!
The Designer-Developer spectrum – You can be all designer, or all developer. You can be mostly designer with some developer, or mostly developer with some designer. Hell, you can even be the golden unicorn of Web workers everywhere if you’re half-n-half (or just both?).
How I Learned to Become a Failure – And when you mix this style of work with high-profile clients, trying to hit homeruns on a first swing is a recipe for disaster. It was also a sure way to develop a creative block.
Figuring Out The New Baseline – The problem we need to solve is a hazy one: what’s the best way to enable users to read, create, and manipulate content on the world wide web? And when we do see that solution, we roll into our bag of tricks and start thinking about what’s next.
Bad code is the first step towards good code – Make something you’re proud of, then improve it little by little. Learn one thing at a time and make incremental progress. Most of all, remember that bad code is always the first step to good code.
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