Soliciting Project Estimates from the Team

Posted by & filed under Web Development.

Project estimates can be one of the more challenging aspects of managing web development projects. There are so many factors involved: defining (and sometimes guessing at) accurate requirements, factoring in learning curves, consideration of client budget and expectations, timeline, etc, etc.

If you have an experienced development team at your disposal, you can leverage team members’ experience and expertise to come up with better estimates. Each person brings a different perspective to the task, which leads to a larger set of questions being addressed, and more thorough and well-informed estimates. But much like the web project itself, the value you get out of this exercise will be determined by how you approach the process.

The best way to solicit estimates from the team is to ask team members to make their assessments separately. Discussing it as a group is liable to lead to consensus which is not a good thing in this case. Consensus isn’t necessarily built around accuracy, but can reflect circumstantial issues such as the order in which predictions are presented, the persuasiveness or seniority of individuals, unpredictable interruptions, etc. By asking people come up with assessments independently, you are more likely to get their actual opinions which can be assessed more objectively.

However, merely keeping assessments separate only assures that one person’s opinion doesn’t affect another’s. One must also provide the team members the data and process necessary to make good predictions. This may include:

  • Previous project estimates/actuals: It would be wonderful if we could just use previous projects as measuring sticks for the effort required in future projects. Unfortunately it’s usually not easy. Each project is its own animal, and what we learn in one project may encourage us to approach the next project differently. Nevertheless, previous projects provide real data to inform our estimates and putting this at the disposal of the team can lead to more informed assessments.
  • Project requirements: The more detail the better when it comes to requirements. Oversimplified requirements are likely to lead to underestimation. Of course, in order to provide it to the team you have to get it yourself, so making this a part of your process will have the added benefit of improving your overall project approach. But pre-contract specs can only go so far, which means your team will likely have questions. Use this to drive your follow up process and the post-contract requirements gathering.
  • Resources and schedule: The team will need to know what tools and staff they’ll have at their disposal to execute the project, as well as the schedule they’ll be following. How much of the team’s resources may be dedicated to the project, what technology platforms will they be using, will there be legacy systems or data involved, will staff members with particular skills be on the project, when are certain deliverables due? You may not be able to answer all these questions, but whatever clarity you can provide will lead to better estimates.
  • Client context and expectations: We all know that the particular client can have a powerful influence on the amount of work that goes into a project. Let your team know what to expect so they can factor it in to their predictions. Also, make sure everyone understands to what extent content development and migration, launch procedures and training are going to be part of the project.

Ask team members to write down their estimates and questions before meeting as a group to discuss them, and arrange for everyone to present their findings. This should encourage them to have more confidence in their own assessments and give you a diverse set of opinions.  The group may very well move toward consensus anyway, but having these informed, personal assessments provides a check against doing so without a real consideration of the project complexities and scope.

Updating WordPress as a Keystone Process

Posted by & filed under Web Development, WordPress.

WordPress tends to make a major version release about every six months, as well as several other minor versions every year. As soon as a stable release is made, an alert message is posted on admin dashboards along with a link to automatically install the update. If you are not comfortable with that, you can download a new package, install it anew and migrate your database, plugins and theme to implement the update manually.

Despite that, many of us who work with WordPress are less than disciplined about keeping our sites up-to-date with the latest version. There are lots of excuses, but the long-and-short of it is that if we’re not doing so, we’re not doing our best work.

Recent WordPress version releases.

Recent WordPress version releases. Keeping WP up-to-date encourages best practices in other areas as well.

Some of the reasons for keeping up-to-date with the latest WordPress release are direct and obvious. But there’s more to it than just having the latest functionality and security upgrades. Committing to install the latest releases is committing to doing things the right way, and that will have positive effects not only on the final product, but on your process and skill set as well.

