Tweet-Parade (no.16 April 2012)
21/04/2012 | Comments Off
It’s weekend! .. Time for a brand new Tweet-Parade! A Tweet-Parade is a post filled with the best articles and tutorials of last week’s blogosphere. It’s all about webdesign, graphic design, SEO, tutorials, social media 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. The different articles and post 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.
A placeholder for incapable browsers - It involves Modernizr on the one hand to check if there is placeholder support within the browser. On the other hand jQuery to search for the placeholder attribute at each form field and substitute it with a value attribute in older browser.
Using Custom Attributes in HTML5 - Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently.
Sass vs. Stylus: Who Wins the Minimal Syntax Battle? - You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS?
An introduction to Modernizr for designers - But with an HTML and CSS foundation comes great responsibility. If an HTML or CSS feature doesn’t work in certain browsers, we need to ensure that we offer those browsers a secondary or fallback experience.
DRY CSS: Don’t Repeat Your CSS - If you’re not familiar with DRY, it stands for don’t repeat yourself, which is hopefully something we can all get behind. It’s why we want variables and functions. Many are moving to css preprocessors for this reason ..
Optimize Your CSS With RequireJS - we’ll review the awesome RequireJS optimizer to handle the process of merging and compressing our stylesheets. While preprocessors continue to become increasingly popular, there are still plenty of folks who stick with regular CSS.
Speed up @fontface loading time - My partial workaround for this is to instruct the users browser to cache the font so it doesn’t have to redownload for each page view. You can also add a local source in your css that will look to see if the font is already installed on the users computer.
Everything You Never Knew About CSS Floats - Floats can trip up even experienced developers and understanding their behavior can really set you free from many of the woes that you face with CSS. Even if you think you already know all about floats, we’ll dive deep enough ..
CSS pointer-events and a pure CSS3 animating tooltip - The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. Although it was originally intended for SVG elements, browser support for pointer-events on other elements is pretty good, except for IE.
Saving the Day with Scoped CSS – One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future. The implementation for scoping is simple.
Let’s Talk about Semantics - I’m talking about HTML semantics. Semantics are the implied meaning of a subject, like a word or sentence. Understanding the thinking behind the naming of elements will help your markup shine.
Decoupling HTML From CSS - For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean.
CSS Compatibility and Internet Explorer - With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved.
JavaScript Package Offers a Smarter Way to Serve Hi-Res Images - Remember when limited bandwidth was a huge problem? Then bandwidth was infinite. Now it’s a problem again. And that means serving up images is once again a complex problem with no elegant solution.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
The 10 principles of mobile interface design - Mobile computing represents a staggering opportunity for web designers and developers who want to become productive on mobile. Yes, there is a bit of a learning curve, but much of a web professional’s legacy experience, skills, ..
Responsiveness is a characteristic - What was not implicitly said in Luke’s article (and I think bears discussion) is that choosing responsiveness, as a characteristic shouldn’t necessarily define the wider implementation approach.
User Experience Is The Heart Of Any Company. How Do You Make It Top Priority? - The closer you are to your customers, the more relevant your product will be and the more likely you make it for people to choose you. It may seem obvious, but the gap between those ..
Building fast and responsive websites - HTML5 is a set of technologies consisting of semantics, new CSS rules and properties, and new JavaScript APIs which could be used to build better structured web pages and powerful web applications.
Responsive viewport units - With all this new fangled talk of responsive web design, its about time that we had a poster child CSS unit to go with it. So move over em, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight.
Mobile Patterns and Why Use Them in Design - Mobile patterns are structured, organized and well researched before going online. These patterns are suited for use when the designer understands how they work properly and the reason behind it.
Why We Shouldn’t Make Separate Mobile Websites - There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should ..
How media queries allow you to optimize SVG icons for several sizes - Using media queries inside the SVG file. Different widths set on the img tag pointing to the SVG file then will trigger different max-width/min-width media queries to be triggered.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Visual Direction in Web Design - One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works.
Tips in Designing a Single Page Website - Single page websites can only become useful if it is designed in the right manner. No doubt, single page websites give a challenge to the designer on how it can still be effective despite some limitations.
A Beginner’s Guide to jQuery - Although it consist of pure JavaScript and everything is also possible using it alone, jQuery is much easier to handle, learn and master. So sit back and follow me through this course of everything you have ..
Linking to jQuery: Always Reference a Specific Version - If you use jQuery, then you probably have something a URL in a <script> tag like this in your source code: http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js CDN-hosted. Minified. Specific version. Very good.
Essential Typography Tutorials and Resources - Since the web is mainly made of type information (around 95% typography, actually), it is critical to understand how to use the web to your advantage to better present your information.
The Divine Proportion and Web Design - The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites. Although the exact origins of the formula and shape are not known, ..
What is UI Kit and Why You Should Use it - It’s not just about copying and pasting elements, at all. It’s about improving your workflow, getting more and working less, and getting an incredibly better overall look.
9 jQuery Mistakes you Shouldn’t Commit - jQuery is so easy to use that sometimes we just forget that it’s not CSS. While using CSS, we don’t have to give much thought to performance, because it’s so fast that it’s not worth the effort to optimize it. But when it comes to the ..
Enhancing Your Typography With CSS3 - Some nice CSS3 techniques for improving your web typography. Unfortunately these experiments won’t work on all browsers because of weak CSS3 support but it is always interesting and fun to give a try on upcoming stuff.
Best Resources of CSS Sprites Generator - Sprite is a technique in CSS to reduce the number of HTTP request which made for images from any website. In this technique designers combined all images which will use in website layout and make a large image and use X and Y coordinates to display any specific area.
Ingredients for an Awesome About Page - Your about page should be treated as one of, if not, the most important pages on your website. Here are a few ingredients to guarantee and awesome about page
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
30 Amazing Photoshop Tutorials That You Can’t Miss - There is a large amount of Photoshop tutorials found on the Internet and each one is catered to a specific purpose. The Photoshop tutorials were graded in different rankings ranging from basic or ..
A Guide to Logo Design in Five Steps - Designing a logo can be a difficult task. It must portray the company accurately, while capturing people’s attention. Although a logo can seem like something minor for a business when compared to other aspects such as marketing, a logo ..
HOW TO: Create An Intricate Display Font – HypeForType Tutorial - It’s all very well creating beautiful, intricate illustrated letterforms, but how do you convert them into a usable display font without sacrificing detail or quality?
Introduction to Optimizing Your Photoshop Installation - Photoshop has a variety of tools to edit your images, and almost as many settings that you can adjust to get optimum performance from the software.
Blogging, Social Media, Writing, Content Strategy, etc.
Why and How to Write Better Graphic Design Tutorials - Quality graphic design tutorials are worth taking the time to do right. So, in this short post, we will first take a look at the “Why” for writing better graphic design tutorials because this drives the “How.”
How to Find Hot Topics to Blog About - Even though keeping a blog updated with new articles is a lot of work, there are ways to dramatically increase your return on investment for your blog. In this article I will be discussing ways in which you can find hot topics to blog about, ..
Tips in Designing a Functional Website Archive - Try being creative with your archive and successfully attract the attention of the users. This is one of the best manner of promoting archive posts. Also, make sure that it is user-friendly and functional so that you will be able ..
Your Social Media Success Toolkit: 10 Must-Have Resources - In our quest to provide the very best service to our clients, our agency has spent countless hours trying and testing every conceivable social media tool and technology.
5 Ways to Get More Traffic with Content Marketing - Here’s how to use content to get the attention of those all-important prospects — the men and women who are in the market to buy what you have to sell.
Guest Blogging Tools and Advice: Interview with James Agate - Several blog networks were recently being deindexed has many businesses looking to diversify their link profiles. Since guest blogging is a way to build legitimate links in a timely manner, businesses looking ..
Top 5 Tips to Protect Your Privacy from Facebook Timeline Apps - I have mixed feelings when it comes to using Facebook applications: I love how effective they are to enhance my Page presence and experiences; but at the same time worry about how much personal data I’ve given out to the developers.
The Real Secret to 1,000 Blog Subscribers in 60 Days or Less - The secret formula to getting 1,000 subscribers in 60 days or less is to put the guest posting strategy into overdrive and publish several articles on A-list blogs…and where you send that endorsed traffic to a ..
What does Twitter know about me? My .zip file with 50Mb of data - I was more interested in the data that they keep but do not allow me to directly access, that is, without a legal request. Well within the 40-day timeframe, three weeks later, Twitter sent me a big .zip file with all my data.
WordPress
How to Fix the Error Establishing a Database Connection in WordPress - In this article, we will show you how to fix the error establishing a database connection in WordPress by compiling a list of solutions all in one place.
Tutorials & Resources For Creating A WordPress Options Panel - Creating a WordPress custom admin option panel is a great way to enable your clients to easily update their site design elements and layout without changing the core code.
Top 10 Essential WordPress Security Plug-ins - Hackers and spammers are also taking keen interest in breaking the security of the blogs. Though WordPress is very much secure by itself, but there is never too much ascertainable.
A WordPress Blog Hacking Nightmare – The Gory Details… - I did all of my normal tricks. Restart the my database server, Reboot the server and pray. It worked for 10 minutes, and then my baby coughed, stumbled and went offline again.
How to Create a Custom Error 404 Page for WordPress Blog - As bloggers, we try our best to ensure that every link we create goes to a specific page on our site. However, in the event that we delete out-of-date posts or pages without removing the links to them, there is a chance that a link clicked will lead to Error 404 page.
A Guide to the WordPress HTTP API: Automatic Plugin Updates - This third (and final) part of the WordPress HTTP API series will teach you how to create your own plugin repository to distribute automatic updates for your users.
WordPress Custom Fields – Tutorials and Plugins - Using WordPress custom fields you can enhance the power of WordPress. Custom fields are additional data that you can add to your posts and pages. In this post i have listed numerous tutorials that will uncover the power of custom fields.
Speed up WordPress get_posts and query_posts functions - By inspecting WordPress 3.x source code I found an undocumented parameter that can be used with get_posts and query_posts functions. The parameter is named no_found_rows and it accepts boolean values.
How to Stop Image Hotlinking with .htaccess - Today we have a quick tip, that can help you protect your server bandwidth. So if you are in situation that you find your pictures on another server, you can block this unwanted load.. and be happy again about your content, ..
Create Beautiful Charts With The GChart WordPress Plugin - Charts are built using the Google Visualization API and the output given uses pure HTML5. Once the plugin has been installed you will see a new ‘Add Chart’ icon in the Upload/Insert area of the post editor.
Random Redirection In WordPress - It’s just that going through archives is not very popular these days. So, how do you actually make readers dig in without forcing them? How do you invite them to (re)read in a way that’s not boring? How do you make your WordPress magazine more interactive?
Search Engine Optimalization, Conversions, Analytics, etc.
How Should You Handle Expired Content? - Handling expired content can be an overwhelming experience for any SEO in charge of a dynamic website, whether it be an e-commerce, a classified, or a seasonal/promotional site.
How to Improve Your Rankings with Semantic Keyword Research - Semantic search will look at how those words relate to each other and look for clues on how you entered them…location being crucial. In your SEO campaigns semantic search means you will have to identify ..
7 HTML Guidelines For Website Usability & SEO - In this article I will be using this reasoning to provide you with a set of guidelines on how to make use of HTML tags to improve your website’s usability and SEO.
Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm - Everybody is buzzing all around now, how latest changes Google did affected their search traffic greatly! Chances are if you monitor your own properties on Google Analytics, you will see significant drop in ..
Tracking Scroll Depth with jQuery and Google Analytics - Scroll depth—the measure of how far a user scrolls on a particular page—is an interesting but lesser-known engagement metric. It’s not something you can find in your Google Analytics or Omniture account but you ..
How to Rank Better in Google : 12 Blog Habits You Should Avoid - Many upgrades are minor, while some others are remembered more, like in the case of Panda. There are some habits as blogger, that are timeless and you should always avoid.
Tutorials
Build a Quick and Elegant Login Form - Today we’re going to code up Orman Clark’s Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden’s CSS animations to embellish the experience [HTML/CSS]
Rotating Words with CSS Animations - In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.
CSS3 Menu and Navigation Tutorials - All of the CSS3 navigation tutorials we have for you today are all fully functional and could easily be used on a live site. But we do prefer to think of them all as being more experimental and proof-of-concept rather than being a robust end-product
5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours - I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites - In this Quick Tip video tutorial I’ll show you how to create a rating system using CSS, web fonts and sprites.
Creating a Single Page CSS Website Without Images - To begin we’ll construct the HTML. The basic layout of this website is going to be a bunch of divs which represent each page, and then a header which sticks to the top of the page constantly, providing navigation.
Freelance, Business and Workflow Related Stuff
7 Signs You’re Not Entrepreneur Material – No customer cares about your vast experience or years of hard work… unless the fruit of that labor benefits them. As a business owner, you earn the right today to stay in business tomorrow.
A Baseline for Front-End Developers - There’s a new set of baseline skills required in order to be successful as a front-end developer, and developers who don’t meet this baseline are going to start feeling more and more left behind as those who are sharing their knowledge start to assume that certain things go without saying.
Finding The Perfect Pitch - There are certain things that could make the request for proposal or request for information process that much more streamlined and fair from both the agency and client side.
Top 8 Reasons Why Freelancer loss their clients - Any business model can easily understand the value of freelance writer and it also knows the complications in finding the best one in place. Given the web intricacies are mushrooming at a fast pace, your freelance must not ..
Business Relationship Basics for Freelance Designers - In this post, I’ll discuss the importance of building relationships and what it can mean for a freelance designer. I’ll explain why long-term relationships are important and also provide you with five tips for meeting and ..
The next step in building my design business: what makes a great portfolio site? - So today I’d like to talk about this all-important question that will improve your understanding (and mine) of what content to put on a design business website and why.
Know Your Customers and How They Decide - The goal is to get someone to decide to do something that benefits you or your company. To achieve this with a design, you need to understand two variables: who are they, and how do they make their decisions.
F*cking Brilliant, a great Read or just magnificent Tips!
Of parser-fetishists and semi-colons - The web standards movement was not about enforcing arbitrary code syntax on poor developers who now have to type a few keys more. It is about making code predictable, extensible and easy to explain to newcomers.
Make Your Email Hacker Proof - Your email is the skeleton key to your online identity. When you lose control of your email to a hacker – not if, but when you lose control of your email to a hacker – the situation is dire. Email is a one stop shop for online identity theft.
I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-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
Sorry, comments for this entry are closed at this time.