With the development of user-friendly Content Management Systems, we now see many people using these tools to edit their own websites. Often times, this includes adding images to your page, and almost always you will want to work within a certain image size constraint so that the images will fit better into the layout of your site. Here are some simple guidelines to follow to ensure that your images are appropriate for the web and a easy tutorial on how to crop images to a specific size using Photoshop.

Have an image you want to use on the web? Check it’s size. If you are trying to use an image for a header banner graphic that spans the entire width (or close to it) of the website you will probably need more than 500 pixels. In Photoshop the easiest way to do this is to go to Image > Image Size and check there. No matter what the resolution is set at in this box, the number of pixels in an image stays the same (unless you modify the size while in this box). For web, 72 pixels/inch is always used but even if your image is currently set at a resolution of 300 pixels/inch the Width and Height under Pixel Dimensions will stay the same so you can at least know this and see if you have enough pixels in your image for the spot on your website you want to use the image for.

The absolute easiest way to crop an image and get it pixel perfect height and width is to use the crop tool in Photoshop. With your image open, select the crop tool from the tool panel (of you can use Ctrl+C on your keyboard). Once the tool is selected you will notice you have Crop Tool specific settings in the top bar. This is where the magic happens. If you know you have to create and image that is exactly 200 pixels by 300 pixels you can enter this in the bar. Just use “px” after your size to denote that you want to crop to pixels (as opposed to inches or centimeters) and make sure that your resolution is set to 72 pixels/inch (also called dpi). 72 dpi is the image resolution that is always used for the web because this is the standard resolution for computer screens.

Once you have the appropriate values entered in, all you have to do is click and drag your crop tool over your image to select the portion of the image you would like to crop and resize, then just double-click to finalize. One thing to keep in mind is watch the clarity of your image. If after make your cropping and the image seems to “pixelate” (it will zoom in a bit and get fuzzy) this means that your image was smaller than the size you chose to crop to and you have lost image quality. You may want to crop differently if possible, or use another image.

Once you are content with your selection the best way to save an image is to go to File > Save for Web and Devices. A box will pop up that will allow you to select what file format you want to use and how much you want it to compress the image (this will make the file size smaller to allow for quicker loading times). My go-to is usually a .JPG with a image quality of about 70. This will make the image a bit smaller without sacrificing quality. For larger images you may want to go a bit lower, but keep an eye on the image quality. If my image is already a bit low-quality I will save it with a quality of 100. I only use .PNG if parts of my image are transparent and .GIF is used for flat color graphics that need to be a small file size. Using .GIF for many images will mean a large sacrifice in quality. The preview window will show you exactly what your image will look like when it is output. This will help you double check image size and file size in advance, so take advantage of it. It’s better to consider things now rather than put your image up on your site only to notice then that it is the wrong size or has an issue with the image quality.

Hopefully this guide will give you a few tips or help you understand the tools a bit better if you are trying to prepare images for your site or even just check the sizing of images for you pass them on to someone else to use for a specific purpose.

We launched another great site for ITW Texwipe at http://www.texwipe.com! This site seamlessly blends the functionality of Hannon Hill’s CMS (the Products, Industries and Technical Data menus) with a full-featured ecommerce store (the Buy Texwipe menu), with shared navigation and design. This is the first project that integrated both products at the same time and, thanks to hard work by pretty much everyone on the software dev team at one point or another. 

BEFORE

AFTER

Other interesting features of the site:

• Ability to “hide” pages from different geographical regions, based on the “region” selection of the visitor in the footer.

• Transition of transactional applications from old system to new
• Email verification required to place order

According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.

This rapid growth is fairly normal for the internet — the average web page was 14KB in 1995, 93KB by 2003, and 300KB in 2008 — but by burrowing a little deeper into HTTP Archive’s recent data, we can discern some interesting trends. Between 2010 and 2011, the average amount of Flash content downloaded stayed exactly the same — 90KB — but JavaScript experienced massive growth from 113KB to 172KB. The amount of HTML, CSS, and images on websites also showed a significant increase year over year.

There is absolutely no doubt that these trends are attributable to the death throes of Flash and the white knight, if-only-the-internet-was-a-damsel-in-distress emergence of HTML5 and its open web cohorts. It’s curious that the amount of Flash content hasn’t shrunk, though, which suggests that this year’s 33% increase in web page size is mostly down to a significant increase in website complexity and functionality, and not some kind of wholesale shift from Flash to HTML5.

The only real problem with the data is that HTTP Archive only began operating in October 2010 — and so there’s no way to find out the long time growth (or decline) of Flash. HTTP Archive, incidentally, constantly scans 16,000 websites — a list that was cobbled together from sources like Alexa and Fortune 500 — and records the total data downloaded, the number of individual HTTP requests required to fetch all of the content, the size of the JavaScript, Flash, and image content, and a bunch of other metrics. If you’re wondering about the odd spike towards the end, that’s where HTTP Archive increased its sample size from 16,000 to 50,000 — so presumably, the web’s top sites are smaller (or better written?) than the dregs.

