.. Your Daily Design Dosis

Tweet Parade (no.39 Sep 2012)

| Comments Off

It’s Saturday  .. 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.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Three JavaScript snippets for your web design toolkit – This post includes a short list of three useful JavaScript programming snippets that I have utilized to solve common issues that crop up when special functionality is requested for websites.

10 Very Useful PHP Tutorials For Developers – Today we have decided to share some of the Best PHP Tutorials ranging from beginner to advance. PHP is the most popular and very well-known server side scripting language and most ordinarily used for programming on the web.

Selectors, Animation, and AJAX – jQuery Tutorial And Examples (Part Two)- For part two of our jQuery series, we will have a look at some special selectors, the animation method, and simple AJAX calls.

7 HTML5 features that you may not know about – HTML5 has been a hot topic recently. Although its been around for a while now, I still find myself coming across features that I didn’t know about. Here’s a few that I thought I’d share with you.

The Geography of HTML5 Security – The new standard also pushes security boundaries. Sites won’t immediately benefit just by adding a <!doctype html> declaration to their pages. Instead, they can improve security by adopting features that control how the ..

CSS3 Conditional Statements – What you may not know however is the CSS Conditional Statement Specification also talks about two other CSS conditional statements. Currently these two features are only supported in Firefox (6.0 for @document and 17.0 for @supports)

Easy Form Validation using HTML5 – Writing validation logic using JavaScript in a HTML form is not an easy way. We all have seen it in HTML4 but what’s new in HTML5? Will it provide us easy way to validate the form with writing a small piece of code only?

A nail in the HTML5 coffin? – This makes a cross-platform tool that allows one to hedge their bets while the dust settles on the tablet market look all the more compelling. Until the CEO of Facebook spoke recently, that tool looked like HTML5.

When pages are not paper: the designer’s guide to layout code – The fundamentals of web layout are easy to grasp. Like design itself, understanding the principles will help any designer produce better designs and expedite the process of building a site.

Default CSS Display Values for Different HTML Elements – All HTML-elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.

5 HTML5 APIs You Didn’t Know Existed –  Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the smaller, useful APIs available to us.

SEO and Web Development: 5 HTML5 Tags for SEO – How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

Negating CSS Rules With :not – Until very recently, it’s been impossible to easily create a rule that says, “apply these values to everything but this element.” CSS3 introduces the :not selector, which does exactly that.

Code a Mobile-Friendly HTML5 Video Stream with Multiple Sources – In this tutorial I want to explore how we can build a very simple webpage for embedding mobile-responsive HTML5 video – one with standard HTML5 video and the other using Video.js.

Use inherit to reduce repetition of CSS property values – Every now and then you will find yourself having to repeat the same value for a particular property in several CSS rules. But there are some situations when you can use the “inherit” value to avoid repeating yourself.

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

Trends In Mobile Design- Mobile designs both typical and popular are used for mobile website application. These designs follow simplicity, social media, coding tips and many other aspects which become increasingly relevant with changing mobile user perceptions.

Web accessibility is a mindset not a checklist – Web accessibility is a principle that must be adopted by every person in an organisation. This means that responsibility for web accessibility does not lie with a single person but rather becomes part and parcel of ..

User Experience and Uncovering Habits to Change Behavior – When you think about some of the great technology solutions of the last 20 years, many share a common ground: they create a habit. When technology has created a habit in people, a person’s use of a product is automatic, without thought.

High resolution images and file size – An assumption that a lot of web developers have is that retinafying images by doubling their resolution results in files that are four times larger, .. it hardly scales linearly with the amount of pixels in the image.

9 Easy Steps Towards Designing an iPhone App- In this article we will be discussing a few tips to build an iPhone app and a few mistakes that one should not commit while building an iPhone app.

Server-Side Device Detection: History, Benefits And How-To – The expansion of the Web from the PC to devices such as mobile phones, tablets and TVs demands a new approach to publishing content. Your customers are now interacting with your website on countless different devices.

Don’t confuse design testing with device testing – I think there’s a very big difference between device testing and design testing. Let me clarify that. When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.

Mo’ Pixels Mo’ Problems – Mobile devices are shipping with higher and higher PPI, and desktops and laptops are following the trend as well. There’s no avoiding it: High-pixel-density, or “Retina,” displays are now becoming mainstream—and, as you’d expect, our websites are beginning to look a little fuzzy in their backlit glory.

