When the World Wide Web was in its nascent stage, websites consisted of simple, static pages which were straightforward to create and edit. In the time since, websites have evolved into complex, dynamic entities. Even seemingly basic website functions like password-protection can involve tremendous complexity, requiring hundreds or thousands of lines of code (and many thousands of dollars) to develop. Without open source web frameworks to address this complexity, most companies wouldn’t be able to afford the development of a truly modern website.

What is a Web Framework?

A web framework is programmer-speak for a reusable, solid foundation for a website or web application. Much like a wooden frame of a house supports its functional requirements while still providing nearly limitless customizability, a web framework addresses many programming requirements of modern websites, without getting in the way of the creation of a custom site. It allows your site’s developers to focus more time and effort on your specific needs, and less time and money on the needs of the Internet, servers, databases, and other stuff you probably don’t care about.

Most modern websites are built on open source web frameworks, from huge web applications like Twitter, all the way to obscure blogs. Open source frameworks are simply frameworks that are developed and improved by communities of programmers, and that are freely distributed for use around the web. Using an open source framework allows you to reap the reward of millions of dollars of professional programming, for free.

The Benefits of Open Source Web Frameworks

Using a web framework for your web project offers numerous benefits which can be broken down into a few main categories:

• Affordability – Since developers don’t have to reinvent the wheel every time they start a new web project, you only pay for the work specific to your particular needs. And since you don’t need to spend money on the boring stuff, you can afford more functionalities than you may have originally anticipated.
• Security – How can code that everybody has access to be more secure than private, custom code? Since so many developers are constantly scrutinizing and improving open source frameworks, security flaws that do exist are detected early and fixed before they ever become a problem. One study has suggested that private code may contain over 100 times the number of errors as open source code. ¹
• Extensibility – Because so many developers use the same web frameworks, there is a good chance that any problems associated with particular functionality requirements have already been solved by others. Entire communities tend to develop around open source frameworks, through which solutions to common problems and code to provide new functionalities flow freely. (This is the concept behind the very popular ‘Plugin’ for WordPress.)
• Maintainability – Since many developers are familiar with the same popular web frameworks, finding somebody willing and able to maintain your site is significantly easier. And since most web frameworks follow best programming practices, the likelihood that you’ll ever encounter a problem that needs to be fixed is significantly reduced.

Popular Web Frameworks

The most popular open source web framework in use today is WordPress, which is estimated to be powering more than 1/5th of all new websites in the US². Originally designed to specifically address the needs of blogs, WordPress has since evolved into an extremely powerful and popular multi-use framework with an estimated development pricetag of $2.3 million³. We’ve found WordPress to be an extremely effective solution for addressing the specific needs of the majority of our clients.

When our clients requirements exceed the capabilities of WordPress, we turn to another open source framework, CakePHP. With an estimated development cost of $8.9 million⁴, CakePHP is designed to power high-complexity, data-heavy web applications. (Keep an eye out for our future posts on CakePHP.)

While both WordPress and CakePHP are written in the PHP programming language (which many clients prefer to use for their websites), web frameworks exist for nearly every programming language out there. Other popular non-PHP frameworks include the immensely popular Ruby on Rails, written in the Ruby language, Django, written in Python, Express, written in Javascript, and Struts, written in Java. Each framework carries with it certain benefits and drawbacks. Your developer should be able to help you find the right framework to suit your needs.

I’m Sold. Where Do I Get Started?

We recommend WordPress for people just getting started with web frameworks. WordPress is well-suited to individuals with little or no programming experience because unlike many of the other frameworks mentioned above, it provides a functional website right out of the box. And while WordPress certainly has its limitations compared to more robust frameworks like Ruby on Rails and CakePHP, it can be customized and extended to meet the requirements of the vast majority of websites. Additionally, most hosting providers offer support for PHP (the programming language in which WordPress is written), and the WordPress community contains a lot of great resources for those new to the framework. You can find the official Getting Started documentation on WordPress.org.

If you want to take advantage of the power of open source web frameworks, but would rather not spend your time learning new programming languages, give us a call or contact us through our website.

¹http://www.wired.com/software/coolapps/news/2004/12/66022
²http://techcrunch.com/2011/08/19/wordpress-now-powers-22-percent-of-new-active-websites-in-the-us/
³http://www.ohloh.net/p/wordpress/estimated_cost
⁴http://www.ohloh.net/p/cakephp/estimated_cost

About the Plugin

The List All Pages plugin adds a toggle to the top of the Wordpress Admin sidebar. From there you can call a list of all the pages in the site, with quick links to edit the page.

When you have dozens of pages, it can be tough to sort through them all to find the one you’re looking for. On top pf that, the Wordpress interface is often very slow to load the pages list. This plugin eliminates the waiting, providing a quick and easy link to edit any page from anywhere with in the Wordpress Admin interface.