So, what’s the actual significance of web pages that are almost 1MB in size? Not a whole lot, when you consider that caching will reduce that amount by 70 or 80% — and the more important statistic, at least as far as latency and rendering times are concerned, “total requests,” only increased from 74 to 85 over the last year (and again, caching will reduce that by 70% or more). One valid concern is mobile 3G and 4G surfers, where carrier data caps certainly haven’t increased by 33% over the last year — but even then, many popular sites have mobile versions that use significantly less than 1MB, and again, caching!

We would now expect the size of web pages to slow down a little, too. 2011 will have been the year in which many developers switched from Flash (or other technologies) to HTML5, and it’s unlikely that their first attempts will have been all that optimized. In 2012, JavaScript libraries will be refined, and cleaner ways of using CSS and HTML will be popularized. Even so, expect more mobile offerings that compress data, like Amazon Silk and Opera Mobile, to emerge as well.

We’re proud to announce the release of the Greensboro Housing Authority redesign!  As always, Beacon was right on-time with our deliverables, which is always our goal.  The client chose a soft launch date of December 1, 2011 because they wanted to show the new site to their Board of Directors at their annual meeting that day.

Their Web site was designed and constructed in-house several years ago, which meant that it was time for a completely new look.  The site also had content that was very out-of-date, so the client took it upon themselves to do a complete rewrite of the content, and restructure the site to be more intuitive.  Also, they wanted to get away from having to update the site by-hand using HTML, and wanted it in a content management system.  Finally, they wanted a new Web hosting partner.

Enter Beacon:

• We provided them with a brand-new graphical design;
• Developed it to display perfectly in multiple browsers;
• Implemented the new site into Cascade Server (content management system) to allow multiple users to update the content with an easy-to-use solution;
• Incorporated a new search feature;
• Imported approximately 60 pages of content, including 20 fact sheets about each of their properties;
• Transferred their Web site to a shared hosting package here at Beacon.

Several Beacon staff members made this project a success:

• Wendy:  Without much direction from the client, Wendy put together a design that they liked on the first try, which is phenomenal.
• Stephanie:  She was instrumental in getting the project off the ground, attending the initial meetings and providing meeting notes, the business requirements, and proposed site hierarchy.
• Zed:  He was thrown into the fire, as this was his first development project here.  He developed the front-end HTML/CSS/jQuery, and implemented the site into Cascade Server (which he picked up on very quickly), and entered most of the content.
• Tiffany:  Provided assistance and training to Zed.
• Justin:  Project Management and Cascade Server documentation & training.
• Beacon’s Technical Support Group (TSG):  And finally, no site hosting transfer is complete without the efforts of TSG, specifically Caleb and William, for setting up the hosting and troubleshooting some DNS issues over a weekend.

This is another high-quality design to add to our portfolio, and another non-profit site we can be proud of.   Thanks to everyone involved!

Before

After

Designers hold CSS close to their hearts. It’s just code, but it is also what makes our carefully crafted designs come to life. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. The common conception among Web designers is that a good style sheet is created by hand, each curly bracket meticulously placed, each vendor prefix typed in manually.

But how does this tradition fit in a world where the websites and applications that we want to create are becoming increasingly complex?

Keep Reading….

We want to announce the successful completion of a new web site design for the Los Alamos National Labs’ Bradbury Science Museum. Beacon created a new graphical design for the website. No web development or coding was done. This project included mobile site design and print-friendly web site page.

BEFORE:

AFTER:

Thanks to Wendy Honeycutt for creating the design for this project.

When working on a new web site design, I often have projects where a client is interested in having a nice background pattern or texture as a part of their design. I recently found a great tool that makes background images extremely easy:

http://bgpatterns.com/

With this tool, you can choose a background texture, image pattern, foreground color, and background color. You can adjust the opacity of the image pattern, scale the image pattern to change the amount of spacing between the pattern repeat, and rotate the pattern.

You can preview the background image and continue to tweak it. Once you have the look you want, just click the download button, and you will get repeatable .png.

It’s so easy! I <3 this tool!

To read the full article: http://www.onextrapixel.com/2011/02/04/the-rising-importance-of-flexible-web-layouts/

“Just a few years ago, creating a fixed-width design and the coding to stick to that width was practical, as long as it could accommodate a wide range of users. However, just a few years ago, having the Internet on a cell phone was a luxury, netbooks were rare, and the convenient tablet device, such as an iPad, didn’t even exist. Now, a fixed-width design is almost inconvenient.”