This is what we call a keystone process: a procedure that relies on a number of other best practices being followed in order to be completed itself. In this case, by committing to keep WordPress up-to-date, we ensure that a number of other things will be done properly as well.

  • Play by the rules: In the process of developing any individual site, it can be tempting to use quick, hacky solutions to resolve challenges from time-to-time. Examples include using an inline style to make a quick formatting tweak, installing half-baked plugins, and even editing the core (gasp!) rather than working within the WordPress structure. But such shortcuts can behave inconsistently or break altogether when installing the next WordPress version. If you are committed to making upgrades, you’ll think twice about taking those shortcuts.
  • Keep involved in sites: One of the major draws of WordPress is the stability of the platform as a site grows. Once launched, the WordPress administrator can manage the site without worrying much about the underlying structures, even as the site gains a following and pages, posts and comments accumulate. But despite the general stability of the system, it’s underlying structure still requires maintenance to keep up with the evolving online environment, particularly when it comes to security. The risk is that we get comfortable with letting the content admin handle day-to-day management of the site and ignore this underlying need. In order to be prepared for system upgrades, we must engage in ongoing system monitoring to keep aware of new challenges facing the front and back ends, thus keeping us more involved in the operations of the site.
  • Encourage communications with admin/client: WordPress’s strong CMS capabilities allow non-technical administrators to manage the day-to-day operations of the system. But just as with the stable system infrastructure, this may have unintended consequences.  The less assistance an admin or client needs on a day-to-day basis, the fewer opportunities there are for interaction that can keep us aware of site performance, opportunities and challenges. Once again, the ongoing monitoring and planning required to keep the system prepared for WordPress upgrades can also provide context for additional communication with the admin/client that can ultimately lead to better site performance and relationships.
  • Use up-to-date, quality plugins: WordPress updates can sometimes affect the performance of the plugins used to drive site customization. When dealing with third-party plugins, this means we should choose to use well established, supported plugins. In addition to working properly in the first place, these are more likely to remain stable during an upgrade, and will be more likely to be updated should a WP version-related issue occur. On the other hand, for our own plugins we can use WP updates as a prompt to review their functionality and make upgrades as necessary. This will not only ensure that your site customizations remain functional, but it will also make you a better plugin provider for any that you’ve made available to the WordPress developer community. This can help you maintain a reputation as a WordPress expert, which of course can lead to new opportunities in the future.
  • Maintain stable and up-to-date platform: The first version of WordPress was released in 2003. Since then there have not only been many versions of WP released, but also many versions of the underlying software, eg PHP, MySQL, Apache etc. With many more pressing demands on our time, it can be easy to put off maintenance of the hosting platform and software running our sites. But keeping WordPress up-to-date sooner or later means ensuring that the systems that run it are also current.

These are but a handful of areas that will be positively affected by keeping your WP installations up-to-date. By making this a keystone process you are not only committing to have the latest and greatest from WordPress, but to improve every aspect of your infrastructure and process that supports it.

You can always find the latest version of WordPress on the WordPress.org download page, or at WordPress github.

WordPress Username Security

Posted by & filed under Web Development, WordPress.

One of the great things about WordPress is how easy it is to get started with a new implementation. Once you have the latest version downloaded and the database connected, all you need to do is run the install script to finish the setup and create your admin account. Bam, you are ready to roll.

But there is a security pitfall in this process that you should avoid. The WordPress install script uses ‘admin’ as the default username for the main administrative user. This has been true for many, many versions of WordPress, and at first glance it may seem to make sense to use a ‘admin’ as a non-personal username for the main account. The problem is, ‘admin’ will also be the first username someone tries when trying to hack your site. Combine that with a weak password, and you all but guarantee that you’re site security will eventually be compromised.

Avoid using 'admin as your WordPress username.

Avoid using ‘admin as your WordPress username.

Do yourself a favor and don’t use the default ‘admin’ username for your WordPress installation. Replace it with something less predictable. And resist the temptation to develop the site using the ‘admin’ username while planning to retire that account later on. Once the site is launched it will be all too easy to forget about deleting that account, and it also monopolizes the email address that you’d probably want to use for the real administrator user.

Google Web Fonts

Posted by & filed under Web Development.

