This is a new portion of web design and development articles, blog posts and resources recently retweeted at @htmlcut. 4 “deaths” and 1 “evil” in the section “Opinions”, 5 extremely valuable articles in “Web Copyright and Legal Issues” (including a real example of dealing with a content theft), a whole bunch of useful examples of HTML5, CSS3 and JS code and many other interesting things – you see, today’s roundup is very informative :).

• Effective Web Design
• Usability
• PSD to HTML, HTML5 & CSS3
• jQuery
• Web Development Tools
• CMS: WordPress, Magento and Others
• Website Management
• Mobile Design and Apps
• Web Projects
• Web Copyright and Legal Issues
• Inpiration and Creativity
• Web Design / Development Education
• Web Design Resources
• Technologies & Trends
• Opinions on Web Design and Development

Effective Web Design

1). 10 Design Features Webmasters Should (Probably) Avoid
http://www.hongkiat.com/blog/design-features-webmasters-should-probably-avoid/
by Rean: “…many webmasters still did not realize what netizens dislike in a website.”

2). 10 things that will annoy the hell out of your Web site visitors
http://www.techrepublic.com/blog/10things/10-things-that-will-annoy-the-hell-out-of-your-web-site-visitors/2523
by Calvin Sun: “Nonexistent instructions regarding case sensitivity; Having to guess at formatting of dates; Misleading Contact Us; etc.”

3). All About Website Sidebars: Content, Design, and Examples
http://www.onextrapixel.com/2011/06/13/all-about-website-sidebars-content-design-and-examples/
by Kayla Knight

4). 10 Tips to Boost Your HTML Forms Performance
http://www.1stwebdesigner.com/design/10-tips-html-forms-performance/
by Rochester Oliveira: “We will be talking about conversion, code, and design, in an easy and practical way.”

5). Signup Form Usability and Design Best Practices
http://speckyboy.com/2011/06/12/signup-form-usability-and-design-best-practices/
by Jake Rocheleau: “Best practices for signup forms have changed dramatically over the past few years.”

6). Designing Effective FAQ Pages
http://sixrevisions.com/user-interface/designing-effective-faq-pages/
by Mohammad Moradi

7). Optimizing Error Pages: Creating Opportunities Out Of Mistakes
http://www.smashingmagazine.com/2011/05/18/optimizing-error-pages-creating-opportunities-out-of-mistakes/
by Daniel Waisberg

8). Good Web content examples and what makes them work
http://www.webdesignerdepot.com/2011/06/good-web-content-examples-and-what-makes-them-work/
by Rick Sloboda

Usability

1). 10 Important UI Design Considerations for Web Apps
http://sixrevisions.com/user-interface/10-important-ui-design-considerations-for-web-apps/
by Marc Gayle: “…it’s easy to forget about them because they’re like condiments – you hardly notice them when they’re there, but if they’re missing, your food just doesn’t taste right.”

2). 10 Steps To A More Usable Ecommerce Website
http://spyrestudios.com/usable-ecommerce-website/
by Tom Walker

3). 13 Must-Know Articles About User Interface Design
http://www.topdesignmag.com/13-must-know-articles-about-user-interface-design/
by Bogdan

PSD to HTML, HTML5 & CSS3

1). Creating HTML Emails : An Overview for Web Designers
http://sixrevisions.com/web_design/creating-html-emails/
by Cameron Chapman: “…once you understand and accept that HTML email is a fickle, inconsistent, and bug-prone medium, it’s possible to use it to great effect in marketing.”

2). Media Queries in HTML Emails
http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails
by Michelle Klann: “…media queries allow you to control the layout of your email based on the mobile device that is being used to open it.”

3). 20 Amazing Examples of Using Media Queries for Responsive Web Design
http://designshack.co.uk/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design
by Joshua Johnson

4). CSS3 regions: Rich page layout with HTML and CSS3
http://www.adobe.com/devnet/html5/articles/css3-regions.html
by Arno Gourdol: “Threading content, Arbitrarily shaped containers, Arbitrarily shaped exclusions, Region styling.”

5). Mastering CSS Reflections in Webkit
http://designshack.co.uk/articles/css/mastering-css-reflections-in-webkit/
by Joshua Johnson: “The box-reflect property is just one of many awesome new CSS3 effects that Webkit brings to the table. Unfortunately, it’s not the easiest to use.”

6). A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
http://css-tricks.com/pseudo-element-roundup/
By Chris Coyier: “They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.”

7). Amazing CSS3 techniques you should know
http://www.catswhocode.com/blog/amazing-css3-techniques-you-should-know
by Jean-Baptiste Jung: “Color animate any shape; Adaptable layout using CSS3 media queries; Clipping text; Full browser width bars; Image slider with CSS3 transitions; Flared borders.”