Designing for Mobile, Part 1: Information Architecture – The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements.

5 Reasons Why Responsive Design is Absolutely Worth It –  I know responsive design isn’t a black and white issue. Some sites work for the better when designed to adapt to mobile devices, but some sites just won’t function well or offer the needed functionality when viewed on a mobile device.

Fixing A Broken User Experience – Even if the product you’re working on is brand spanking new, your organization will eventually need to figure out how to unify the whole product experience, either by bringing the old products up to par with the new or by bringing your new efforts in line with existing ones.

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

20 Extra Sharp jQuery Navigation and Menu Bars – I always say that navigation bar is the most important element of a website. That’s because this is the capital of all the interactivity of the user. In today’s we design world, there’s nothing that creates more wow than jQuery.

10 essential features for creating great product pages – Designing product pages is a fine art – sites need to make sure they include enough information to inform the customers’ purchase decision and encourage a sale, while also making sure the page isn’t cluttered and unusable.

Six Expected Web Design Trends in 2013 – The mentioned web design trends are only predictions by some of the experts and along with these we can definitely see a lot of other trends in 2013.

Building Forms That Convert – 6 Things to Keep in Mind – So what makes a web form visually appealing and easy to fill in? There is no direct answer, but a set of best practices that leads to it.

How To Design For Maximum Conversion – Are you looking for maximum conversion from your website?  Well, making sure that you have a site that maximizes conversion is definitely important.

Top 7 Reasons Why Brands Should Have Mobile Friendly Websites – Top trends of the year like the Instagram and Dropbox are popular just becomes of the smartphone devices, thus increasing the importance of mobile friendly websites for brands!

Get The Action You Want On Your Website Using These Four Visual Cues – If you’re not leading your website visitors to take specific actions, they’ll just randomly browse through your pages, look at odd text and icons, then leave without buying anything.

Helpful Resources and Webapps for New Web Developers – It seems every month there are dozens of new applications being released. Developers are constantly working to bridge the gap between open source and open coding standards.

Icon fonts could speed up your page loading time by 14% compared to images – For those of you who don’t know about vector formats, they basically allow you to express graphics in terms of scale independent things like paths and shapes.

10 Free and Awesome Web Design Tools – All web designers need the right web design tools to help with their designs. This is why I put together a list of 10 free and awesome web design tools. Use these design tools to design faster and more effortlessly.

Make a Statement with Type – Font choices can have an impact on how your message is communicated and how people feel about the words on the page. Selecting typefaces for a design project is about much more than just how the letters look.

New jQuery Image Galleries And Sliders That You Must Know About – Modern web design can’t live without these visual enhancements because they show in really simple ways a lot of concise information sliding along the visitors’ screens and they love it.

10 Areas to Review Before Launching Your Website – You can now launch the site. But is it enough? Actually, no! As a designer you need to undergo a complete prelaunch exercise before launching your website.

Useful JavaScript Libraries and jQuery Plugins – If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks ..

Popular tools for website testing – Website testing is an invincible method which is used to test the speed, usability and performance of website. A website must be user friendly with good navigation and have cross browser compatibility.

10 Powerful jQuery Web Typography Plugins – When it comes to web typography there are many options available in CSS3, but it is sometimes a lot easier to make awesome effects with a little help from typography and text effects jQuery plugins.

How To Create A High Converting Landing Page – You need a landing page. Landing pages are targeted specifically the intent and content of your ads. There are 7 main elements to consider when designing your page.

How Sans-Serif Typeface Styles Affect Readability – But new research shows that not all sans-serif typefaces have equal readability. Certain sans-serif typeface styles are easier and faster to read than others. This has dramatic implications on interfaces where reading speed and ease is a matter of life or death.

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

Typography Basics: Understand the Language of Letters – To have an open and successful conversation in your next design meeting, it will help to fully understand the lingo when talking about type. Here’s your primer.

50 ways to design better branding – Designing for digital throws up a host of challenges. Our panel of pro designers share their top tips for mastering truly cross-platform branding.

Create Custom Shapes from Image Selection in Photoshop –  I will show you a quick way to create custom shapes in Photoshop using a selection. All you have to do is make a selection of an object, refine the selection edge, turn to work path and finallydefine custom shape.

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

21 Quick Actions You Can Do Today to Set Your Blog Up for Massive Success – To set your blog up to be a massive success, you have to ruthlessly focus your efforts on things that work, and stop spending precious time on things that don’t.

