Whether you’re building your first website or re-designing an existing one for your organization, this all-in-one guide will get you started with tools and resources for creating today’s modern websites.

Website Tools – Content Management Systems

There are many tools available to today’s website designers ranging from simple html to robust content management systems. These CMS systems all have the ability to create, store, and display large quantities of information as well as syndicate content throughout the your website and beyond.

Articles & Resources

1. Top 12 Free Content Management Systems
2. Top 10 Most Usable Content Management Systems
3. Examples of Libraries Using Content Management Systems

 

Tools

4. Drupal – This popular application is an open source content management platform powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world.
5. WordPress – This free open-source content management system and blogging platform has become one of the most used software products for designing websites with over 60 million installations.  Both the iLibrarian blog and my professional website are powered by WordPress.
6. Joomla – This is also a free and very popular open source content management system with over 35 million dowloads to date.
7. Expression Engine – This Content Delivery Platform,has been around for over a decade and this popular content management system powers sites such as Disney, Apple, and Adobe.  It’s built on an open source PHP framework.

 

Information Design & Navigation

Web users spend an average of 8–10 seconds and three clicks on your Web site looking for what they need before they get frustrated and click away. Whether you are developing a new Web site or redesigning an existing one, it is imperative to determine an intuitive and usable navigational structure and taxonomy for your user community.  These articles and tools will help you do just that.

Articles & Resources

8. Guide to Website Navigation Design Patterns
9. Do You Make These 7 Website Navigation Design Mistakes
10. 50+ Gorgeous Navigation Menus
11. 21 Examples of Excellent Navigation Menus in Web Design

 

Tools – Boilerplates

12. HTML5 Boilerplate – A boilerplate template for HTML5 apps or sites.  Comes with optimized Google Analytics snippet; placeholder touch-device icons; and docs covering dozens of extra tips and tricks as well as jQuery and Modernizr libraries.
13. 960 Grid – The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
14. Bootstrap – A sleek, intuitive, and powerful front-end framework for faster and easier web development. Includes responsive CSS as well.
15. Less Framework 4 – A CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
16. Foundation – The most advanced responsive front-end framework in the world – and it’s free!

 

Graphic Design

Graphic designers need to think about things like color theory and usage, optimal image placement, layout design and much more.  These articles and tools on graphic design theory will help you get a handle on how you can best design an aesthetically pleasing website.

Articles & Resources

17. 50 Totally Free Lessons in Graphic Design Theory
18. Graphic Design Theory: 50 Resources and Articles
19. 20 Vital Techniques & Best Practices For Effective Web Design

 

Tools

20. Adobe Photoshop – One of the most popular graphics editing software programs on the market, Adobe Photoshop enables you to do just about anything with images and has a vast array of tools for creating graphics.
21. Gimp – (GNU Image Manipulation Program) – This is a free open source alternative to Adobe Photoshop.  Similar to Photoshop, it has tools for image editing and creating original graphics.
22. Adobe Kuler – upload, create, and edit color schemes
23. Pixel Dropr – create sets of icons, illustrations, photos, buttons etc. that you can drag and drop into any photoshop image.
24. PLTTS – easily create and find color palettes based on hex #’s
25. Pictaculous – Upload an image and it will produce a color palette instantly.
26. Dribble – Get graphic design inspiration and search by color.

 

CSS

CSS or Cascading Style Sheets is a language that’s used to describe the presentation of a Web page.  It includes elements such as fonts, layout, and colors and allows designers to specify very granular rules about formatting and presentation for each.  Here are some resources to get you started creating your own CSS style sheets.

Articles & Resources

27. 30 CSS Best Practices for Beginners – Net Tuts
28. CSS Tutorial – W3Schools.com
29. A List Apart – Articles specifically on CSS.
30. CSS-Tricks – Forums, articles, videos, and tutorials on CSS

 

Tools

31. CSS Beautifier – Type or paste in unformatted CSS and have it beautified automatically so that it’s consistent and easy to read.
32. Reset CSS
33. CSS3 Click Chart – This is a fantastic reference tool for CSS3 attributes with code examples, descriptions, links, tutorials, polyfills, tools, and browser support info for all new CSS3 features.
34. Patternizer – An easy to use online tool which enables you to generate CSS3 stripes in an online interface, allowing you to customize the space in between each stripe and then provides the code.
35. Sprite Box – A WYSIWYG tool to help Web designers quickly and easily create CSS classes and ID’s from a single sprite image.
36. Primer – Paste in your HTML and Primer will pull out all of your classes and id’s and placing them into a starter stylesheet
37. Mincss – Clears the junk out of your CSS by comparing each and every selector in the CSS to find out which ones aren’t being used.
38. CSSCSS – CSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

 