Image credit: almekinders

We recently picked up a fantastic piece of software for designing WordPress themes called Artisteer. While this software doesn’t give you complete control over the content, its great for throwing a general layout which can be finely tuned after it is exported. Artisteer features an easy to use
‘Microsoft Office’-styled interface that generates your layout and scheme via point and click.

When developing for WordPress sites in this way, I religiously abide by the following development process:

Start with the Design/Theme in Artisteer.

• Start a new project within Artisteer with the WordPress CMS.
• Work left to right with along the menu tabs on the ribbon across the top. Within each tab, work left to right with the avaible options and settings.
• On the far left tab, Ideas, click Suggest Design until a base design to work from is found or skip this and build the page using the Layour tab.
• Each tab focus has a ‘Suggest’ button for the helplessly creative.
• As you work to the last tabs, the design gets fine-tuned across page elements.
• Once a design is ready for site integration, click the arrow on Export button at the top of the menu bar. Select Export Options…
• On the properties option window, enter the author name, url, template version, template URL, any associated tags, and a brief description of the theme.
• Once this is entered, export your theme as a WordPress Theme. Exporting the theme as standard markup is available too, but is of no use inside WordPress.
  

Integrate into WordPress.

• Start up your FTP app of choice, FireFTP is convenient if your a FireFox user.
• Navigate and transfer a copy of your theme folder to: /public_html/wp-content/themes/
• Log into your WordPress Dashboard. http://YourSite.com/wp-admin
• Under the appearance drop-down on the sidebar, select Themes.
• Your theme once uploaded, should be listed among the themes avaialable to your site. Find yours and click ‘Activate’.

Add Non-Artisteer Elements and Styles to Template

• Artisteer isn’t going to always have every part of your site. You can make these from the ‘editor’ in the WordPress Dashboard listed under Appearance, or use a text editor and FTP.
• Making these modifications require knowing the WordPress Theme structure. Much of the code is in PHP, so background there also helps.
• Inside of every Artisteer generated WordPress theme, you will have the following in your Export folder:
  

• Open and add/change markup to THEME_NAME/header.php for changes to the header area, usually META, LINK, and SCRIPT tags and body elements that precede the menu bar.
• Open and add/change markup to THEME_NAME/templates/page.php for changes to the pages Menu, Sidebar, down until the main content area is loaded.
• Open and add/change markup to THEME_NAME/templates/post.php for changes to the content area of posts and pages across the site.
• Open and add/change markup to THEME_NAME/footer.php for changes to the footer area, this is any markup that follows the pages main content area
  (May be contained within outter-most DIV if designed so within the ‘Sheet’ in Artisteer).
• Open and add/change markup to THEME_NAME/404.php for changes to text and verbage on the 404 page.
• Open and add/change styles in THEME_NAME/style.css for changes to the stylesheet.

Site Structure and Content

• After the above is said and done, all thats left is organizing the structure of the site and loading it with content.
• Under 'Settings > General', change blog metadata and primary options.
• Under 'Settings > Writing', set defaults and settings for publishing blog content.
• Under 'Settings > Reading', set a static or blog listing homepage and set listing pages to show either summaries or full articles.
• Under 'Settings > Discussion', configure comment restrictions and requirements.
• Under 'Settings > Media', configure media (image and file) restrictions and requirements.
• Under 'Settings > Privacy', configure whether the site is to be visible or not to Search Engines.
• Under 'Settings > Permalinks', customize the URL structure. I generally stick to Month & Name or a Custom Structure using: /%category%/%postname%
• Determine sidebar widgets and make active under 'Appearance > Widgets'.
• Load posts and pages with content in their respective sections. Keep in mind to setup categories for posts if necessary.

I just got back from a meeting in New Jersey with one of our long-term client (going on 11 years).  We launched their site in 2000, and did a full redesign and Cascade Server implementation for them in 2006. Now, in addition to online billing and account management enhancements, they want to do a redesign of their five Web sites.

One of my tasks was to present ideas for improvements to their sites in order to bring them into this decade. Admittedly, I had a hard time finding things that needed fixing since in 2006, Beacon did really great job on the redesign, and this client has done a fantastic job of keeping the site looking very professional and modern. While they’re not looking for a start-from-scratch redesign (just a “face lift”), it got me thinking about ways that the Web has evolved in the last five years. Below is a comparison chart that, in my opinion, is what Web development was like “back then”, and the way it is now.

Again, this is my perception of how it was, and how it is. Your opinion may differ. But the one thing I’m certain of is that Web sites need a refresh every so often to keep up with rapidly-changing browsers and standards, user demands, and the ever-evolving mobile world. And if you have a beautiful site now, it doesn’t have to take a complete re-do…just a face lift can fast forward your site to today.