Tweet-Parade (no.2 Jan 2012)

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, etc.

Adventures In The Third Dimension: CSS 3D Transforms - Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3D Transforms ..

CSS Image Reflection With Webkit - Image reflection is a great new feature from CSS which allows you to spice up your web image by adding a reflection underneath. But now the people at webkit have put this feature into CSS by just using one line.

When can I use… Support tables for HTML5, CSS3, etc - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

How to Use the HTML5 HGROUP Element - The only thing you need to be aware of when using the HGROUP element is that only heading elements can be inside it. You should not include any content outside of the H1–H6 elements.

Just another CSS3 menu - this is my first post on 2012 and today you’ll learn how to create a simple and clean CSS3 menu in just a few steps.

Textarea Auto Resize - On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, ..

“Card Fan” CSS3 Gallery Reveal In Four Lines of Code - I found this effect used on YouTube’s Google+ page and decided to duplicate it in CSS3: if you’re familiar with CSS, and are prepared to use a little CSS3 animation, the technique is not difficult to achieve at all.

PHP Arrays: Defining, Looping and Sorting Simple Arrays – Unlike scalar variables, which assign only a single value to a variable, an array variable can hold multiple values. Arrays are useful for holding values from database queries or web form entries, where each field ..

Build a Fun Trivia Game With the CSS Active Selector – Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked. With :active, we can control the state of an object while it’s being clicked.

Styling Button Links With CSS3 - A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have ..

10 Super JavaScript Animation Frameworks - JavaScript allows you to do a wide range of animations and effects that would otherwise be very hard to achieve with minimal overheads. Below is a list of JavaScript animation frameworks that will allow you to rapidly develop ..

The Lowdown on :Before and :After in CSS - What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS?

40 CSS Reference Websites and Resources - Today we would like to share with you 40 resources that will help you on your CSS journey. We have listed great CSS references and CSS blogs for learning more about the language.

10 Best HTML5 Forms - HTML5 is a great way to add a wow effect to your website. After the introduction of HTML5 the web dorms are also became more beautiful. You must have known that before the introduction of jQuery and HTML5 the forms on the web are not much attractive but ever ..

 

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Why Your Form Buttons Should Never Say Submit - When you see a Submit button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A Submit button describes what the system ..

Responsive design in the corporate world - When you already have a full plate of client work, it can be difficult to get into new technologies. Responsive design is a big buzz-phrase right now, but it’s unnecessary to force it on a client unless their users will see a benefit from it.

Choosing device sizes to support for your responsive designs – Don’t. The problem isn’t anything to do with devices, pixel counts, or screen sizes. The problem is an inappropriate approach to designing in this medium. If you’re still using that approach don’t worry, it’s not your fault.

Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize - Taking advantage of existing CSS wisdom and standing on the shoulders of giants is absolutely the way to go for layouts. I’m totally sold on Responsive Design and am planning on ..

It Works For “You”: A User-Centric Guideline To Product Pages - Product pages for e-commerce websites are often rife with ambitions: recreate the brick-and-mortar shopping experience, provide users with every last drop of product information, build a brand persona, establish ..

Why Scrolling is the New Click - Which is better for users, scrolling or clicking? This is the question that designers have to think about when they’re designing page flow. Clicking offers users a menu of links that take them to a new page. Scrolling offers users all the content divided ..

Responsive Data Table Roundup - The idea of the original was to abandon the grid layout of the table and make each cell it’s own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require ..

5 Things Every Mobile Design Should Have - But there are some considerations that you may wish to take when designing for mobile browsers to compensate for some of these little differences. I’ve tried to boil it down to 5 main elements that every mobile site MUST have.

Usability Design for Online Web Forms - As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms.

Building a Responsive, Future-Friendly Web for Everyone - Approaches like responsive design, and the even broader efforts of the future-friendly group, are trying to develop tools and techniques for building adaptable websites.

Media queries and multiple columns - By far the most common use of media queries is to execute CSS based on viewport width (using min-width or max-width). Lately there’s been more talk about using media queries based on height as well.

 

Webdesign in Common, Web Typography, jQuery, Tools, etc.

15 Icon (@font-face) Web Fonts to Improve your User Interfaces - Nowadays web applications have greatly increased and they make extensive use of icons for their user interfaces. Thanks to @font-face rule we should include icons within our web pages using icon web fonts ..

15 top web design and development trends for 2012 - Here are their predictions for the industry over the coming year, and the trends you need to be mindful of in order to succeed.

50 Useful jQuery Plugins to Improve Your HTML Forms - jQuery plugins allow developers to build powerful, functional and user friendly forms. Keeping this convenience in mind, many developers always go for jQuery plugins when it comes to creation of form.

