.. yay, it’s Saturday! Here’s a new roundup with last week’s best tutorials and articles found on the blogosphere. 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.
What’s the CSS :scope pseudo-class for? – A pseudo-class which represents any element that is in the contextual reference element set. This is is a explicitly-specified set of elements, such as that specified by the
Easily center text vertically, with SVG! – These days, we have a number of different ways to vertically align text in a container of variable dimensions. However, often comes a time when neither is suitable, so here I am, adding yet another option to the list.
Pull Quotes with HTML5 and CSS – A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.
Goodbye, Zen Coding. Hello, Emmet! – Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.
Printing The Web – Once you are aware of that you might want to include a dedicated print stylesheet into web sites you build. Here is some advice on what you can do to get the best out of your page.
Getting More Through Polyfills with HTML5 – Polyfilling is a term to describe an approach for backfilling missing functionality in a way that duplicates the missing API. Write application-specific code without worrying about whether or not each user’s browser implements it natively.
Introduction to Custom Filters (aka CSS Shaders) – Custom Filters, or CSS Shaders as they used to be called, allow you to use the power of WebGL’s shaders with your DOM content. Since in the current implementation the shaders used are virtually the same as those in WebGL, ..
How to use CSS3 columns – CSS3 actually does provide a way for you to style your text into various columns, it even gives the ability to set a gutter — the space between those columns — this way you have full control instead of the framework or grid system setting those gaps for you.
CSS3 transitions and z-index – You can apply CSS3 transitions to the z-index property, but it may work in a way you don’t expect. An element can’t kinda overlap another element. Either it’s above or below.
perspective-origin – The
perspective-origin property determines the origin for the
perspective property. Think of it as the vanishing point of the current 3D-space.
Preview border-corner-shape, before implementations! – While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-corner-shape, it will be able to do so much more! Beveled corners, scoop-style corners, even rectangular notches.
attributes property of DOM elements. This
attributes property provides me the names and values of every attribute on a given element!
CSS: Everything is global and how to deal with it – In CSS, everything is global. When the browser begins to style an element in the DOM, it will traverse every single rule in every single stylesheet to find matches. All CSS rules can potentially apply to all DOM elements, meaning it’s up to you to avoid unintended matches.
Using decimal percentage values in responsive design – All browsers have since fixed the rounding issue, so this may no longer apply. Even discounting that fact, let us see how many decimal values you need for the errors to be significant enough to cause layout errors.
HTML5 and the introduction of <nav> versus <menu> elements – The <nav> element is actually for grouping <a> elements for navigating a website, and the <menu> element is for grouping both <a>, <input>, <button> and the new <command> elements.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
How to develop a responsive workflow – The following is by no means a list of how RWD projects should be approached, but rather how I have adapted my workflow to suit the new landscape.
Server-Side Scripting + DOM Manipulation for Mobile-Friendly Websites – Tailoring your website to offer an optimized mobile experience that automatically adjusts itself to multiple device types will very soon be a requirement rather than a feature.
Designing for hi-res displays – Smartphones and tablets are embracing hi-res displays – and other hardware will soon be following suit. Talking to leading industry figures about whether now is the time to optimise,
5 Important Lessons I’ve Learned About Mobile App Interface Design – These lessons not only speed up my day-to-day workflow but also help me design a better user experience for the target audience.
How Responsive Design Boosts Mobile Conversions – Google is a strong advocate for responsive design. Mashable named 2013 “The Year of Responsive Design,” but is responsive web design actually the answer to boosting mobile conversions?
5 Common Usability Mistakes and Solutions For Avoiding Them – I get so annoyed at things that make using a website difficult, things that should be basic. Here’s a list of five common usability mistakes and solutions for avoiding them. Do yourself and your users a favor and make sure you aren’t breaking any of these rules.
5 Key Principles Of Good Website Usability – Here are 5 key principles of good website usability. Make sure to consider these in your next project. Usability means user-centered design.
CSS Architectures: New Best Practices – The world of front-end development has evolved a lot over the past several years, as fresh minds have devised new approaches to solving age-old problems. Here are some of the latest best practices for front-end coding.
A guide for creating a better retina web – Almost all up-to-date mobile phones and tablets on the market have one and desktop products are now following this trend. I’m sure we will see a lot of new devices with retina displays in the next two years.
High-resolution retina displays – My preference is to only maintain one version of each graphical asset instead of two (I’m lazy), so I’ll typically have an @2x sprite that I resize for all users. I’ll also try to save highly compressed images in large dimensions for web so they look good when resized in the browser.
Resizing Responsive Designs with CSS – There’s another way to achieve flexibility that doesn’t involve keeping track of ems or percentages — the new CSS REM unit. REMs are just like ems — REM stands for Root Em — but instead of being relative to the parent element like Ems, REMs are relative to the document root’s font size.
Mastering Real-World Constraints (A Case Study) – But what happens if you have an existing site or app that was built for desktop without a responsive or mobile strategy in mind? And more specifically, what if you, like us, don’t have the resources, time, or budget to start over from scratch in the near term?
The Responsive Web Design War Strategy – Today we are just here to explore 5 core disadvantages of Responsive Web Design, and the respective arguments and solutions to lessen the destructive consequences that designers and clients are forced to bear.
An introduction to HTML5, CSS3 and responsive design – In this tutorial we’ll be dealing with some basic HTML5 additions and their uses. We’ll also be creating a simple animated gallery using just CSS3 and HTML5
Webdesign in Common, Web Typography, jQuery, Tools, etc.
20 Best Free Online Data Backup Tools – The cheapest way to protect your data nowadays; as this also provides the benefits of large file-sharing, handy for collaborative tasks, and allows access from different computers in different locations.
Put the logo below the fold: Breaking design rules for profit – I’ve had to relearn certain aspects of design now that I’m running my own business. I’m making decisions I’d have considered a major error only a short time ago.
Getting started with Edge Animate – Edge Animate harnesses the power of HTML5 animation, and allows the user to create dynamic, exciting web-based animations in a quick, easy and fun way, using a user-friendly timeline-based interface as opposed to blocks of daunting code.
Are You Making These Common Website Navigation Mistakes? – The design of a website’s navigation has a bigger impact on success or failure than almost any other factor. It affects traffic and search engine rankings. It affects conversions and user-friendliness.
Thoughts on Horizontal Scrolling Web Design in a Mobile World – In this post I want to share some thoughts on why I think horizontal designs are worth taking a look at and what makes them a product of our time.
Navigation For Mega-Sites – Typically, sub-navigation displays the parent, siblings and children of the current page. A persistent primary navigation bar shows top-level pages, allowing users to move between sections.
Negative Space is an Important Design Tool: Here’s Why – Clean design schemes are in, more sites are using breakpoints in responsive design frameworks and there is a newfound focus on readability and user experience.
Best practices for creating app sites – The intro to the app typically tells you what it is and why you need it, much like any product. However, there are some differences and tips available for making sure your app (or the site you’re designing for an app) is a complete success.
PNG Optimization Online and Local: Can CompressPNG and ImageAlpha Dethrone TinyPNG? – A brand-new service from the Czech Republic by the name of CompressPNG has arrived, ready to dethrone TinyPNG. Chances are good, as you’ll see if you read on.
50 Time-Saving Web Design – Developer Tools – In our field it is important to know how to do specific tasks and use creativity to achieve our goals, however it is necessary to have the right tools in order to get our aims in a more efficient way.
How to optimize your e-commerce web design – Part 1 – The most important thing to remember when creating a web store is that while the design is really important, the main aim of the website should be to make the process from searching for a product to completing the order as easy as possible.
10 harsh truths about corporate websites – We all make mistakes running our websites. However the nature of those mistakes varies. As your site and organisation grow, the mistakes begin to change. This post addresses common mistakes in larger organisations.
How Design Principles Help You Make Design Decisions – While this post will focus on design, please note much of what’s here could be applied to many other aspects of life. As a general rule I think understanding more about any subject is valuable in helping you make better decisions.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
The ultimate guide to logo design: 35 pro tips – Logos are all around us. To the general public they serve as an instant reminder of a company or a product; to the client they’re the point of recognition on which their branding hangs.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Email Design Best Practices – The Commandments of Email & Newsletter Design; an interactive infographic & checklist for creating exemplary emails. The world of Email isn’t dead.
Magazines have finally killed blogs — but in a way you never expected – When Google recently announced it was killing the RSS reader known simply as Reader, a small corner of the internet went apeshit. The rest of the internet asked, “What the hell is RSS?”
The dire state of WordPress – WordPress needs more rules. People treat it like a framework and largely it is, but it lacks the scalability and rules that make frameworks worth using.
12 Excellent WP Plugins to Optimize Images Performance – Optimize image performance are important not only if you have lots of images, but they prevent slow loading of your site’s pages as well. Here are excellent WP plugins to optimize images’ performance to speed up.
Simple Tweaks to Optimize Conversions on a WordPress Blog - Designers who considered themselves artists had big problems abandoning some beautiful design tweaks even once they realized that these tweaks were bringing nothing in terms of the ultimate business goal.
How To Create a WordPress Custom Page Template – Creating a WordPress theme to accommodate your website design concept becomes so much easier when you know about things like Custom Page Templates.
A Beginner’s Guide to Enqueuing jQuery – we’re going to review a few concepts around jQuery and WordPress to make sure that we, as developers, are not only working to build our products correctly, but that we also know how to properly diagnose problems as they arise in our customer’s sites.
How to Style WordPress Comment Form – In this article, we will show you how to style WordPress comment form and take it to the next level by adding social logins, subscribe to comments, comment policy, and more.
WordPress Security: Tackling Backdoors, Pharma Hacks and Redirects - Every now and then, a story pops up about a WordPress website being compromised. The reasons for such security issues can be many — ranging from a flawed plugin to an outdated version of WordPress or a Pharma attack.
Common WordPress Problems & Errors and How to Solve Them – Have you ever faced a situation where after updating a theme or a plugin, your WordPress site displays nothing but a white page? So bad, that you’re even locked out of the WordPress dashboard?
What is an XML Sitemap? How to Create a Sitemap in WordPress? – In this article we will explain what is a sitemap, why you need a sitemap, how to create a sitemap in WordPress, and how to tell search engines about your sitemaps.
Search Engine Optimalization, Conversions, Analytics, etc.
Responsive Web Design, SEO and Google – The big question though centers around the ever-present SEO factor: Is responsive web design good or bad for SEO? The answer: both. It all depends on you.
10 Call-to-Action Case Studies w/ Takeaways & Examples from Real Button Tests – Here are 10 examples from A/B tests I’ve conducted, where I’ve experimented with everything from copy and button design over to the placement of the button.
Create an E-Commerce Web Element with CSS3 – In this tutorial you’ll learn how to create a web element very popular among E-Commerce websites. The design of this element can be found in The Bricks UI.
Grabbing Popular Dribbble Shots Dynamically via jQuery – In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page.
Slide In (as you scroll down) Boxes – We can figure out if an element is within the visual viewport through math. How wide and tall is the window, how far down is it scrolled, how wide and tall is the element, where is it positioned, etc.
Quotes Rotator – An autoplay rotator for quotes (or any kind of content). An indicator above the content shows the progress. A blockquote with an image is used as an example. Also, an example media query shows how to resize the content for smaller screens.
Nested Accordion – A simple accordion that allows for a nested structure. The style comes with some examples of how to style three levels and how to add a media query for decreasing the size on smaller screens. Clicking a trigger element will open the content.
Freelance, Business and Workflow Related Stuff
The Not Knowing Path of Being an Entrepreneur – Unfortunately, the ability to control outcomes is an illusion. This is one of the fundamental lessons I’ve learned in my six years of being in business for myself.
Understanding your Freelancing Personality Type – A rough column will come in handy and help you to draft a sample article. These steps will not only help you in understanding but also developing and polishing your freelancing personality type.
6 Often Overlooked Ways to Evolve as a Freelancer – Every profession is impacted by advances in technology and social media, and to remain fresh and marketable, you’ve got to accommodate those changes. Here are 6 tips to help any type of freelancer evolve with the changing times.
How to Creatively Market Yourself as a Designer – It’s not enough anymore to have a solid portfolio and work experience; if you really want to stand out in today’s market, going the extra mile in marketing yourself can make all the difference in landing the perfect job, or getting some great freelance projects going.
How to Write a Freelance Pitch That Gets Clients – In this article we’ll be going over the ins and outs of crafting a freelance pitch that I gained through my years in the industry to help let your voice stand out in a crowd.
Worth of Client-Testimonials in Online Business – My article compiles some unique pointers on how firms can obtain valuable testimonials and why are Client Testimonials important for a business.
F*cking Brilliant, a great Read or just magnificent Tips!
Let’s Talk About Timeless Design – I have a pet peeve when it comes to describing design (or any kind of creative work). The word “timeless” makes my skin crawl, like that scene in Indiana Jones where he has the snakes and creepy crawlies all over him and he’s all like “Oh God! Snakes!”
The Free Trap – In practice, free products end up working as traps, both for the creator and the consumer. The absence of a price tag attracts many more users than the provider can profitably sustain, and while on the face of it the large user base appears as an indicator of health, ..
- § -
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