.. it’s time for 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.
Syntactically Awesome Stylesheets: Using Compass In Sass – In short, Compass is a Sass extension and, like LESS Element of LESS, it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that make it a more powerful companion tool to Sass.
Why Ems? – I’ve long sized text only in px. Even when it was patently uncool to do so – the days in which smart people cared about the fact that text set in px couldn’t be resized in IE 6-8. I’ve switched over to using ems now. I haven’t moved every single project over yet, but my mind has switched. Why?
20 All Too Common Coding Pitfalls For Beginners – Making classic beginner mistakes comes with the territory. Today, we’ve asked a variety taff authors to chime in with their list of pitfalls and solutions – in a variety of languages.
CSS Preprocessors Compared: Sass Vs. LESS – To decide, we will compare the two in seven factors: the one that performs better gets one point; in the event of a tie, both will be awarded one point.
The Vanilla Web Diet – The Web as it is now is suffering from an obesity problem. If you surf the Web on a flaky mobile connection or some hotel wireless, you’ll find yourself a lot of times staring at a page or app that doesn’t do anything and doesn’t tell you what is going on either.
CSS Things That Don’t Occupy Space- But not everything on an HTML page occupies space that is honored by other elements. I thought it would be interesting to list and describe all the things in CSS that don’t occupy this kind of physical space in an HTML document.
CSS Positioning: A Comprehensive Look – One aspect of CSS layouts that will likely be around for some time yet is CSS positioning. In this post, I’ll cover CSS positioning in detail and I hope you’ll come away from this with some more options in your CSS layouts.
Why I switched from LESS to Sass – I’m more like a novice with these tools, but I’ve already worked a little bit on 2 of them: firstly LESS then Sass. I recently moved from LESS to Sass and don’t plan on going back.
The What, Why and How of Data URIs in Web Design – We’re going to take advantage of a technique known as the data URI scheme; encoding both images and fonts into pure data strings that can be directly integrated into your markup and stylesheets.
How To Add Microdata To Your Blog – For understandable reasons, people tend to get very confused by the new technologies used to add metadata to HTML5 pages: should you use microdata, microformats, metatags or RDFa?
A Quick and Simple CSS-Only Method For Fading Background Images – There’s no
background-opacity control in CSS yet, but there’s an easy way to fake it, by usingmultiple background images. The trick is to manipulate the fact that the
Usability, User Experience, Responsive Webdesign, Mobile, etc.
The opportunities and challenges of responsive design – I’d like to discuss both the opportunities and challenges that come with responsive design. I will shed some light on this new way of thinking and help you to make an informed choice for your next project.
Stop Designing Mobile Websites – In my opinion, it’s time to stop designing mobile websites. Dramatic, I know… but my thoughts are not unfounded. Despite the popularity of mobile, we can no longer say “mobile browsing is on the rise.”
6 Easy Ways to Improve Your Company Website User Experience – Whilst many businesses have completely succeeded online and built an incredible moneymaking machine – there are still companies falling at the first hurdle when it ..
Responsive Design v. Mobile Website – Know The Difference – How does one provide an optimal viewing experience with all of these drastically different types of devices? Many of which require the use of your fingers to navigate? How do you possibly plan for the next big thing?
Mobile Design Typography is Vitally Important … and Challenging – One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.
UX design for startups:efficient design techniques – In my experience, only two things are certain in all these discussions: they are boring andthey are futile. You don’t need to engage in them to design a stunning user experience.
Understanding The Viewport Meta Tag – The viewport meta tag tells the browser how to behave when it renders the webpage, you can tell it how big the viewport will be.
Optimizing Typography in Responsive Web Design – In this article, we will be discussing typography vis a vis responsive web design. Our focus will be on typography strictly in relation to responsive web design only.
What’s the best technique for hiding large images on mobile versions of websites? – Responsive images has been a relatively hot, recurring topic in the web design and development community since, well, pretty much ..
Making a website responsive in 3 easy steps – Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. In this article, I’ll show you how to easily make a website responsive in three easy steps.
In From The Cold: Find A Slot For Every Content With Off-Canvas Layouts – Instead of completely omitting certain content from the mobile design, you can just put it aside and only show it on demand or while break points allow. A click of a button, a tap or a swipe are enough to bring the content back to screen.
Quick Tip: Using CSS Transitions in Responsive Web Design – CSS transitions are a great way to add some flavor to your responsive website. Elements such text and/or images, repositioning smoothly, when resizing the browser.
What is User Experience Design?- Digital technology must respond in a meaningful way when a user expresses their intent. The job of a user experience designer is making this interaction feel natural and nearly invisible.
Adaptive Maps – While techniques exist to create fluid and scalable embedded maps, I’d argue that embedded maps don’t translate well to smaller screens. There are a lot of reasons why it doesn’t make sense to serve embedded maps to mobile web users
7 Tips to Create Great Mobile Landing Pages – Having one or several mobile landing pages is a simpler solution for many companies than a full-fledged mobile website. Mobile landing pages are cheaper than mobile websites.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Create Smaller, Better Web Graphics With Icon Fonts – Icon fonts in particular have been getting a lot of attention lately and for good reason — they make an easy, lightweight way to serve up resolution-independent images that look good on any screen.
Make Cool Effect with CSS3 Animation Libraries – I have 5 CSS animation library built with CSS3 and intended to let you extend them and use it in your own project. Though not all the browsers are supporting all these features yet,
Your Website and the Importance of a Value Proposition – Unfortunately, far too many companies don’t really value their websites and don’t get the full benefit out of them. They neglect design, website copy, and other important essentials.
What’s new for designers, November 2012 – Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.
The Pros and Cons of Minimalistic Web Design – Wondering about how to best keep a minimalist framework in mind for your site or just want to find out a bit about the pros and cons; see how they compare
Simple Tips On How To Build A Good Landing Page – Through a well-designed landing page, a company has a way to target new visitors with specific content and images catered to them. Here’s how to design one that works!
How to Present Your Freelance Services on Your Website – For most freelancers, that means creating a services page that lays out the details, along with a little information about how you provide such services and what results your clients can expect.
Top 10 Vital Elements of a Successful New Freelancer’s Website – How can you make your site into a client magnet that has prospects ringing your phone off the hook? Here are the important items your freelancer website needs:
Principles of Creating Effective Web Designs to Attract Visitors – While you are designing a website, make sure it is a user-centric design because users’ are the most important aspect behind any website’s success.
How to Use the Webshims Polyfill – In this post I’ll be talking about the HTML5 and CSS3 feature polyfill library called Webshims Lib and how to use it correctly.
How to keep your text clean – Just as important as the words themselves is the design of the text – from fonts, to hyphenation, to how it is all organized on the screen. Part of the design includes the words themselves, how you compose the “big words” on your site can make a difference as well.
Linking Mobile Web & Native App Experiences – It’s often said that the power of the Web lies in the links that enable connections between people, places, and things. At first glance, those same links don’t seem to work with native mobile applications. But mobile Web and app experiences can be connected -it just takes a bit more work.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Are corporate logo changes always necessary? – So why are younger companies changing their logos so quickly? Microsoft and eBay recently made headlines with their new logos, or “rebranding,” as some call it, much to the delight of graphic designers who went to town critiquing the designs with negative comments.
How To Brand and Grow Your Company Through Marketing – This advice has only increased since the Penguin and Panda algorithms started rolling out. We’re not seeking to trick or game the search engines; we’re seeking to build brands online.
InDesign Fundamentals – Jump into the world of print design by learning the leading publishing software, Adobe InDesign. The ins and outs of this great publishing program that anyone of any experience level can follow.
How to Create a Visual Brand for Yourself – It is important to create a consistent brand for yourself today. Look at the channels you are using and how you are identified online, decide how you want to be identified and what your name and image should be, and then go out and make it happen.
Are You Sure You Want to Become a Logo Designer? – As in any other job, before starting to learn the basis of logo design it is mandatory to have a clear answer to a question:”are you sure that logo designer is the best job for you?”
6 Considerations When Redesigning Your Logo- Too often we think of a business logo as just an image or we hold the belief our logo doesn’t truly matter. All aspects of design matter when it comes to conveying your brand message.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
How smart is your blog’s design? – Did you know you can increase your blog’s income just by tweaking a few design features on your blog? Tweaking your blog’s design is simple and you usually can do it yourself.
The Ins and Outs of the Author Bio – An author Bio is becoming increasingly important these days, especially in the world of freelance writers. They are needed by several businessmen and professionals as well.
10 Simple Tips to Becoming a Better Blogger – The phrase was coined “web log“, which has through the wonderful world of language, been transformed into the term “we blog” and hence “blogging“.
How to Simplify Your Social Monitoring – Are you looking for easy ways to monitor social mentions of your brand, product or name? In this article, I’ll discuss two real-time social analytics tools and how they can enhance your monitoring.
How to plan better content- In this article I’ll walk you through these processes and show you how you can use them to streamline your content workflow.
Visually Test Your WordPress Rewrite URL Rules – With functions like add_rewrite_rule(), WordPress allows you to create your own URL rewrite rules via the WP Rewrite API, of the WP_Rewrite Class.
HTML in Image Captions – Good news! For this functionality you won’t even need a plugin, because when WordPress recently released version 3.4.x, this feature was introduced.
Add a Responsive Lightbox to Your WordPress Theme – We’re going to be using the incredible fancyBox jQuery plugin (script) to demonstrate the implementation of the lightbox, but the same principles can apply to most lightbox scripts.
WordPress Custom Post Types Debate – Functions.php or Plugins? – In this article, our founder Syed Balkhi will debate whether WordPress Custom Post Types belong in functions.php file or in plugins.
Common WordPress Development Mistakes and How to Fix Them- I’m going to go through some of the most common development mistakes and how you can easily fix them, and going forward make your code better!
Powerful Ways to Customize WordPress User Profiles – One of the best ways to encourage healthy user interaction and engagement on a WordPress website is to provide an excellent user profile system. While this is actually included as a standard feature with every ..
How to Customize Responsive WordPress Themes – Part 3 – In this article, we’ll be taking a look at some style rules that you can use “risk free” when customizing responsive WordPress themes, as well as some that should maybe be avoided, and what you can do instead.
How To Create An Embeddable Content Plugin For WordPress – Our goal in this article is to create widget code that a user could insert in their website to display a list of recent posts from the parent website. Of course, this can also be easily accomplished using RSS, but this is just an example to show the technique.
What’s Coming in WordPress 3.5 (Features & Screenshots) – WordPress 3.5 is less than a month away. This is why we thought we should give you a heads up on some of the exciting new features that are coming in WordPress 3.5.
10 simple ways to secureyour WordPress site – This article will explain how you can best protect your WordPress site from malware and cracking, without having deep security knowledge.
Search Engine Optimalization, Conversions, Analytics, etc.
5 SEO Mishaps That Are Killing Your Rankings and How To Solve Them – But there are rules to the game and if we decide not to follow those rules and perform the correct SEO strategies then this can lead to devastation and lost of rankings.
No Follow Links Are Still Valuable – Many site owners want to know the difference between follow and no-follow links. Both kinds of links are seen and noted by the search engines, but the big difference is that a no-follow link doesn’t pass on any SEO value from one site to another.
8 Tips to Improve Your SEO Now – Stop languishing in a dark corner of the World Wide Web. Grab your developer and go through this checklist to start getting more traffic. Is your website living in a dark corner of the Web?
How and When to Diversify Your Anchor Text – But while it’s helpful for anchor text to be relevant, using the same anchor text phrases over and over in the links that you build is overkill that’s likely to get you penalized.
30 Effective CSS3 Tutorials – A collection of specially selected CSS tutorials that will efficiently guide you in how to add excellent web elements on your website entirely with the use of CSS3 with perfect ease.
Stairway Navigation (A jQuery Plugin?) – It’s nothing but a visual effect in which the hovered (or active) navigation item becomes the tallest “stair” and other items before and after it step down. It’s simple, but it’s not something you see very often.
Baraja: A Plugin for Spreading Items in a Card-Like Fashion – With this jQuery plugin items can be spread in a card-like fashion and displayed in an unusual way. Several parameters allow many different spreading results, allowing a unique pattern.
Creative CSS Loading Animations – In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.
How to Create a Responsive Image Slider in jQuery and CSS3- Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3.
Sass Tutorial: Building An Online VCard With Sass & Compass – Today we are going to continue our discussion on Sass and this will be the final part of our Sass series. This time, rather than a theoretical approach, this is going to be a bit more practical.
How to Create a jQuery Confirm Dialog Replacement – this week we are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
Freelance, Business and Workflow Related Stuff
7 Tips for Becoming a Successful Stock Author – Unfortunately, the reality of the situation is that there’s no guarantee that your hard work will yield you a single cent. In fact, it could very likely be a phenomenal waste of time! Today we’re going to discuss some tricks of the trade that will help your foray into this market is a successful one.
Designers: Know Your Rights! 4 Must-Have Clauses In A Contract – Contracts are pretty important in a designer’s career, and despite your apprehensions with legal documents, it’s worth getting into some specific details that can make a huge difference in practice.
How To Pick Up Freelance Work Through Social Media – Struggling to find freelance work through traditional channels can be hard graft that often doesn’t reward the time you spend looking for jobs.
A Guide on How to Write a Web Design Contract – Having a contract for design jobs is very much important and that includes web designing. Contracts are a good way to make sure that you and your client has agreed on all the aspects of the project.
You Already Know How To Use It – How does a company like Apple make such great new things that people already know how to use? One answer lies in the ability of Apple designers to draw upon patterns that people are familiar with.
15 Ways New Freelancers Can Use Social Media to Boost Business – Besides having social buttons on your own blog and hoping to heck someone retweets your stuff and a prospect sees it, how can social media help you find clients?
F*cking Brilliant, a great Read or just magnificent Tips!
Don’t Build a Startup, Build a Business – The world of startups has attained such mystique that people are scrambling to get involved. The word alone can sell a book, even if that book is about something only tangentially related.
Are Frameworks the New Cookie Cutters? – do not use a CSS grid framework. To be honest I do not see those point. I understand the rational behind them – that they could speed up certain work – but in a sense it seems like using a sledgehammer when a simple hammer could be used.
Becoming Better Communicators – Good communication skills are what allow us to sell our work, justify our decisions, and stand behind our positions. And it’s why all these little pieces of communication we constantly deliver are so important. So what’s so hard about communication, and how can we get better at it?
Life Beyond WordPress – I feel trapped by something that is heading in a direction that I’m finding harder and harder to align my ideas of what a website solution should be. I’m not suggesting that WordPress is a bad solution for creating websites.
- § -
I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the proper 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