Some time ago, fonts used on websites were limited in practice to font families that were widely available such as Arial, Verdana and Times New Roman. This is because web browsers, like most other applications on a person’s computer, by default have access only to the fonts stored on that computer. But wait you ask, isn’t web content defined and styled by the websites themselves, rather than individual computers? This is true, but text that is rendered as font (as opposed to being embedded in images) relies on the font libraries available on each individual computer to be styled properly.

Operating systems come pre-installed with a set of standard fonts, but that set differs between OS platforms (e.g. Apple vs Windows) and even between versions of the same OS (e.g., Win XP vs Win 7). On top of that, not every font is suitable for easy reading in a web browser on screen. The result was that web designers generally stuck to using fonts that they could be reasonably sure would be available and render consistently on the vast majority of users’ computers.

Today however, there are ways to reliably incorporate non-OS based fonts into website designs. Font dealers such as Fonts.com and Typekit offer subscription based services that allow designers to embed font families into websites as external resources. Effectively this instructs the browser to retrieve a particular font or fonts from the online provider, as opposed to solely from the OS font library.

Google Web Fonts

Another such provider is Google Web Fonts, which offers a similar service but with the added benefit of requiring neither a subscription nor even an account. Instead, a designer simply browses the publicly available Google font library and embeds the link to the desired font resource in the website, allowing any text elements on that site to be styled using that font.

Google’s service does not include nearly the number of fonts that the pay services offer (at this time, Google offers 613 font families, while Fonts.com advertises over 20,000 web fonts). And all of its fonts are open source fonts, meaning that the standard typefaces familiar to print designers are generally not available. Instead, the library includes custom fonts created by designers for open source distribution and generally optimized for use on the web. Thus, Google’s service is a good solution for someone looking for a cheap and easy way of adding custom typefaces to enhance the look of a website.

How to Use Google Web Fonts

Here’s how to get started:

  1. Visit the Google Web Fonts library at http://www.google.com/webfonts.
  2. Browse to find a font style that works for your site. The interface allows you to search font names and use a number of filters to narrow down your options.
  3. Once you’ve found the font style you want, click the Quick-Use button to select it. (Note: you can also create a collection in order to group multiple font styles into one resource.)
  4. Select options and copy the embed code:
    • Depending on the font family you choose, there may be individual font style options to choose from (e.g., normal, bold, italic). It’s best to choose only the versions that you plan to use, since each additional style will slow page load time. Google provides an easy-to-read gauge to see how the load time may be affected.
    • You will also need to choose which character sets you want. For most fonts being used on English-language sites, Latin is all you will need.
    • Copy the final embed code and paste into the head of your website. Google offers three options for doing this — the standard <link> option should work fine for most basic implementations.
  5. Start using the font by adding the font-family name to you stylesheets.

For more information on how to customize embedded fonts through Google Web Fonts, see https://developers.google.com/webfonts/docs/getting_started 

 

How to Duplicate a Directory Structure without Files in Windows

Posted by & filed under Quick Tips.

On occasion one may wish to duplicate a directory structure but not the files within the original directories. For example, a group of monthly reports may be organized within a set of directories that must be replicated each month.

Windows’ default cut/copy/paste functions copy everything within the selected directory structure. But custom copy functions can be executed using the ‘xcopy’ command at the command line, including copying directories without the files within them.

  1. Enter the command line interface (Windows XP: choose Command Prompt from the Accessories Start menu or just Run ’cmd’; Windows 7: search and click ‘Command Prompt’ from the Start menu)
  2. Type ‘xcopy’, followed by the path to the directory you want to copy, followed by the directory you want to paste to, followed by ‘/T’. For example:xcopy C:\original-directory C:\new-directory /T

This will copy any subdirectories within the ‘original-directory’ into the ‘new-directory’ with one exception – directories without any files in them will not be duplicated. To include empty directories as well, include the /E command after the /T command.

While Windows interface allows for paths and directory names that include spaces, the Command Prompt interface does not, so you must account for this either by eliminating spaces in the directory names you are working with, or by enclosing those paths in quotes, such as “C:\original directory”.

