Web Development

Coding and web design: best practices, resources. Covers HTML, CSS, WordPress, quality/integrity testing tools and more.

"Old, stale site design scares people off. So do sites that load slowly. And sites that are cluttered with irrelevant ads. And sites that don’t work properly on mobile devices."

- Sonia Simone on Copyblogger, Apr 5, 2015.

Developer Tools

Code Generation/Repair

• Dan's Tools has powerful dev tools, including .htaccess generator
• Prefixing CSS for compatibility: http://pleeease.io/play/
• Remembering what to prefix: http://shouldiprefix.com
• Generating compatible CSS3: http://css3generator.com/
• CSS centering code generator: http://howtocenterincss.com/
• Pattern designer/generator: http://www.patternify.com/
• CSS3 gradient generator: http://www.colorzilla.com/gradient-editor/

Testing/Validation Tools

• Domain Routing checker: where is my domain routing? (DNS-MX, DNS-A records)
• Cross Browser Testing: does what it says on the tin
• Screenfly: resize window, test site in various orientations/resolutions!
• W3 Validator to check code integrity!
• Check responsive display (Studiopress service)
• Google's Mobile Friendly Test
• Facebook's Debugger to see how content displays when shared
• KnowEm Social Media Optimizer to test for various social media!
• Favicon checker (check) at Real Favicon Generator

Resources

• Full HTML reference table: http://htmlreference.io
• CSS hover effect collection: http://ianlunn.github.io/Hover/
• CSS3 gradient collection: https://webgradients.com
• Great CSS3 flex cheat sheet | Another one
• Flexbox Toolbox: collection of advice/info/tools for CSS flexbox
• TinyPNG compresses PNG and JPG images/files
• Device Metrics at Google - resolutions & detailed info about many mobile devices!
• All-you-need introduction/tutorial for CSS3 animations (W3Schools)
• Migrate a site from a multisite network
• How to set up a multilingual / multi-language WordPress site
• Article: Introduction to responsive web design
• Article: Adaptive vs. Responsive Design
• Article: CSS transitions & transforms (all about animation)
• Free eBook: Creativity and Consistency in UI Design
• Free eBook: How to code in HTML5 and CSS3
• Reference for CSS selectors / how to combine them!

Best Practices

• Article: Avoid sliders! They slow things down and distract, have no additional value
• Article: Avoid centered logos in navigation. They confuse users more than they help

Design Research & Inspiration

• Research:
  • Go to Yelp and check pages from my target industry
• Best websites built with Beaver Builder: Beaver Bunch
• Design inspiration: Awwwards | Abduzeedo | lapa.ninja | Behance | Designspiration
• Large collection of web site templates: www.hitectemplates.com
• Parallax pages: dustn | redline | FSBOicity | Les Productions Wild Box
• More inspiring web pages: Numix | Couchsurfing | Mark Manson | Gary Vaynerchuk | Policymic
• Using photography to great effect: Kimberly and the Dreamtime | Radeberger | DB Karriere
• Great use of overlay image: Paquin Entertainment
• Additional Brilliant Homepage Examples
• Blog with full-size cover image
• Pure CSS hover menus: www.prowebdesign.ro

Layout Creation

• Free icon database: flaticon
• 50 free social media icon sets
• Annarita Tranfici's guide to responsive web design (Jan-Mar, 2013)
• Article about full-page background images (aka full-screen)
• Full-screen background fix for iOS (iPhone, iPad) (also here)

WordPress Plugins

• Page Builder: Beaver Builder
  • Limited free "lite" version available
  • Full version highly recommended
  • Extensions: Ultimate Addons | PowerPack
  • Additional plugins by Brainstorm Force
• Duplicator for posts, pages, events, galleries etc...
  • Duplicate Post Page Menu & Custom Post Type also seems good
• Galleries: Foo Gallery
• Make anything sticky on scroll: Sticky Menu (Or Anything)
• Multi-language (multilingual/for translations): Polylang
• Security: Wordfence Security | Loginizer
• Highly customizable topbar!
• Slide-out sidebar: free | paid: BNE Flyouts (comes recommended)
• Personalized short URLs: Pretty Link plugin
• Backups: All-in-One WP Migration
• SEO: SEO by Yoast
• Favicon Generator: Real Favicon Generator
• Improved Text Editor: TinyMCE Advanced
• Tags and categories for pages: Post Tags and Categories for Pages
• Contact Form: Contact Form 7
• Syntax highlighters:
  • HTML Editor Syntax Highlighter(very good, fast and simple)
  • WP Editor: updated often, highly popular. Works on theme, plugin and post/page text editors. Highly customizable.
• Compress images while uploading: WP Smush | EWWW Image Optimizer
• Feature-rich tables: TablePress
• Lightbox implementation: Easy FancyBox
• Add custom code (e.g. PHP): Code Snippets

Image/Content Sliders

Generally, you're advised not to use content carousels/sliders.

• BEST ONE: Smart Slider 3
• Easy Media Gallery Pro - beautiful & fast for galleries & more (recommended by Social Media Examiner)
• Free: parallax slider | another one | responsive image slider | Cyclone Slider 2

Using WP Super Cache

(article on Smart Blogger)

• Firstly, set "Caching on" in Settings => WP Super Cache
• Advanced settings:
  • Don't cache for known users (that way I can still see my changes in real-time)
  • Compress pages (GZIP) (careful: this could cause func issues!)
  • 304 Not Modified browser caching (leverages browser caching)
  • Pages with forms might have issues!
    • Test this using incognito mode
    • In "Accepted Filenames & Rejected URIs", paste slugs of affected pages (slug is in address bar)
• Consider using a CDN (tutorial here)
• To push changes live, clear cache in "Contents" tab

IE Compatibility Solutions

• PIE (Progressive Internet Explorer)
  • StackOverflow re. opaque bg
  • StackOverflow re. PIE
  • PIE Website
  • Include behavior: url(PIE.htc);

CSS/Coding Solutions

• Generate content through CSS using content & attr
• Stacking context/solutions: jsfiddle | explanation
• How to use any font: Google Fonts / Typekit / manual
• CSS3 :target tutorial including an awesome gallery! (z-index trick)
• Awesome things to do with pseudo elements! (:before, :after)
• Stripes in CSS (incl. image overlays): https://css-tricks.com/stripes-css/
• Cycling (rotating) background images: discussion on stackoverflow
• Flexbox guide
  • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
  • For old browsers: https://css-tricks.com/using-flexbox/
• Vertically centered horizontal lines before/after element
  • http://www.santaclaradesign.com/
  • Examples at StackOverflow
  • How to do it: SOLUTION!

Animations

• Awwwards article for basics/introduction
• Button hovering: hover.css
• Great collection: animate.css

CSS Properties

• box-sizing property to control how padding/margin affects box size

Fiddles

• Experimenting with hover popups (:hover, :target)