8). Convert 1st Ideas from PSD to HTML [Very Detailed]
http://www.1stwebdesigner.com/css/convert-1st-ideas-psd-to-html/
by Ahmad Hania

9). HTML5 does NOT allow ‘self-closing’ tags …
http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/
by Tiffany B. Brown

10). CSS3 Gradients in IE10 Platform Preview 1
http://blogs.msdn.com/b/ie/archive/2011/05/04/css3-gradients-in-ie10-platform-preview-1.aspx
ieblog

11). A better way to deal with Internet Explorer conditional styles
http://www.leemunroe.com/ie-conditional-css-styles/
by Lee Munroe

jQuery

1). Javascript Frameworks and jQuery (Infographic)
http://www.webappers.com/2011/06/14/javascript-frameworks-and-jquery-infographic/
by Ray Cheung: “…the comparison of numbers among the most popular Javascript frameworks and web applications developed by those frameworks.”

2). The 11 JavaScript Mistakes you’re Making
http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making/
by Andrew Burgess

3). How To Create a Stylish Content Slider using CSS3 & jQuery
http://spyrestudios.com/how-to-create-a-stylish-content-slider-using-css3-jquery/
by Eric Hoffman

4). 15 Great jQuery Plugins For Better Table Manipulation
http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/
by Dicky

5). How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/
by Cedric Ruiz

6). 17 Fresh and Functional jQuery Plugins You will Love
http://designbeep.com/2011/06/02/17-fresh-and-functional-jquery-plugins-you-will-love/
by Arshad Cini: “Visual LightBox; 360 Panorama Viewer; WYSIWYG Editor; etc.”

Web Development Tools

1). 15 Handy HTML5/CSS3 Frameworks For Web Developers
http://www.splashnology.com/article/15-handy-html5css3-frameworks-for-web-developers/994/
by AndrewG

2). Useful HTML-, CSS- and JavaScript Tools and Libraries
http://coding.smashingmagazine.com/2011/06/10/useful-html-css-and-javascript-tools-and-libraries/
by Smashing Editorial: “Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master.”

3). Getting Started Using HTML5 Boilerplate
http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx
by Dan Wahlin: “…there are a few sites available that greatly simplify the process of getting started building HTML5 websites and offer some excellent ‘boilerplate’ code that can help both new and experienced Web developers. One of the best ones out there is called HTML5 Boilerplate.”

4). LESS Is More: Make Your CSS Coding Easier with LESS
http://www.elated.com/articles/less-is-more-make-your-css-coding-easier-with-less/
by Matt Doyle: “…CSS stylesheets are becoming longer, more complex, and harder to manage… For this reason, various dynamic stylesheet languages are starting to spring up. These allow you to write your CSS rules using a more flexible, powerful language that is then turned into regular CSS for the browser to interpret.”

5). 10 Really Awesome CSS Generators
http://www.aoclarkejr.com/10-really-awesome-css-generators.html
by AJ Clarke

CMS: WordPress, Magento and Others

1). 150 Most Wanted WordPress Tips, Tricks, and Hacks
http://designmodo.com/wordpress-tips-tricks-hacks/
by Adrian

2). 22 Most Inspirational Magento Based E-Commerce Store
http://magento-australia.tumblr.com/post/809826302/22-most-inspirational-magento-based-e-commerce-store
Magento Australia

3). 30 Outstanding Ecommerce Websites
http://vandelaydesign.com/blog/galleries/ecommerce-sites/
“Ecommerce websites have a reputation for being poorly designed or uninteresting, but of course that is not the case with all ecommerce designs.”

Website Management

1). 10 useful .htaccess snippets to have in your toolbox
http://www.catswhocode.com/blog/10-useful-htaccess-snippets-to-have-in-your-toolbox
by Jean-Baptiste Jung: “.htaccess, the file which control the Apache webserver, is very useful and allows you to do a lot of things.”

2). 18 Website Speed and Performance Checking Tools
http://www.hongkiat.com/blog/website-speed-and-performance-check-tools/
by Dainis

Mobile Design and Apps

1). W3C mobileOK Checker
http://validator.w3.org/mobile/

2). Analysis of mobile development approaches
http://www.techrepublic.com/blog/programming-and-development/analysis-of-mobile-development-approaches/4224
by Justin James: “Native, Mobile Web, Cross-platform, and Native front end, Web service backend.”

3). HTML5 vs Native: The Mobile App Debate
http://www.html5rocks.com/en/mobile/nativedebate.html
by Michael Mahemoff: “…developers are turning to HTML5 as a “write one, run many” solution. But is it really viable?”