There are many other custom copy commands available using xcopy at the Windows Command Prompt. For a full list, see the Microsoft documentation.

cox graae + spack architects website

Posted by & filed under Projects, Web Development.

cox graae + spack homepage

We recently launched a new site at The Jake Group for a cox graae + spack architects (www.cgsarchitects.com). CGS is an architectural firm just down the street from us in Georgetown, and we enjoyed putting together this nice and clean website design.

One of CGS’s priorities for this site was that it render well across devices, in particular on the iPad and iPhone. CGS uses the iPad when presenting examples of their work to current and prospective clients, and therefore they needed to have confidence that their online portfolio would render consistently. Also, they required great precision regarding the layout of the site, meaning that elements could not shift or stretch at all between devices or browsers. The combination of these two requirements made for a challenging project, because inter-device compatibility is often achieved using styles that are shift depending on the viewing environment. However, we were able to meet the challenge and launch a site that achieves both ends.

The CGS project portfolio is the focus of the website with the two major components being the featured project animation on the homepage, and the portfolio itself. The homepage element is achieved using jQuery and required a fair bit of work to make sure that the overlapping images animated consistently. The site itself is built using WordPress, with the Portfolio section a pretty complex implementation of custom post types. Not only does the interface need to handle a number of variables that affect the display of project information, but the admin panel needs to be simple and intuitive because CGS will be managing the projects themselves. To help with the latter, we used field descriptions in addition to field names to help prompt the admin for the correct type of data (i.e., image sizes, video embed codes, etc.). The Jake Group is always looking for ways to improve the utility of WordPress as a CMS, and we feel that we made some progress on this site.

Media Center Solutions

Posted by & filed under Quick Tips.

There is plenty of information out there about setting up a media center using either a home theater PC (HTPC) or digital media receiver, and I’ve read a great deal of it. The long and short of it is that while either approach can get the job done, the right solution is going to depend on 1) how you intend to use it and 2) how much work you want to put into it. Technical details are covered ad nauseam elsewhere. What I’d like to focus on is how to choose between the approaches.

Home Theater PCs

An HTPC is essentially a standard Internet-connected computer hooked up to your existing media center, i.e. usually your television and audio systems. The HTPC set up is going to give you the most flexibility and power. You’ll be able to access any content that is available through a standard web browser, and access your local audio, video and photos through desktop applications. Essentially your television becomes your monitor. In addition, there are a number of media center-specific applications that can be used to centralize your media experience such as Plex, XMBC, iTunes and Windows Media Center.

If your computer has enough juice, an HTPC can also serve as a gaming system. And the setup need not be limited to media and entertainment. You should be able to multipurpose your HTPC doing anything you’d do with a normal computer including: file storage, graphic design, business productivity, web hosting, network administration, etc. While you may pay a little more for these capabilities, it surely expands what you can accomplish with the device.

The drawbacks of an HTPC are the flip side of its strengths. In order to take advantage of the system’s full capabilities, you need suitable controllers. For a regular computer setup, that usually means a keyboard and mouse. But most folks aren’t accustomed to using these controllers in front of the TV or stereo — rather, the remote control is the standard in this context.  There are a number of solutions that try to address this issue including handheld Bluetooth keypads, apps to turn your mobile device into a remote, and PC-friendly universal remotes. None are as user friendly as a standard remote. This is due as much to the solutions themselves as it is to the interface they are trying to control — mainstream OSs are just designed to work with a mouse and keyboard (or touchscreen in the case of tablets).

Media center software attempts to mitigate this issue by offering a single interface through which you can organize and access all the Internet content and local media. But much like the controller options, none are as user friendly and comprehensive as what you are accustomed to from your standard cable TV guide. Plex and XMBC are excellent in many ways, but Internet content in particular can be hit or miss. You may find you have access to hundreds of niche and little-known content providers, but not the major outlets you really want such as Netflix, Hulu, and MLB.tv. Or you may be able to access your Hulu Plus account this month, but not next due to a change in your operating system or the provider’s distribution technology. Blame who you want, but you should expect to do some tinkering to keep the system running the way you want, and even then you should be prepared to temper your expectations. Of course you can always use a regular web browser to access any content, but you’re stepping away from the standard TV interface to do that.