How to Create, Market and Manage Your Digital Brand – The “physical brand” that is constrained by time and space. Its maintenance is constant and it is something we all do and some are better at it than others.

Why Content Marketing is the New Branding – A brand is a promise. It’s an expectation of an experience. The company and tag line and logo and brand colors only exist to call that experience to mind. Brands can meet that expectation, exceed that expectation …

Seventeen Ways To Improve Your Blog – Case Study – Blogging is tough these days. Its a crowded realm with a staggering amount of people in the game. According to Pingdom, by the end of 2011 there were: 70 million WordPress blogs

How to Use Blogging to Market Your Freelance Business – The following overview and tips should provide you with most, if not all, of the knowledge you need to get started with blogging. Most of the tips are from my own experience.


5 Funky WordPress Snippets to Customize Your Comments – First the phrase was “there’s an app for that”. Now, the prevailing sentiment is “there’s a plugin for that” — which isn’t always a good thing.

7 Lessons Learned from 7 Years of using WordPress – Here’s a few tips for the smooth-running of a WordPress site, most of these are common sense but worth mentioning …

How To: Integrate WordPress with other Popular CMSs –  In this blog post we will look at how you can run another CMS alongside WordPress and integrate it into WordPress as simply as possible. The other CMS may not blend in perfectly but still.

30 Time Saving WordPress Shortcodes – A shortcode is a special tag enclosed with square brackets that will be replaced with different content when actually viewing the post on your WordPress theme. First thing first when creating a shortcode is writing the primary function for it.

A Guide To: WordPress Child Themes Development – In this guide I want to introduce the basic concepts of building a WordPress child theme and why it’s such a good idea.

Better WordPress Captions – The latest WordPress update introduced HTML editing captions, reminding us all that captions are in fact a feature in WordPress. They’ve not exactly been embraced as the über feature we initially hoped for;

How to Deactivate All Plugins When Not Able to Access WP-Admin – There are two methods to disabling your plugins. One requires you to use FTP, and the other requires you to use phpMyAdmin.

5 Best FeedBurner Alternatives For Your WordPress Blog – In late May 2011 Google announced that they would be shutting down the Feedburner API on Oct. 20, 2012. Google has not announced that it will close down the FeedBurner service, although their recent shudown of ..

WordPress Tutorials for Beginners – 25 of the Web’s Best – WordPress makes the web easy for us all. Before, we would have to custom craft HTML to our whim to churn out something that was clunky and difficult on the eyes.

Customizing WordPress Comments – Post comments are an important part of any blog. Comments are the main thing that makes a blog different to a normal website, websites will display information about a subject but don’t normally allow readers to engage with the author.

Custom CSS On Single Posts – One way you can use this tutorial is to create a custom post meta box to style individual single posts differently to the others. We can use the custom meta box to add CSS we want to style the posts differently to the others.

Installing Google Custom Search Engine (CSE) On WordPress Site – If you are not satisfied with the weak funtionality of WordPress’s native search function, here’s an alternative solution. You can use the Custom Search Engine provided by Google itself on your WordPress-based website.

How to Fix the WordPress White Screen of Death –  In this article, we will show you how to fix the WordPress white screen of death by looking at a few possible solutions.

Search Engine Optimalization, Conversions, Analytics, etc.

Small Business Owners – Has Your SEO Changed Post-Penguin? – Now, if you were affected by the recent updates, what has changed in your seo efforts? Are you trying to rank the same website again or are you dumping the domain?

How to Prepare for AuthorRank and Get the Jump on Google- AuthorRank, of course, wouldn’t be a replacement for PageRank, but would be used to inform PageRank, therefore enabling Google to rank high-quality content more appropriately.

SEO Tips for A Better Website –  The social web has brought with it a world of change as is evidence by how we use the internet and how the internet behaves, however the importance of optimizing your website for peak search engine visibility remains the same.

Post-Penguin Anchor Text Linking Guide – The Penguin update negatively impacted sites that were guilty of “SEO over optimization” sending out a message that linking needs to be more natural and less forced.  Does this mean that keyword anchor text linking should be ditched all together?

5 Ways to Improve Your Contact Form Conversion Rate –  The contact form is the place where users come to connect directly with you. Improving the conversion rate of your contact form can mean big things for your business.