4). Small Screens Come First: Build for 320 And Up
http://www.sitepoint.com/small-screens-come-first-build-for-320-and-up/
by Raena Jackson Armitage: “…design for mobile first.”

5). 13 Helpful Mobile Web Design Tools & Resources
http://thenextweb.com/dd/2011/05/31/13-helpful-mobile-web-design-tools-resources/
by Joel Falconer

Web Projects

1). A Comprehensive Website Planning Guide
http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/
by Ben Seigel: “…a common problem with many Web projects: failure to plan.”

2). Wireframing and getting the most out of it from a designers perspective
http://www.designer-daily.com/wireframing-and-getting-the-most-out-of-it-from-a-designers-perspective-16207
by Liz Tran

3). Why You Should Build A Sitemap Before Designing Your Site
http://blog.kissmetrics.com/build-a-sitemap/
by Cameron Chapman

Web Copyright and Legal Issues

1). Understanding Copyright And Licenses
http://www.smashingmagazine.com/2011/06/14/understanding-copyright-and-licenses/
by David Bushell: “For professionals, understanding the limitations of a license is critical.”

2). Small firms warned on web image copyright
http://www.nebusiness.co.uk/small-business/small-business-news/2011/06/07/small-firms-warned-on-web-image-copyright-51140-28829807/
by Karen Dent: “SMALL businesses are being urged to check who owns the images they want to use on their websites.”

3). Copyright Myths and ‘Original’ Design
http://creativeoverflow.net/copyright-myths-and-original-design/
by Joel Falconer: “You Can’t Copyright an Idea; Copyright Doesn’t Need to be Registered; Poor Man’s Copyright? Freelance Work Doesn’t Remain Your Property.”

4). Business Website Content Copyright: How to Stop Content Theft
http://www.noobpreneur.com/2011/04/29/business-website-content-copyright-how-to-stop-content-theft/
by Noobpreneur

5). Personal Experience to: Dealing with Online Content Theft
http://www.hongkiat.com/blog/dealing-with-online-content-theft/
By Darren Stevens

6). How to Fight Plagiarism – Tips and Tools
http://www.1stwebdesigner.com/design/fight-plagiarism-tips-tools/
by Rean John Uehara (@ueharataichou): “What Plagiarism is. How do you Fight Plagiarism? – Passive, Aggressive. Things that are commonly stolen: Articles, Bandwidth via hotlinking, Design, Idea, Music – How to Deal with that. TOOLS and Services.”

Inpiration and Creativity

1). 30 Inspiring “About Me” Pages
http://sixrevisions.com/design-showcase-inspiration/30-inspiring-about-me-pages/
by Stephanie Hamilton

2). 25 Inspiring Examples of Sign-Up Pages
http://www.webdesignerdepot.com/2009/07/25-inspiring-examples-of-sign-up-pages/
by Liz Fulghum

3). 25 Entertaining 404 Error Pages to Enjoy
http://djdesignerlab.com/2011/05/17/25-entertaining-404-error-pages-to-enjoy/
by Dibakar

4). 21 Excellent Examples of Sliders in Web Design
http://webdesignledger.com/inspiration/21-excellent-examples-of-sliders-in-web-design
by Gisele Muller

Web Design / Development Education

1). If you want to innovate like Da Vinci, education is overrated
http://www.techrepublic.com/blog/hiner/if-you-want-to-innovate-like-da-vinci-education-is-overrated/8383
By Jason Hiner: “Da Vinci’s example helps justify Peter Thiel’s radical 20 Under 20 fellowship for college dropouts. See why, and the big caveat.”

2). Long Live the Redesign
http://www.getfinch.com/finch/entry/long-live-the-redesign/
By Francisco Inchauste: “Good Designers Redesign, Great Designers Realign (Cameron Moll)”

3). Why clean code is more important than efficient code
http://www.techrepublic.com/blog/programming-and-development/why-clean-code-is-more-important-than-efficient-code/4284
by Chad Perrin: “As computing resources continue to grow, efficiency falls further behind another concern when writing code, though. That concern is the cleanness of the code itself.”

4). Why developers cannot afford to ignore design
http://www.webdesignerdepot.com/2011/06/why-developers-cannot-afford-to-ignore-design/
by C Dain Miller: “Developers often sweep design under the rug in order to be able to learn the intricacies of PHP and MySQL.”

Web Design Resources

1). Thinking Web: Voices of the Community
http://blogs.sitepoint.com/thinking-web-voices-of-the-community/
by Sarah Hawk: “The digital book is free to download. Chapters: Anatomy of a Website; Designing in the Dark and Everything Must Go (web accessibility); Going Freelance; Successful PSD to HTML Freelancing; Write Email Markup That Doesn’t Explode in the Inbox; Make Your Website Stand Out from the Crowd; Information Organization and the Web; Using Vector Graphics to Build a Noughts & Crosses Game; Efficient Actionscript; Databases : The Basic Concepts; The Iceberg of TCP/IP.”