9 Fundamental Mistakes that Smart Website Designers Should Avoid - Everybody makes mistakes, but there are some mistakes that are considered cardinal sins. Smart web designers need to distance themselves from these mistakes as much as possible. This is because; ..

8 Responsive jQuery Slider Plugins - Whether you’re already a pro at creating responsive web sites or your just learning what it’s all about, it’s good to have some scripts handy that you can easily integrate into your site. We all know how popular image and content sliders are now, and for good reason.

Six key principles to design a 404 page - The Internet is an environment where any error is important and sometimes these are severe punished by the users. The richness of the opportunities and the lack of time are the most important factors that cemented these high standards ..

How to Make the Best out of the Fold - The term of “above the fold” comes from the newspaper industry and is used today for both papers and websites. For example, most papers are delivered or displayed folded up, meaning that only the top half of the front page is visible ..

How to use typography in web design - A lot of designers will use typefaces and fonts that they find appealing and won’t think about what goes into the balance of the visual graphics and content that is being displayed. The relationship between the elements plays a very important role in successful typography.

Using webfonts to insert characters or symbols in a website - this article is only about adding single characters to your existing text on a website. So why might this be necessary? Here are some examples …

PHP script to find malicious code on a hacked server - When hackers get into a server, they often modify files to inject malicious code, install PHP backdoor scripts, or modify .htaccess to redirect requests to another site. There are several methods of finding the changes they made.

Landing Pages Guide 101: Create Landing Pages that Work - In this article you will be taken through each important step in order to create a successful, landing page that converts visitors into customers, I will share the biggest takeaways here and point you to the right articles and tools

 

 

Graphic Design, Brand Identity, Typography, Print Design, etc.

The Emotional Impact of Color - Designing a new logo for a brand, requires careful consideration of the competitive set, content and how people perceive visual information. After shape, color is the most powerful element in creating brand recognition.

Top 5 Points to Consider When Designing Book Covers - Judging a book by its cover is something that everybody does. As design is highly subjective, there is no clear solution to create the perfect book cover. Here are five concepts you need to consider when designing an ..

How to Become a Better Logo Designer - Being a logo designer is awesome; it’s fabulous to know that your (apparently) ignorable work may influence the business of your client in a tremendous manner. In order to survive, a logo designer should stay up-to-date and also must refine his skills.

Shape, Color, Content – The Language of Logos - Before you approve that new logo you’re considering, stop for a moment to consider how people perceive visual information. The content of your logo is third in the sequence of recognition, behind shape and color, because the brain takes ..

A Guide To The Psychology Of Color In Logo Design - Color can be an important visual communications device that can intimately affect the psychology of the observer on a subconscious level. It can help determine a consumer’s relationship with a given product or company and..

4 Key Points to Focus on for a Memorable Logo - A logo is a graphical representation for your company and is a combination of text, color and symbols. Logos can also carry as additional tagline which defines the company and speaks about its intentions.

How To Create Visual Tension in Your Designs - Tension and release is a very common pattern in all the arts. Visual tension creates visual interest. It’s more dynamic and leads to more complex relationships between elements. We can use this to evoke feelings of energy, vitality, forcefulness, ..

When the Photo Doesn’t Fit the Space: Tips and Tricks for Making It Work - Today we’ll go over some tricks of the trade and teach you how to cope with images that don’t fit where you need them to. The next time you run into a problem, you’ll be ready!

Best Trends in Modern Typography (and How It Is Different)  - There are some fantastic new trends in the works, and these were sparked to help design a better, more modern flair to an old practice.

Six Gestalt Principles In Web Design - Gestalt principles are successfully applied in the field of web design, explaining the way an image is perceived from a visual point of view. As an web designer, you should know that Gestalt principles can tell people how visual objects are perceived ..

 

Blogging, Social Media, Writing, Content Strategy, etc.

9 FB WordPress Plugins That You Should Use - I have gathered 9 interesting WordPress Plugins for you to use.  Now, probably you have seen a lot of crappy FB WordPress Plugins until now, well I strived to make a list of the most useful ones.

How to Measure Blog Marketing Performance - Online marketing is an inseparable part of modern business and blog marketing is the core around which online marketing evolves. However, the most pertinent factor that comes into play is evaluating the efficacy of blog marketing.

The Social Signals That Are Important For SEO - By now, you probably already know that social media affects SEO. The ultimate goal of the search engines is to provide users with results that are highly relevant to their interests. By incorporating social signals into their algorithms, ..

10 Things You Must Do Before A New Site Or Blog Launch - Launching a new website can be an intense experience. Preparing yourself for the launch and making sure you’ve got all your ducks in a row will ensure that your launch is successful. Today, I want to discuss with you ..