6 Simple Tips to Rank High in Google’s Search Engine – Are you creating content that is valuable enough to be linked to? Is your content entertaining, educational, informative or inspiring?

How To Merge UX With SEO – Sometimes SEO and user experience clash, and sometimes they flow together well to create a cohesive whole. To establish a profitable and high-traffic website, each website owner must combine both aspects of marketing to reach and interact with customers.

Finally: An Easy-to-Understand Link Building Plan to Help You Recover from Penguin and Panda – The question for you as a blogger or website owner is this: how do you recover and thrive in this new SEO landscape? What are some of the link-building tactics you should engage to capitalize on these changes?

Understanding SEO Friendly URL Syntax Practices – Poor URL structure is a frequent SEO issue, one that can impair rankings, keep pages out of the search engine indexes, and suck ranking authority from your other pages or even the entire websites.


Navigation Menu With Notifications Using CSS – Navigation menu are quite easy to code, but adding notification badges is what most of us never tried.

How To Create a Clean & Modern CSS Drop-Down Menu – I am going to show you how to create a CSS3 drop down menu using all the latest CSS3 techniques. We will go over how to use border radius, gradients, and box shadows to turn a basic drop down menu into glossy styled navigation.

Create a CSS Flipping Animation – CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything. One CSS effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container.

7 Latest CSS Techniques with Source Code – We always trying to share some great resources/tools among our readers, today we come up with some best and latest techniques of CSS for web designers that make your project more effective and impressive.

11 Cool HTML5 and CSS3 Tutorials – HTML5 has been around for sometime now and we keep seeing crazier things being done for websites, mobile, and online games. In the tutorials below you get a taste of what HTML5 and CSS3 can really do.

Swishy CSS3 navigation – Here’s a simple way to spice up your navigation with just a sprinkle of CSS magic. This technique takes your typical list based navigation and adds a nice rollover effect.

3D Restaurant Menu Concept – A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.

CSS for Twitter-Like Hover Effects – Here’s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on! Twitter uses this effect with their sharing links on a tweet.

Receding Background Modal Boxes – It’s a design pattern for dialog boxes in which the main page fades away and the modal box flies down from above (or up from below). The main page becomes smaller and blurry, making it seem further away ala depth of field in photography.

Freelance, Business and Workflow Related Stuff

How to completely rock your first client meeting – Best news ever! A potential client has scheduled an in-person meeting with you to discuss their needs and how you might be able to help them. (Got a phone conversation?)

How To Become A High-Demand Designer (And Get The Good Clients) – There are two types of designers in this world: those who are in high-demand, and those who aren’t. Most of us start out in the latter category, and, unfortunately, some of us remain there for the duration of our careers.

10 points I always keepin mind while designing – Following these 10 steps allows me to stay on track with multiple projects simultaneously, and allows for a healthier design process overall.

Dealing with Scope Creep in Web Design – Scope creep is a project management term applicable to just about any undertaking in work or life. It results when the magnitude of a project exceeds or creeps past the boundaries of its original goals and objectives.

5 Legal Mistakes to Avoid When Freelancing (In Order of Fatality) – Always keep these 5 points in mind when drafting or reviewing a contract. If there’s something you don’t understand, always ask for explanation and ask a lawyer to check the document out before signing.

Encouraging Better Client Participation In Responsive Design Projects – Over the last few years, someone forgot to tell our bosses and clients, so we’ve been treating responsive design like it’s a design or an implementation problem, whereas in fact it’s as much an issue for business.

F*cking Brilliant, a great Read or just magnificent Tips!

Golden Rule To Internet Security: Change Your Passwords – So before you become a victim of a hack, or lose control of your personal accounts online, do some spring cleaning and change those keys to your gates.

You Already Know How To Use It – In the first television advertisement for the iPad, the narrator intoned, “It’s crazy powerful. It’s magical. You already know how to use it.” This was an astonishing claim. Here was a new, market-defining, revolutionary device, ..

The Web Aesthetic – As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.

Designing With Code – With an increasingly complex array of platforms and screen resolutions, it’s time to embrace the creative capabilities of HTML5 + CSS3 and make development part of the design process.

Stop, Look, Click: Attention-Grabbing Elements in Web Design – There are many ways of how to grab a user’s attention in web design, from the choice of meaningful words to the placement of images that create an emotional response.

 – § -

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


Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

Sorry, comments for this entry are closed at this time.