.. finally weekend! Here’s a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.
CSS background-position and percent – Making the width flexible and changing the column widths from pixels to percentages has an interesting consequence when you use a background image to fake columns because of the way the
background-position CSS property works when you use percent, i.e.
Web Design: Clipping and Masking With CSS – Masking in image editing is a method of ‘hiding’ a portion of an object based on another object. This method has long been available in Image editors like Photoshop. A similar method can also be done in CSS with some of its properties.
HTML5 Introduction – What is HTML5 Capable of, Features, and Resources – HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011.
Modular CSS with Media Queries and Sass – Most developers nowadays are recognizing that if you’re developing large applications that have different views and states, it is best to take a modular or object-oriented approach to your CSS development.
How to use the Fullscreen API – Bundled with HTML5 came a large number of API goodness and one of the best was the Fullscreen API that provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.
The Lengths of CSS – There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. What are all the accepted “length” properties in CSS? There are quite a few.
Finer grained control of hyphenation with CSS4 Text – CSS3 Text provides the ability to apply hyphenation to text, via the
hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.
Vertical text with CSS 3 Writing Modes – Languages with latin-based writing systems such as English are typically written left to right, and from top to bottom. However, there is a whole different world of writing modes out there.
Hot in web standards: January/February 2013 – New year, new standards developments. It seems that everyone is still in full gear to accomplish their New Year’s resolutions, because there are tons of things that have been happening simultaneously for the past two months in the restless standards world.
Can I afford a preprocessor? – The question isn’t even which one to choose: they all do pretty much the same things (even if Sass is slightly more robust than others). The main topic is: should or shouldn’t you use one?
SVG Stacking – Stacking images on the web is something we all dreamed about. We know and use this feature already from our graphic editors but once the image has to be online, we automatically scale everything down to the absolute minimum.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Creating Savvy and Sophisticated User Experiences through Personalization – The trend of personalizing websites is finally in full swing. We’ve been talking about it for years—flirting with it in fits and starts—but now the tools are at our fingertips and the strategies have matured for providing complex personalized user experiences on the Web.
Responsive Web Design Process – We call it the four Ds: discovery, design, development, and deployment. We tie all of this together to form our responsive web design process. The deliverables for your project might vary, but here’s an idea of what you can expect from us.
26 Beautiful Landing Page Designs Critiqued with A/B Testing Tips – Each example will examine the thought process you’d go through when analyzing a page (or the reaction a visitor might have when arriving for the first time), a testing hypothesis for how the page might perform better, and some examples of what you could test to prove your hypothesis.
Responsible Considerations For Responsive Web Design – A few obvious examples are the multitude of responsive image techniques, conditional loading, and responsive design and server-side components (RESS), among many other existing and emerging strands stemming from the core concept of responsive Web design.
Adapting your usability testing practise for mobile – Usability testing is the gold standard for evaluating user interfaces. Although many people are familiar with usability testing desktop systems or web sites, fewer people have experience testing mobile devices.
Mobile website design: 25 pro tips – In the last few years mobile website design has exploded, but knowing what to do and where to start can be tricky. Mobile website design is not just a question of a mobile site or an app – there are a range of options in between and aspects to take into account.
Ten things you need to know about responsive design – Responsive websites work by using media queries to detect the device or the resolution of the device being used to access them. Once this determination has been made, a combination of flexible images, type, and grids adjust to fit the screen on which the site is being viewed.
Branded Interactions – One or two key functions. Well designed apps master their core interactions. The best are unique and become associated with the brand itself. You could even call them branded interactions.
Improving UX Through Front-End Performance – It’s time we make performance optimization a fundamental part of how we design, build, and test every single site we create—for every single device. Website performance starts with design.
What Is The Best Call To Action Phrase For You? – As user experience designers, we’re always asking ourselves these same questions: Is there such a thing as the perfect call to action? How can one industry learn from others? It appears that the answers differ depending on what type of website, application or industry you’re dealing with.
Responsive Web Design Workflow Considerations – However, the resource cost compared to “traditional” web design is definitely comparatively higher, there are claims that it will cost at least 50% more to design and develop a responsive website.
Performance is money, part 1: the end-user’s wallet – Most web developers are familiar with the maxim that light is good: the idea that page performance matters to the end user experience is a truism at this point, backed up by a tremendous amount of real-world evidence.
Designing A Better Mobile Checkout Process – A record number of shoppers are turning to their smartphones to research potential purchases. Meanwhile, the bigger question — are those same users willing to complete the purchases on their mobile device?
Skeuomorphic vs Digital interfaces and what will 2013 bring us – We’re well into 2013 already, but now that 2012 is gone, it’s the time to talk about one of the biggest trends in web and user interface design of the past year, and also one of the most loved and hated one, the Skeuomorphic interface.
Refining Simplicity – But before we get started on how we can better refine simplicity in our own work, let’s review what the typical UX process looks like. First, in order to achieve an easy to understand and rewarding user experience, it’s important to understand and identify the problem.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Windows Apps for Web Developers – What I want to do is list the development tools that I frequently use as a web developer on Windows. I’m always anxious to find new tools to enhance my workflow!
Five killer ways to use vertical rhythm – One of the most important things you can focus on when it comes to laying out a page in HTML/CSS is vertical rhythm – the visual pattern that the blocks of type or lines of type form into as you scan down the page.
Tools For Testing Responsive Websites – 21 Items – Guess what, with responsive web design, now you have to design for various screen sizes too. In this article you will find 21 tools to test responsive websites from which you can choose the one that you consider best.
10 Things I Learned About Design From iPad Apps – Good design is all around us. Not just in printed materials or on websites, but also in everyday items. What’s great is that you often don’t notice it — you just enjoy whatever item, tool or website you are using.
How To Improve Your Website Load Time – If you are a website owner, you must understand that having a fast website is very important for you otherwise your competitors will leave you in the dumps. If your website is slow, do not expect it to have visitors and huge traffic.
10 Things to Know Before Designing for the Web – To make things simple for those of you just heading out on your life’s path as a designer, I’ve created a small list of the things I wish I understood from the “get-go”. Here’s the 10 things to know before designing for the web.
The dangers of cross-browser testing with IE9′s Browser Modes – We still test our web fonts in all three (along with all the other major browsers), but today we wanted to discuss a potential testing pitfall that some of our customers encounter.
Taking A Look At The Future: Web IDEs and Online Coding Tools – Most programmers and coders used to rely on offline programming tools to code and create new stuff. In this short article, we shall be discussing web based IDEs as a possible and viable alternative to offline IDEs.
What a CMS Won’t Do for You – A content management system, or “CMS,” is a program that enables a company to collaboratively edit and publish content. Because CMSs provide structured templates, multiple content authors can publish identically formatted content
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
25 New and Cool Photoshop Tutorials – Photoshop is a fantastic application because it allows you to create anything your dream imagination. In this tutorial, we grouped Photo effects, illustration techniques, Text Effects, Photo Manipulations, Retro Effects, Digital Art, light Effect, Drawing and Painting Tutorials.
How to Fix Muddy Gradients in Adobe InDesign – This phenomenon happens a lot when using the default black. In this tutorial, we’ll take a look at a few methods you can use to correct that muddy look in both process (CMYK) and spot color gradients.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
7 Scientifically-Backed Copywriting Tips – The practice of persuasive copywriting is a necessity, if you want to sell products, services, or ideas online. While great writing is truly an art, those looking to improve their craft as a copywriter can find a lot of help from behavioral psychology and neuroscience studies.
11 Steps To Building Your Brand On Twitter – Now more than ever is a great time to get focused on Twitter and start building a strong brand around your business, your blog or your name. If you want to see results fast and you want to see traffic pouring into your website, then Twitter is the best social site to do that.
Becoming a Blogger: Do You Have What it Takes? – Are you thinking of starting a blog or restarting your blog? Do you wonder if you have what it takes to attract a strong blog audience?
Creating Client Testimonials With Custom Post Types – The easiest way to add this functionality to your site would be to include it as a plugin. I’ve put together all the necessary files and included a download link for the Client Testimonials plugin above.
Beyond blogging: WordPress as a platform – According to a WordPress Survey, 66% of respondents use WordPress as a CMS, not just blogging software. The growth of WordPress adoption for various type of site has created a new market with its own landscape.
A Guide To The Options For WordPress Theme Development – A discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that there isn’t a one-size-fits-all answer and that the best method depends on the needs of the website and the capabilities of the developer.
Making Your WordPress Blog Retina Compatible – Since WordPress version 3.5, there’s built-in Retina support on the WP admin side. However, I’m sure you can agree that your admin panel being Retina ready doesn’t quite cut it if the front of your site isn’t.
The Ins and Outs of WordPress Semantics – Most software that is released has its own language made of words specific to the program. The same is true for WordPress. This article will introduce you to jargon that is specific to WordPress.
Cross-Site Scripting in WordPress: What Is XSS? – XSS enables attackers to inject client-side script into Web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same origin policy.
What Features are Coming in WordPress 3.6 – WordPress 3.6 will be a great update particularly for bloggers and content publishers. It is focused on post edit area, providing better tools and support to improve the editorial process of creating content with WordPress.
Search Engine Optimalization, Conversions, Analytics, etc.
Google Author Rank and the Have Nots – This ranking doesn’t have anything to do with the actual quality of the writing? Instead, it “trusts” social verification to vet content, primarily in the Google+ community. And that means rank requires gamesmanship. Authors have to run through Google hoops to receive better indexing.
10 Reasons Writers Should Claim Their Google Authorship Markup – Authorship markup is the method to display authorship information in search results for the content you create. Author Rank, on the other hand, is an aspect of the search algorithm that Google appears to be implementing.
19 Best Tools to Check Website Performance and Speed – Every webmaster should be careful and curious about the performance and speed of his site in order to take it to desired ranking. Internet has facilitated this process by offering several tools to check the site performance and speed accurately.
Create An Interactive Metro Style Grid Dashboard – In this tutorial we are going to create a metro style dashboard, to do this we are going to use a very useful jQuery plugin called gridster. Gridster will allow you to create a drag and drop multi-column grid.
Creating a digital watch in pure CSS – Off the back of last week’s pure CSS clock, I decided to have a crack at creating a digital watch face in pure CSS. Turns out making the digital numbers was a little easier (and perhaps a little more fun) than creating the clock.
How to create a resizing menu bar – Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery.
Build a Single-Page Sliding Navigation Bar with jQuery – In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements.
Build a portfolio with CSS3 transitions – Here we’re going to build a modern, interactive portfolio page using CSS3 transitions to replace jQuery animation and HTML5 markup. We’ll be looking at vendor prefix issues and adding fallbacks for less supportive browsers.
How to create a beautiful login form – We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements.
25 Examples of CSS3 and HTML5 Tool tip Tutorials – HTML5 and CSS3 tooltips when used on a web document make the hyperlinks informative – they show the targeted information when the user hovers over the hyperlink.
Freelance, Business and Workflow Related Stuff
Does Working From Home Really Work? – How do you make working from home a success for your business and career? Today, we have some tips to help you stay productive, stay sane, and avoid whiling the day away on your Xbox when your project list is piling up.
Lessons Learned From an Experienced Freelancer – Whether you’re freelancing full-time or part-time there are a lot of things to keep in mind when approaching any new project. Below I have outlined common lessons most freelancers have experienced which in turn could help you with new opportunities in your future.
10 ways to present yourself more professionally – When it comes to interviews, presentations, important meetings, and any situation where you need to make a stellar impression, looking professional is just as important as being professional.
Understanding the Three Question Limit as a Designer – Have you noticed when you ask someone three questions in a row, their eyes glaze over and they stop paying attention? It’s a psychological defense mechanism to keep our privacy to ourselves. It’s one reason so many people choke up when taking a test.
Freelancers: Juggling Deadlines and Priorities 101 – Deadlines can be a nasty thorn for many freelancers. I personally feel that deadlines make me more concerned with the outcome, rather than the job itself.
Do Freelancers Have to Blog To Get Clients? – Would you like to have a freelance blog that attracts clients? It’s a freelancer’s dream — you dash off short blog posts now and then, prospects read them, get impressed, and ring you right up.
A Complete Guide of Self-Marketing As A Freelancer – I want to describe the main chapters of a marketing plan that may help you in attracting more and important clients. By far, I can’t guarantee that it works, but keep in mind: not even the best marketer in the world may guarantee the success of a strategy.
F*cking Brilliant, a great Read or just magnificent Tips!
Designer, Dare to Experiment! – The internet and specifically websites have the power to be used as a creative and expressive medium. Looking at a website as an artistic medium will broaden your limits and encourage creativity.
Designing for users – What we do is not art. We’re paid to fulfil a business need and ensure our client makes a return on their investment. We help others succeed, grow and gain respect. We are service providers in a commercial industry: a very chaotic, misunderstood, and undervalued industry.
An Interview with Eric Meyer – His early CSS books are a big reason this blog exists today and the reason why I’m a web developer. Eric gave me some time to hit the history of CSS, CSS’ problems today, and the future of CSS.
- § -
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