2). 30 Handy Cheat Sheets and Reference Guides for Web Professionals
http://www.webdesignerdepot.com/2009/07/30-handy-cheat-sheets-and-reference-guides-for-web-professionals/
by Kayla Knight: “Usability checklist; Browser compatibility table; Web standards checklist; SEO cheat sheet; Mixing typefaces (typography combination); WordPress help sheet; JavaScript cheat sheet; Regular expressions cheat sheet; mod_rewrite Cheat sheet; etc.”

3). Must Read Links for Web Designers and Developers – Volume 7
http://www.testking.com/techking/roundups/must-read-links-for-web-designers-and-developers-%E2%80%93-volume-7/
by Andy Crofford

4). 34 cheat sheets for web designers and developers
http://www.webanddesigners.com/34-cheat-sheets-for-web-designers-and-developers/
by WAD: “WordPress, jQuery, PHP, Photoshop, CSS, Color, HTML, Fonts, Adobe, Mod_rewrite and htaccess.”

5). 45+ Useful Yet Free eBooks For Designers And Developers
http://www.smashingapps.com/2011/06/02/45-useful-yet-free-ebooks-for-designers-and-developers.html
by AN Jay

6). The ultimate HTML5 resource guide
http://www.webdesignerdepot.com/2011/06/the-ultimate-html5-resource-guide/
by Cameron Chapman

7). Useful and Practical CSS Tips and Tricks for Web Designers and Developers
http://www.tutorialspalace.com/2011/05/useful-and-practical-css-tips-and-tricks-for-web-designers-and-developers/
by Muhammad Khizar: “CSS-Based tables; Image floats without the text wrap; Dynamic piechart; IE-only stylesheet; Figures & captions; Consistent base font size; etc.”

8). Fresh and Useful CSS3 Tutorials
http://www.designingmall.com/2011/06/fresh-css3-tutorials/
“Drop-down menu with integrated forms; 3d ribbons; Multiple backgrounds with CSS3; 3D text; Buttons; Overlays with CSS3; Drop-Down menu; etc.”

Technologies & Trends

1). Hot Trends in Web Development
http://www.testking.com/techking/web-design/hot-trends-in-web-development/
by Andy Crofford: “CSS3; Server-side JavaScript; Parallax scrolling; Lifestreaming; Touch screen friendly designs; Better security; Photographic backgrounds; Mobile commerce.”

2). JavaScript creator talks about the future
http://www.i-programmer.info/news/98-languages/2395-javascript-creator-talks-about-the-future.html
by Ian Elliot: “CoffeScript.”

3). AXR: The web, done right
http://axr.vg
“AXR stands for Arbitrary XML Rendering. Its aim is to provide a better alternative to HTML+CSS.”

4). Future Trends: Are Browsers Becoming a Thing of the Past?
http://webdesign.tutsplus.com/articles/industry-trends/future-trends-are-browsers-becoming-a-thing-of-the-past/
by Tom Green: “Though HTML 5 may be all the rage with the ‘cool kids’ there is a simple fact of life that is being overlooked by these HTML 5 Fanboyz: There are a few hundred thousand apps.”

5). Web Browser Market Share – Should you still support IE6?
http://blogwebdesigner.com/web-browser-market-share-should-you-still-support-ie6-3212
by Kirk Maxi

Opinions on Web Design and Development

1). Is Web Design (As We Know It) Dying?
http://webdesign.tutsplus.com/articles/industry-trends/is-web-design-as-we-know-it-dying/
by Connor Turnbull: “The introduction of new standards, new mediums and millions of new web designers means that the face of our humble industry has changed… dramatically… However, the biggest change to traditional web designers has arrived only in the past year.”

2). The PC (As We Know It) Is Dead
http://www.businessnewsdaily.com/apple-pc-is-dead-1378/
by Chad Brooks

3). Is HTML5 Killing Adobe’s Creative Suite, Flash?
http://www.ibtimes.com/articles/160673/20110610/adobe-flash-html5-creative-suite-cs-cs5-5-photoshop-acrobat-indesign-cs3.htm
by IB Times Staff Reporter

4). Silverlight is dead. Long live HTML 5
http://jamesmckay.net/2011/06/silverlight-is-dead-long-live-html-5/
by James McKay

5). Is Photoshop Evil? Video Interview With Mark Heaps
http://psd.tutsplus.com/articles/news/interview-mark-heaps/
by Grant Friedman: “…whether or not Photoshop is an evil tool, whether or not it is better to be a ‘jack of all trades’ or a specialist, should you always charge for your work, and much more.”