Social Media Integration

Social media websites such as Facebook and Twitter are used by millions of people worldwide which is why it’s essential to strive to incorporate those sites’ functionality into your own.  Here are some articles and tools to help you best leverage the power of social media sites within your own website.

Articles & Resources

39. 3 Ways to Integrate Social Media into Your Website – Web Ascender
40. How to easily integrate Social Media into your website – 1st Web Designer
41. 9 Tips for Integrating Social Media on Your Website -  Social Media Examiner

 

Tools

42. Add This – Easily create “Share This” and “Follow” buttons for over 300+ social media services (Facebook, Twitter and more)
43. ShareThis -  Quickly create “Share” buttons for your website with this easy-to-use tool.
44. Facebook Comments Box – The Comments box is a social plugin that enables people to comment on your site. Features include moderation tools and distribution.
45. Facebook Like Button – The Like button is a simple plugin that lets people quickly share content on Facebook.
46. Gigya Activity Feed – The Activity Feed plugin allows users to see the latest actions on a site, according to who performed the actions.

 

Coding Tools

There are a lot of excellent tools and resources available to assist website designers in creating and editing their sites as well as adding new functionality.  Here are a few to get you going:

Articles & Resources

47. Best Free HTML Editors    Gizmo’s Freeware
48. HTML TOOLBOX: 30+ HTML Tools and Tutorials – Mashable
49. SuperheroJs – A collection of the best articles, videos and presentations on the topic of creating, testing and maintaining a large JavaScript code base.

 

Tools – jQuery & JavaScript

50. JQuery Mention Input – This plugin will give your website the ability to mention out to friends by tagging them with @.
51. Chardin.js – Add overlay instructions to your apps with this jQuery plugin.
52. JSFiddle – This web-based editor allows you to create JavaScript, HTML, and CSS and see the results in real-time.
53. FitText.js – A jQuery plugin for inflating web type and also making font-sizes flexible and responsive.
54. JSLint – Created by Douglas Crockford, JSLint checks JavaScript code against best coding conventions for quality assurance.

 

Tools -HTML Editors

55. Adobe Dreamweaver – This is my preferred HTML editor.  It has a streamlined user interface, connected tools, and new visual CSS editing tools that let you code efficiently and intuitively.
56. Adobe Brackets – Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript.
57. CodePen – An HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write.

 

Tools -Misc

58. Site Validator – This service lets you validate HTML5 and CSS3 on your whole site with a single click.

 

Responsive Website Design

Responsive Web Design (RWD) is, in a nutshell, all about designing your website so that it can be optimally viewed on a wide range of devices such as tablets, smartphones, laptops, etc. The idea is to design and maintain one website that can be viewed on all.  Here are tools and resources to help you do just that:

Articles & Resources

59. 85 Top Responsive Web Design Tools
60. 16 Top Tools for Responsive Web Design
61. 50 Useful Responsive Web Design Tools For Designers

 

Tools

62. Responsive Nav – A tiny JavaScript plugin which helps you to create a toggled navigation for small screens.
63. Gridset – Enables Web designers to design and build responsive grid-based layouts and offers a selection of presets.
64. Respond.js – A javascript snippet of code which allows media queries to be compatible with older versions of browsers that lack support for them.
65. Responsive Tables – A simple JS/CSS combo that will let your tables adapt to small device screens “without everything going to hell”.
66. Adaptive Images – Detect your visitor’s screen size then automatically creates, caches and delivers device-appropriate re-scaled versions of your HTML images.

 

UX/Usability

Usability tests, card sorts, focus groups, and more are all used by website designers in an effort to create user-driven designs and deliver an engaging user experience to their visitors. Learn how to use these inexpensive techniques to understand how your users think about your Web site and its content.

Articles & Resources

67. Best books on usability and web interface design
68. UX Magazine
69. Usability 101: Introduction to Usability -Jakob Nielsen
70. Smashing Magazine – UX Category
71. Card Sorting from A–Z – iLibrarian Series
72. 18 Usability Resources for Librarians – iLibrarian

 

Tools- Wireframing & Mockups

