Frameworks are near and dear to the hearts of modern web developers, but why should you be interested in them? Because open source web frameworks allow developers to build you multi million dollar websites for only a tiny fraction of the price.

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

Would you be willing to pay the same amount for a visit to your website that leads to a $200 sale as you would for a visit that lasts only 5 seconds and leads to nothing? If you haven’t tied your AdWords account to goal conversions in Google Analytics, you’re de facto answer is ‘Yes’.

One of pay-per-click (PPC) advertising’s best selling points is the ability to see exactly what your ad dollars are buying you. Unfortunately, for most marketers this simply means determining the number of visits driven to their website through a particular ad or ad group.

The real power of PPC is realized when you tie each click of your ads to a valuable action performed on your site, and the integration of Google Analytics and AdWords allows you to easily do just that.

Goals in Google Analytics

Goal tracking may be Google Analytics’ most powerful feature. In brief, goal tracking allows Analytics to keep track of certain visitor behaviors that are important to you. There are four basic types of goals in Analytics that allow you to track just about anything you want:

• URL Destination – Record a goal conversion when a visitor browses to a particular page or section of your website
• Time On Site – Record a goal conversion when a visitor has been active on your website for a defined period of time
• Page/Visit – Record a goal conversion when a visitor visits a defined number of pages in a single visit
• Event – Record a goal conversion when a visitor does anything you want to track*

*Events are by far the most flexible and powerful type of goal, but they involve some programming expertise. Don’t know javascript? Get in touch with us.

We use goals all the time to track the number of visits to our clients’ Contact pages, or the number of submissions of clients’ estimate request forms, etc. Even if you don’t advertise online, setting up goals in Analytics can be immensely valuable as it allows you to quickly determine if your website is performing to your expectations.

(Stay tuned for our future post that will offer a more in-depth look at setting up goals in Google Analytics.)

The Benefit of Using Analytics and AdWords Together

Using Analytics goals with your AdWords campaigns provides a whole new level of return-on-investment (ROI) determination and campaign optimization. Instead of knowing just how many visits a particular ad drove to your site, you can determine how many purchases or contact form submissions a particular ad drove. (If you have e-commerce tracking set up, you can even correlate precise dollar amounts of purchases to specific ads!) As if the ability to correlate your ads to important behaviors wasn’t enough, AdWords offers the option to automatically optimize your whole ad campaign to increase the number of ad-driven goal conversions. It’s informative, easy to set up, and has an incredible impact on what you get out of your ad spend.

Case Study: Paulson & Nace, PLLC

When law firm Paulson & Nace approached Jake to make the most of their online marketing budget, we knew that an AdWords & Analytics integration was the right solution. We linked the two accounts, immediately allowing us to analyze the behavior of their ad-driven visitors. To more closely track valuable behaviors of these visitors, we set up goals in Analytics for submissions of their consultation request forms and for visits to the Contact page (for those visitors who prefer to get in touch by phone). In addition to providing us with an instant read out of how our ad-driven visitors were converting, linking the new goals to AdWords also allowed us to optimize our bids to maximize conversions and easily calculate our average cost per conversion. And since the integration was so easy, all of this was accomplished with minimal overhead.

How To: Hooking Together Analytics and AdWords

Analytics and AdWords were literally made for each other, so enabling data sharing between them is simple. In your AdWords account, click the ‘Tools & Analysis’ tab and select ‘Google Analytics’. Choose the ‘I already have a Google Analytics account’ option (if you don’t yet have a Google Analytics account, what are you waiting for?). Select the desired Analytics account from the ‘Existing Google Analytics Account’ drop-down, and click ‘Link Account’.

To optimize a campaign for goal conversions, browse to the ‘Settings’ tab of your desired campaign or ad group. Under ‘Bidding and budget’, click ‘edit’ next to the ‘Bidding option’ item. Select ‘Focus on conversions (Conversion Optimizer)’, and hit ‘Save’. That’s it!

Jake is pleased to announce the launch of their latest publicly available Wordpress Plugin. We’re always looking for simple ways to make development and site maintenance for ourselves and our clients. We’ve found that often minor tweaks can eliminate major annoyances.

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.

Jake recently designed a series of academic textbooks for Westview Press and it got us thinking… what would it take to convert the printed books into an eBook format? This post touches on the basics of creating eBooks, specifically modifying cover designs to the required specifications.

Overview

Electronic books were originally designed to display text with minimal images. For that reason, children’s books, cookbooks, comics, etc. do not translate well and often have trouble displaying correctly across platforms. A good rule of thumb is that eBooks work best for text-heavy novels and long, narrative articles (think best seller lists and The New Yorker). That being said, readers are constantly evolving and expected to soon support graphic-heavy books. In fact, Apple’s iOS devices already support fixed-layouts, so it is safe to assume other readers will soon do the same. Either way, eBooks still require a strong cover design to attract interest in the book.

eBook Formats

Any electronic book is considered an eBook, but over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook using these formats:

• EPUB: This is an open standard adopted by Apple (iOS), Barnes & Noble (Nook) and many other makers of eBook readers (such as Sony).
• Kindle: This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.
• PDF: PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format.

Making Your eBook

There are multiple ways to create your eBook. Some of the most popular methods are:

• Amazon’s Kindle Direct Publishing (kdp.amazon.com): KDP is a fast, easy self-publishing tool that lets you publish your digital text content for the Amazon Kindle.
• Kindle Plugin for Adobe InDesign: Create Kindle books in-house using a free Kindle Plugin that converts your file to a Kindle format. You can download the plug-in at www.amazon.com/kindlepublishing.
• Outsourcing: Services such as Lulu and Smashwords will translate your Word document into an eBook format. In addition to creating your book, they will also submit it to Apple and Amazon bookstores for a small fee.
• Hand Coding: More on this in a future JakeIntel post.

eBook Covers Formats

Since eBooks are used on various platforms and purchased online, they require a few different cover formats:

• Embedded eBook Cover: The cover embedded inside your eBook that displays as the first page. This can and should be separately sized to each store’s specifications.
• Catalog Cover: The cover that shows up in the eBook store on Amazon, B&N, ect. Generally uploaded separately, and also used at a thumbnail size when displaying search results.
• Publicity Cover: This cover is used on your website, ads and other marketing materials. Size vary based on the application.

Cover Specifications

In addition to the various cover formats outlined above, each reader has slightly different size requirements. You can reference the chart below when creating your covers:

If you are unable to produce multiple covers, your best bet is to create a 600×800 JPG. This isn’t the optimal cover size for each reader, but it should cover all your bases. In addition to the sizes noted above, remember to convert all graphics to RGB. Any files submitted as CMYK will be rejected.

Designing Your Cover

In most cases you can simply resize your printed cover to fit the required specs, but occasionally a redesign is needed since not all covers translate well on screen or at smaller sizes. For example, a cover that uses gold leaf or embossing will not display well on screen. When redesigning your cover, it is best to stick with simple, but bold graphics and strong type treatments. Jake’s design for Supreme Decisions: Great Constitutional Cases and Their Impact is a perfect example of strong graphics and type that convert well to the Amazon Kindle and other e-reading devices:

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.