CSS Media Queries are not new, but CSS3 is making them considerably more practical for every web developer, and designer to know. They are new ways to serve CSS styles to the browser, with a particular emphasis on targeting mobile devices.

For the Non-Developers

CSS or “Cascading Style Sheets” are what make a website look the way it does. They can control the size of everything on the page from images to text. They control colors, fonts and the overall layout of a site. What Media Queries do, is let us specify change those settings under certain conditions. These changes can be as simple as changing the color of a link, to changing the whole layout.

Now and Then

The most common use for Media Queries up to this point has been the creation of a Print Stylesheet. A Print Stylesheet allows developers to specify how a page should look when it is printed, such as to remove a background color from the page. There are other uses, including ways to create styles for Braille printers, audio devices, handheld devices and even projectors and TVs. The CSS3 guidelines expand on the options that are already available to us, allowing developers to target devices based on the following criteria:

The CSS3 specification includes a few extra new options, but those will be the most useful for developers and designers right now.

What It Means

All of these things can be combined to create different layouts depending on how the user is viewing the site. Obviously we can’t afford to make a website for every device, but we can use the above properties to change the site layout in stages. For instance, the iPad has a width of 768 in portrait mode. We can call a media query that will execute for all devices with a width of 768 and a width of 480, which will get used on any device that is not as wide as an iPad.

Why It Matters

The web doesn’t just live on computers anymore. People access websites from their phones, tablets, and TVs. Sadly the web doesn’t always look the same on different devices. A site that looks great on your laptop, might be too hard navigate on your phone.

People love the iPad, and the tablet market is exploding. Windows 8 is expected to be launched in 2012, and Microsoft is trying to make its mark with the first operating system that will be available on both tablets and desktop computers. It is no longer good enough to have your website display well in the latest browsers, it needs to look good on the latest devices.

Good coding can take care of most of that. If your website is coded properly, it should display more or less as intended on most devices. Media Queries come in to expand on that. Looking at a website on a 23” monitor and a 4” phone are not the same thing, and the design should reflect that.

A Level of Support

All of the latest versions of Chrome, Opera, Safari, Firefox and even Internet Explorer support media queries. The Android and iPhone browsers have supported them from the beginning. Unfortunately, the Windows Phone 7 browser was built around IE8, and therefore does not support them. But never fear, if you have a mobile stylesheet that is separate from your main stylesheet, the WP7 developers have graciously added a conditional comment that will only be registered by the Windows Phone browser.

How to Use It

There are a few ways to integrate media queries into your website. The first is to include the query in the media attribute of a link tag.

<link rel=”stylesheet” media=”(max-device-width: 600px)” href=”small.css” />

The other main way is to include a media query in your CSS file itself. This can be done by wrapping the styles in a @media call.

@media screen and (min-width:900px) {
     .class { background: #666; }
}

Lastly, to render on Windows Phone 7 devices, you will need to use a separate stylesheet, and link it in an IEMobile comment.

<!--[if IEMobile]>
<link rel="stylesheet" media="(device-width: 600px)" href="mobile.css" />
<![endif]-->

Benefits and Drawbacks

The primary benefit of this is that we can display our content in a mobile friendly way without having to deal with the hassles of a mobile site. We can easily create better looking experiences on both large and small screen devices with as little or as much effort as is needed.

On the other hand, unlike a full mobile site you can’t change the structure of the page. You can only change the design. We can still hide or minimize some elements of the page, and even change the order in which they appear, but we can’t add something just for the mobile site. In many cases you can use a different stylesheet to serve up smaller images to mobile users, improving load time. Even an image that is not controlled by the CSS, can be hidden by the stylesheet. You won’t receive the performance boost, but it can help make a more streamlined design.

Jake is excited to announce the release of our first publicly available WordPress plugin.

WordPress is one of our favorite content management systems to use because of its quality and flexibility—traits that result from countless hours of development by its dedicated community of programers. After developing numerous proprietary plugins custom-tailored to meet the needs of our clients, we decided that it was time to get more actively involved with the WordPress developer community and convert one of those for public use.

About the Plugin

Our Post & Pages Admin Renamer plugin does just that—it allows users to rename “Posts” and “Pages” within the WordPress administrative interface to terms that are more suitable for their particular website. This comes in handy when they are using the Posts section for “News Items” or “Quick Tips” or “Articles.” Renaming these sections provides our clients (and now you) with a much more intuitive backend interface.

It’s a basic tool, but we find that the seemingly simple details often make a big difference for system usability in general. The Post & Pages Admin Renamer plugin can be downloaded from the WordPress plugin repository at the following link: http://wordpress.org/extend/plugins/postpage-admin-renamer/