Digital Media Receivers

On the other hand, a digital media receiver (also known as a set-top box) is a specialized device with a very focused set of features. In theory, the benefits of this specialization are ease of use and reliability. For example, a media center operating system tends to be focused on Internet streaming and media playback, making for a simple, straightforward interface. This also means that the controller can be equally simple — most media center controllers resemble a TV remote but are less complex.

Rather than trying to do many different things like a full-scale computer, a digital media receiver just tries to do a few things well (and for a lower cost than the full-scale computer). Features vary depending on the receiver itself. The original Roku for example was strictly an Internet content streamer, and in fact began as a means for Netflix to provide streaming services to its subscribers. It has expanded to offer many other Internet content channels which tend to work well. On the other hand, the Apple TV device has traditionally offered a smaller number of streaming channels, but also integrates with iTunes on the local network to provide access to your own media.

There are many other digital media receivers on the market, each with a unique set of features that is constantly evolving. The Roku 2 XS for example now supports gaming channels with a motion control remote. The WD HD Live Hub includes a 1 TB hard drive to store media in the device itself. And D-Link’s Boxee Box includes a full web browser and a qwerty keyboard on the back of its remote control. That said, where digital media receivers shine is in their ability to simplify the management of digital and online content through a single intuitive interface.

The flip side of specialization is inflexibility. Whereas the latest Internet content can be accessed from just about any browser on a standard computer, most digital media receivers only have access to a certain set of channels. Yes, new channels are made available to such devices from time to time, but you are at the mercy of the device manufacturer, content provider or private developers as to the timing and quality of such updates.

Even less frequent will be updates that actually expand the functionality of a digital media receiver black box. For instance, if your device doesn’t support management of local network media files out of the box, it’s unlikely that it ever will. That may seem ok when you are willing to go without an existing functionality, but it may be disappointing to see a new feature released shortly after you make your purchase, e.g. gaming services.

Making the Choice

No analysis would be complete without a caveat or two. Hardware and software makers are well aware of the strengths and weaknesses of the solutions described here and are making strides to improve on both sides. The Windows 8 Metro interface to be released later this year may turn out to be a pretty good solution for managing media on PCs. More and more digital media receiver options are hitting the market with ever-expanding functionality. And if you are on the market for a new television, you have another option: Smart TVs, which have built in Internet TV interfaces that make an external media box unnecessary.

That said, the cost/benefits between the HTPC and digital media receiver approaches are pretty clear.  If you want a powerful multipurpose device that can provide a lot of different functionality including management of your digital media experience through a standard OS interface, then you should consider the HTPC. On the other hand, if you want something that will work out of the box and are focuses specifically on bringing Internet content to your TV, then the digital media receiver is a good solution. Factor cost in, and you should have your answer.

If that’s not a simple enough analysis, try this. Want to use a remote control that just works to control your digital content? Go with the digital media receiver. Need a keyboard so that you can do more with the system? HTPC.

Further Reading

Want to learn more? Here are some good articles on the subject:

Why Streaming Web TV Boxes Aren’t Ready For Prime Time March 21, 2012

Responsive Web Design

Posted by & filed under Web Development.

Responsive web design is a website development strategy that focuses on building sites that can be accessed properly across devices – desktop, laptop, mobile, tablet, TV, etc . This flexibility is driven by CSS3 media queries which allow the structure of the site to adapt to the browser and display on which the site is being viewed.

This website is built in WordPress, and the great thing about WP is that there is an ever expanding library of off-the-shelf themes to select from, including a growing  number of responsive themes. I’ll be trying out a number of them as this site gets started — currently I’m using Scherzo by Leon Paternoster.

For more such themes, here’s a review of  over 40 of responsive WordPress themes.