Part 1 | Getting Started
14. Frameworks & Content Management Systems (CMS)
Frameworks and CMS platforms are designed to build websites without having to code and program everything from scratch. Frameworks are libraries of pre-made CSS classes and Javascript that allow web designers to quickly develop mobile responsive sites. Content Management Systems (CMS) are web based software applications that provide the ability to author websites and manage site content with little or no coding knowledge.
– “Rewards are always based on investment.”
Frameworks & CMS Platforms
Frameworks
Frameworks are integrated libraries of custom CSS classes that can be leveraged with HTML to quickly develop mobile responsive Website designs based on industry standard media queries. Most frameworks include Javascript, a programming language, that can control the behavior of HTML elements and CSS selectors. Javascript is commonly used to make layout elements interactive including navigation, buttons, forms, modal windows, popups messages and call-to-action dialogues. Frameworks make it possible to quickly create complex interactive mobile responsive websites without having to code everything from scratch.
Bootstrap
Bootstrap, developed by Twitter, is one of the most popular open source frameworks thats ideal for quickly building mobile responsive front-end Web designs. It is based on a 12 column grid and uses jQuery for building elements like modals, carousels, drop downs, accordions and more. It includes tons of prebuilt components, has great documentation and is easy to deploy and learn.
Highlights:
- Built on jQuery
- Easy to use 12 column grid system
- Includes a large library of prebuilt components
- Well documented
- Large community of users and tutorials
- Powerful and relatively easy to learn
Foundation
Foundation is another popular framework that allows you to design for mobile devices first, or for large screens down to mobile sizes. It is based on a 12 column flexible grid that can be scaled and nested to create complex layouts difficult to accomplish with a single grid system. Like Bootstrap, it includes prebuilt integrated elements like modals, buttons, customizable forms, image sliders and more.
Highlights:
- Fully HTML5 Semantic
- Mobile responsive websites, apps and Emails
- Scalable 12 column grid
- Highly customizable
- Mobile first or desktop first approach
- Comprehensive support and training options
Skeleton
Skeleton is a simple ultra lightweight HTML5 CSS boilerplate designed as a starting point to layout mobile responsive websites. It features a simple 12 column grid that auto scales for smaller screen sizes. At only 400 lines of CSS, it lacks the utility of other frameworks but is super easy to learn and use. The syntax only uses a handful of HTML elements and is ideal for coding simple responsive designs.
Highlights:
- Scalable 12 column grid
- Ultra lightweight
- Easy to learn
- Great starting point for small responsive design projects
- Uses only 400 lines of CSS
- No Javascript required
HTML5 Boilerplate
HTML5 Boilerplate is a lean starter template rather than a framework. It uses semantic HTML, CSS and jQuery to quickly develop simple templates. Rather than a grid, it includes media query placeholders to make layout elements responsive. It is a great starting point for static templates or simple responsive layouts. It includes he CSS is highly cross browser compatible.
Highlights:
- Semantic HTML5, CSS, jQuery
- Starter template for static designs or simple responsive layouts.
- Placeholder CSS media queries
- Useful CSS helper classes
- Perfomance optimized
- Delete key friendly – use all or some without breaking it.
Content Management Systems (CMS)
Content Management Systems (CMS) are Web based software applications that provide the ability to build and and maintain websites, blogs, and apps in a single environment. CMS platforms have a robust Graphic User Interface (GUI) and require little or no coding. They have built in digital asset management tools for media libraries and other content and include tons of functionality with utility plugins. Since they are online software applications, they tend to be heavy and slow unless they are deployed on a very high performance server with a high bandwidth connection.
WordPress
WordPress is the most popular open source CMS platform. Over 21 million websites are built on WordPress. Originally developed as an online blog platform, it has evolved into a robust Web development solution supported by thousands of theme and plug-in developers. WordPress is built on PHP, a server side scripting and programming language that supports HTML, CSS and Javascript.
Highlights:
- Most popular CMS development platform
- Graphic User Interface (GUI) requires little or no coding for basic websites
- Thousands of active theme and utility plug-in developers
- Slow and Top heavy without a high performance Web server
- Relatively easy learning curve
Joomla
Joomla is a free and open source CMS for publishing Web content. It is built on a PHP model–view–controller web application framework that can be used independently of the CMS to build stand alone backend applications. It is highly customizable and offers robust features for e-commerce database driven sites. More flexible than WordPress and can be used for a wide array of Web applications.
Highlights:
- Powerful CMS for font-end websites and Web applications
- Integrated utilities for e-commerce, inventory and database driven websites
- Flexible, extensible, customizable
- Top heavy without a high performance Web server
- Intermediate learning curve
Drupal
Drupal is another popular open source CMS platform built on PHP. It provides highly customizable back-end features for Web driven applications. It is suitable for both mobile responsive front-end development with tailored back-end applications for specific business models. It provides both front-end Web designers and programmers a robust collaborative development space in a single CMS environment.
Highlights:
- Highly scalable and customizable
- Vast library of integrated back-end applications
- High emphasis on security
- Highly collaborative front-end to back-end development
- Requires fast Web server for high productivity
- Relatively steep learning curve
TYPO3
TYPO3 is the most popular open source CMS next to WordPress. It was developed, and maintain by an association of expert Web developers. It is ideal for large corporate portals and enterprise level e-commerce solutions. It includes a huge range of native utilities and functions that can integrate CRM and ERP database driven business applications. Best suited for experienced developers.
Highlights:
- Enterprise level CMS for e-commerce
- Vast array of functions
- Integrated rights management
- Integration of CRM or ERP solutions
- Web application developer focused
- Requires fast Web server for high productivity
Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.
Web Design Tools & Resources