10 excellent SEO plug-ins for every blog - SEO can be a very daunting task.  With the help of plug-ins, this daunting task becomes a piece of cake.  As we all know search engine optimization is extremely important for any website or blog in order to be found on search engines like ..

How To Make Your Blog Ready For 2012 - The appearance of your blog is arguably the thing that is most important to get right. Content is king but appearance is the king’s mother – if the appearance has a big problem then nobody will discover the king has been born.

Valuable tips to increase blog traffic -  there are hundreds of thousands of blogs that go unnoticed with any significant user-base and traffic. With no visitors, the blog is bound to fail miserably without reaching to the targets. In this write up, we discuss some valuable tips to increase blog traffic

 

WordPress

How to Build a WordPress MultiLingual Site using WPML - Is WordPress capable of handling the intricacies of Multilingual websites? The short answer is a resounding YES! Let’s explore how to build a multilingual theme and website together in this guide.

How to Get the Current URL in WordPress -  I was wandering around the web for the perfect solution to retrieve the current URL in a WordPress theme or plugin. I found a bunch of solutions for PHP, but not directly related to WordPress so I thought there has to be an easier way, ..

10+ WordPress Tips and Tutorials that Will Make You a Pro - Why wordpress is one of the most popular CMS and blogging platform around? I think it because wordpress is free, customizable and have a great support by community or other developers. And as wordpress users, ..

Head to Head: Yoast’s WordPress SEO vs All in One SEO Pack - There are currently two very popular WordPress plugins to help you strengthen your site’s search engine friendliness. Yoast’s WordPress SEO Plugin and the Grand old Daddy of SEO plugins, All in One SEO Pack.

The WordPress Gallery Shortcode: A Comprehensive Overview - The builtin shortcode for WordPress is pretty handy with all sorts of options to set up a custom gallery. It’s not perfect, as we saw in a screen earlier, but it works very well.

WordPress hack: How to build a network navigation menu - Multisites networks are definitely a great feature introduced in WP 3.0+. In this recipe, you’re going to learn how you can create a “network” navigation menu, which list all sites on your network.

10 Responsive WordPress Plugins to Complement Your Theme - We’ve put together a list of some of the best responsive plugins for WordPress, including sliders, images, videos, layouts and more. Make sure to bookmark your favorites.

HTML & CSS Blog Layout – Theme Implementation for WordPress - In this tutorial, I’ll teach you how to adapt a simple HTML blog layout into a WordPress theme. First, we’ll need to adapt our previous static version structure to the new WordPress theme conventions.

Reusable Custom Meta Boxes Part 3: Extra Fields – Our custom meta box template tutorial series, we learned how to create a field array to loop through and create a custom meta box with your standard fields. Now let’s throw in a bit of JavaScript for some fancy, but highly useful fields.

Tips to Make WordPress Website more Secured from Hackers - Web applications are not perfect. They can be easily manipulated and misused. A technology is nothing but just a tool, and it all depends on the minds operating these tools.

WordPress: Improved the_excerpt() function - The the_excerpt() function is useful, but it’s far from being perfect. Showcasing an improved the_excerpt() function, which display an excerpt which is not longer than a predetermined length and doesn’t cut off in mid-sentence.

How to Customize the WordPress 3.3 Toolbar - You can make the WordPress interface easier for clients by removing unnecessary menus, widgets and meta boxes. However, in WordPress 3.3, the admin and header bars have been merged to create a single toolbar.

WordPress Tutorial : A unique dynamic sidebar for each page – or not! - sidebars that the client *may* or *may not* need to customize on every page. Some pages don’t require a unique sidebar, some do. The client should have the option of a cascading sidebar.

Shortcode to Encode Email in WordPress Posts - safely display your email if you’re using WordPress. You can take advantage of a function called antispambot() to display emails addresses anywhere on your site.

 

Search Engine Optimalization, Rankings, Analytics, Loadtime, etc.

Your 2012 SEO New Year’s Resolutions: Getting Your SEO Campaign On The Right Track - I’ve literally lost track of the number of posts which have emerged stating what’s going to be big in SEO in 2012, the answer is simple: pretty much the same stuff as was “big” in 2011.

How to use Google Analytics to Drive more Traffic to Your Website - “How do I analyze these Google Analytics reports in order to actually make impactful changes to my website?”

SEO 101: 7 Reasons Why Your Keywords Matter – An online business that ignores keywords and search phrases will surely struggle. Why? Because the internet is based on information. That information is sorted and organized based on the topic or keywords that best describe ..

Web design tips to enhance SEO - Many Web developers and Webmasters have some confusion or trepidation over how best to write their HTML for search engine optimization (SEO). Luckily, writing HTML that cooperates well with search engines is not too hard at all.