73. Microsoft Visio Professional – This is my favorite wire-framing tool, Visio is a powerful diagramming platform with a rich set of built-in stencils that lets you create wireframes, maps, and many other types of charts and diagrams.
74. Mockingbird – an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
75. Mockup Builder – A prototyping application that helps you design software or websites by making it easy to create mockups of the finished project.
76. Balsamiq Mockups – Online wireframing tool with 75 built-in user interface components and 187 icons.
77. Moqups – a nifty HTML5 App used to create wireframes, mockups or UI concepts, and prototypes.
78. Mockflow is a super-easy wireframing tool that enables you to design and collaborate on user interface concepts for your software and websites.

 

Tools – Usability Testing

79. Websort – Card sorting application
80. OptimalSort – Card sorting application
81. Feedback Army – Set up usability tests in as little as 2 minutes for $20.
82. UserTesting.com – Set up a usability test and submit it for review from a user base of over 1 million participants.
83. Silverback 2.0 – Guerrilla usability testing software for designers and developers.

 

SEO

SEO or search engine optimization is all about improving or “optimizing” your ranking in search engine results in an effort to increase traffic to your website.  Techniques for accomplishing this vary according to individual search engine.  Here are some helpful resources to improve your website’s rank.

Articles & Resources

84. What Is SEO / Search Engine Optimization? – SearchEngineLand
85. Search Engine Optimization Guide – Google
86. The Beginner’s Guide to SEO – Moz
87. Advanced Guide to SEO – QuickSprout/ Neil Patel
88. SEO Book’s Search Engine Optimization Tools Directory

 

Tools

89. Google Rich Snippets – Customize and preview the way your website will display in Google search results.  Rich snippets offer  markup help to enhance your search results listings.
90. GetListed – Claim your local U.S. business listings on Google+ Local, Bing Local, Yelp, and other prominent local search engines.
91. Google Website Optimizer – Website testing and optimization tool that allows you to increase the value of your existing websites and traffic without spending a cent -  now a part of Google Analytics.
92. Meta Tag Generator – Instantly create meta tags that can be pasted into your site by entering the page title and description with this quick tool.
93. Spider Test Tool – This is a search engine indexing simulator tool that shows the source code of a page, all outbound links on the page, and common words and phrases found in the page copy.
94. Google AdWords Keyword Tool – This is a great way to get keyword ideas and find the best text for your audience. Identify what words or phrases will drive the most traffic to your site.

 

Accessibility

Designing an accessible website includes accomodating visually impaired visitors, visitors that utilize voice reading devices, and visitors that turn off images.  Here are some excellent resources to help you design an accessible website.

Articles & Resources

95. Web Content Accessibility Guidelines (WCAG) 2.0
96. Web Content Accessibility Guidelines (WCAG) Overview – Web Accessibility Initiative
97. Section 508 Standards
98. State Accessibility Laws, Policies, Standards and Other Resources (U.S.)
99. Improve Your Website’s Accessibility With the W3C’s ‘Guide to Using ARIA’ – Webmonkey

 

Tools

100. Browser Emulator – See what your site looks like on many ancient browsers.
101. 38 Mobile Browser Emulators
102. IE Tester – Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10
103. Colorblind Web Page Filter -  See what your website looks like for the colorblind.
104. Wave Accessibility Evaluation Tool
105. HiSoftware CynthiaSays™ Portal – A joint education and outreach project of HiSoftware, ICDRI, and the Internet Society Disability and Special Needs Chapter. Cynthia Says educates users in the concepts behind website accessibility.
106. Accessibility Evaluation Toolbar 1.5.7.1 for Firefox- Supports web developers in testing web resources for accessibility features.
107. Fangs Screen Reader Emulator 1.0.8 for Firefox – Fangs renders a text version of a web page similar to how a screen reader would read it. The ambition is to help developers understand how an assistive device would present a website and thereby increase chances of finding accessibility issues early.

 

Analytics

Analytics tools are an invaluable way to show the ROI of marketing campaigns, popularity and usability of website content, value of blog posts, social media influence, and much more.

Articles & Resources

108. Web analytics -  Wikipedia
109. Web Analytics Tools – SEOBook
110. Web Analytics Category – Mashable
111. 4 Analytics Tools Librarians Should Know About -  iLibrarian
112. Google Analytics for Libraries by Joe Morgan – 50 page book on using GAnalytics in Libraries.

 

Tools

113. Google Analytics – Free tool that lets you access robust reports indicating the total number of visitors to your website, their demographic, browser, and engagement information.
114. SiteMeter – Similar to Google Analytics, this free tool provides a quick snapshot of traffic to your website.
115. Open Web Analytics – An open source web analytics software that you can use to track and analyze how people use your websites and applications.

The post The Ultimate, Mega, Essential Website Design Guide – 115 Tools and Resources appeared first on OEDB.org.