Have you ever been to a website that loaded very slowly? Did that website have some images that loaded abnormally slow, even though they weren’t that large in size? The reason for that may be that the images were re-sized improperly, most likely with a WYSIWYG (What You See Is What You Get) webpage editor such as Adobe Dreamweaver. This problem could have been avoided if the images were optimized.
Adobe Dreamweaver is a very powerful webpage editor that can be used to customize just about everything on your website, including specifying or adjusting the resolution of your images. When you click on an image you have inserted into Dreamweaver, you get the properties window, which allows you to specify the size of the image (resolution) and a host of other options.
Notice in the the above example the image file size is 4162K. That means it’s about 4162 kilobytes (or about 4 MB) which is very large. Also notice that the W and H (width and height) values are both in bold. That means that the current size of the image (266 x 140) is not the actual size of it (4096 x 2160). If you click on the refresh button next to the image size Dreamweaver will resize the image to the proper size (4096 x 2160).
If you change the size of an image using Dreamweaver’s image properties tab, you will just be changing the image’s resolution and not the actual file size. Using this method to downsize large images will make the images load very slowly.
This is NOT a good method for re-sizing an image for a webpage!
Dreamweaver wasn’t designed to be used for editing images. The purpose of the width and height boxes in the properties tab is to specify a resolution (size) for the image or object you have selected if there are no dimensions specified. A much better way of optimizing images is with Adobe Photoshop.
Using Photoshop to Optimize Images
If you have Adobe Photoshop, then you have the perfect tool for optimizing your images to display on your website. Here are some quick and easy steps to optimize your image in Photoshop:
1. Open the image (File > Open)
2. Re-size the image with the image properties window (Image > Image Size)
Notice at the top of the window where it says “Pixel Dimensions:” that the file size of the downsized image is now 109.3K which is a whole heck of a lot smaller than the original image file size of 25.3 MB.
3. Instead of “Save” or “Save As” use the “Save for Web & Devices” option (File > Save for Web & Devices).
If you look at the top right corner of the Save for Web & Devices window you will see these options:
Most of the time, I alternate between the 70 and 60 quality setting depending on the size of the image. I have set this image to the JPEG High preset, which gives the image 60 quality by default. If you are re-sizing an image for a thumbnail (320 x 240 or below) 60 is a great setting because you won’t see any degradation in quality from the original. I use the 60 quality setting most of the time, unless the image is very large (1024 x 768 or larger).
Original quality vs 60 quality
The original on the left is full quality (no compression) and the optimized on the right is 60 quality. At this smaller size, it’s hard to see any degradation in image quality at the 60 setting. As you can see, the optimized image on the right has an estimated load time of 3 seconds for a 56k dial-up connection. Of course, most users today have cable and other much faster connections, but it’s nice to know that even on the slowest connection, the image still won’t take too long to load.
4. Upload the new and improved image to your website!
Now you’re ready to load the optimized image(s) into Dreamweaver or whichever editor you use for your website.
Video of Image re-sized using Dreamweaver vs. Photoshop Method
As you can see in this video, the image that was optimized using my Photoshop method (on the left) loads a lot faster than the image that was re-sized using only Dreamweaver (on the right). The optimized image loads almost instantaneously!
When I first got started in web design, I think I only had my hands on a few pieces of software. A few resources for fonts and no books rhyme or reason. For me it was a nail in the coffin from years of doing mobile computer repair and door to door sales. With more and more prospective asking me if I knew how to design and build websites, I finally decided to try my hand. Along the way I’ve learned quite a few tips and tricks. I’d like to share with you some of the most recent apps and devices in heavy use from the tool belts of our designers at our firm Design Theory.
Starting with Design, I highly recommend some books to get your creative juices flowing as well as some inspiration to show you that sky may not even be the true limit. If you’re more of a designer than a developer, you may find it easy to imagine a UI that zooms in performance and throws fireworks whenever a user finds exactly what they were looking for, and page transitions rained gold coins that provoked people to give you their contact information willingly without thought. Then you wake up and see a blank white screen with a blinking cursor. Yea, been there.
Your gadgets are important too. Don’t waste time or money on the cheap stuff if you can avoid it. They’ll only bring you to limits a lot faster than you’re learning new techniques and operating at faster speeds. Save yourself the “computer wait” frustrations and go out for bold early if you can.
Devices & Gear:
Macbook Pro
iPad (1st Gen, 2nd Gen, or the New iPad) Either will do depending on your level of production
iPhone, HTC (for email, document, and other management on the go)
A comfortable desk and chair. (Because you’ll be here for hours and hours)
Double Backup Hard Drives (Yes a backup and a backup for the backup)
A long desk for plenty of space
A widescreen monitor. You can do a 19″ but I’d suggest as big as you can afford
Video Conferencing: This is steadily growing as a necessity for us. Our clients and partners are all over the country and across the pond in Europe. So keeping in touch isn’t limited to phone calls and face to face meetings. In fact, a lot of collaboration gets done virtually in video calls. Some of which we record and share on YouTube.
APPS:
Skype
ECamm Call Recorder
Google+ for Hangouts
YouTube
This should get you going for now. If you don’t have many of these items don’t fret, just keep working hard and save to get there. I’m sure there are other apps out there I may not know so if you have any you’re using these days, feel free to share in the comments below.
I think its safe to say that each designer has their own way of doing things. When it comes to how to start a new web design project, there are quite a few ways to get started. I’m not going to say that any one way is right or wrong, but each direction does have its own benefits and trials. For example some starting points may take way more time then they need to and delay the actual development process. While others are have too much of a shotgun approach and may leave you doing more cleanup in the long run then necessary had there been more planning at the beginning.
Let me start off with the way we at Design Theory get started with a new web project. Again, no way is right or wrong, this is just a transparent look into our world.
1. Wire frame: Once your contract is signed and a deposit is paid, our graphic design team starts designing a mock home page. Depending on what the client’s needs and requests are, most layouts are pretty standard. We start off with a wire frame of boxes and rectangles as placeholders for content and images. Logo here, banner there, ads here, text and content here, images there. Once this is created for both the home page and at least one sub page, it will be passed on to the client for approval and signing. We don’t move forward unless we get a signed copy back.
2. Designing the Mock-Up: This part is a little fun because you’ll start to bring in some colors and realistic elements using Fireworks or Photoshop. Any design app that allows you to use layers. Then head over to Lipsum to grab some text filler for page body areas. Use the company logo and position it where you think it will best fit. Try some page backgrounds or menu colors and boarders to see how much more live the design looks. You may also want to design a few other sub page variations as well as the contact us page here too. Again, you’ll send this phase to the client for approval and signing.
3. Slicing: Some call this PSD to HTML, but the concept basically is cutting up all those layers and graphical elements from your design into individual graphic files. For example, the logo will now be saved as its own file with a transparent background, and so will the banner, and the menu boxes minus the text. Slice the navigation bar into buttons or formulate a working htm file for dropdown and linking functionality. You’re pretty much breaking down every part of your design to prep the development team to build the site.
4. Development: This is the fun part. Depending on whether or not your a coder I should say. At this stage you’ve got all the right elements sized or scaled to what they’re supposed to be. The functionality of menus and widgets have been explained and demonstrated so you can do everything you need to in a timely manor without any more interaction from the client. During the build process, you’ll also be checking for browser compatibility, what is actually see above the fold, font sizing, CSS, and overall flow of the each page.
5. Double-Checking: Hopefully at this point there are a fresh set of eyes overlooking the project. Check for broken or incorrect links, image alt tags, site map, spelling, grammar, lines and balance and attention to detail. Within our design firm we’re happy to have a content writer who’s not afraid to pick and tear apart our sites during development for inconsistencies and errors where we may have ignored or missed along the way. (Thanks Yvonne!) After this step is when you’ll want to present a semi-polished preview to your client. Having your ducks in a row will save your client from noticing small errors and focusing on the big picture. In my experience this stage is rather crucial because if you can’t get them to focus on the overall design and functionality, they’ll run you crazy on the minor imperfections that you can probably fix just as fast as they find them while on the phone.
That’s a brief run-down of what we do at our design firm. I hope this is helpful to you. If you have another way on how you start your design projects, please share in the comments below!
More and more individuals and businesses are using content management systems instead of static HTML sites. Generally, a content management system (CMS) is easier for an end user to update and maintain. However, there are a number of options when it comes to choosing a CMS. Here are some things to consider when helping a client find the content management system that is right for them.
How tech-savy is your client? One of the main reasons to use a CMS is to allow your client to update their own content easily. In order to do this, they will need to be able to use the admin panel. Consider how easy it would be for your particular client to add, modify and delete content. Some of the easier CMS options for a beginner are concrete5 and WordPress. For more advanced users, consider Joomla or Drupal.
What functionality does your client need? This is one of those where you need to find the best tool for the job. There needs to be some balance here–there obviously needs to be enough features to get the site to where the client needs it and perhaps even grow with them into the future, but at the same point it shouldn’t overwhelm them either. This dovetails with the technology level of your client-user.
Also consider also the plugins and the themes available and how they could benefit your client. I would recommend browsing both the official site of the CMS in question as well as any 3rd party sites.
What level of support is available? This is both for your benefit as well as the client’s. How often is the CMS itself updated and how well are changes documented? Is there an active community that you can ask for help if needed? What additional resources are available for you and your clients?
What is your level of comfort? Obviously your skills factor in. What technology are you proficient with? What do you enjoy working with?
Obviously there are many other content management systems available. What do you prefer to use—either on your own or with a client and why?
According to a study put out a few years back, 46% of small businesses do not have a website. While I’m sure this number has changed, there are still a number of businesses without a current website–or one at all. The following is a look at some of the reasons why a website is becoming more and more vital in the current economy.
Get Found: A good deal of searches for local businesses are now taking place from mobile phones. These are people who are literally on their way to you–if they can find out if you meet their needs. Having a good (and current!) site may be the difference between them choosing you or the business down the street.
Always There: If a potential customer has a question outside of your business hours, how will they get an answer? A website doesn’t shut off when business hours end, and so can be a way for people to get answers at 2am.
Credibility: In addition to marketing your business, having a website can build your credibility. It gives you a chance to perhaps address some questions in an FAQ or display your affiliations. In addition, blogging can be another great way to brand yourself as an expert and improve your Search Engine Optimization in one fell swoop.
Cost: Doing some research into advertising rates in my area, I found that a traditional newspaper ad, run for a week, costs around $500. If a small business were to advertise continually there, it would run them about $26,000 annually. A small business website generally costs significantly less than that. Also, traditional media might not have the desired visibility and is more likely to miss potential customers–they don’t pick up a paper that day and they don’t find you.
Competition: What happens when your competitor has a website and you don’t? People, in general, are more likely to trust (and purchase) from a well-designed current site. If that’s not your company, then you could be missing some revenue (and who doesn’t want more of that?)
These are just a few reasons why having a website is so vital. If you are the part of the 46%, please consider contacting jp Design Theory today to bring your business into the digital age.
The Problem: I, like many others, manage WordPress sites that I monitor with Google Analytics–which is an awesome tool. Sometimes, however, I like to visit my site and see how content looks live. Because I do a bunch of work on the go, it isn’t always conducive to filter out all the different IP addresses, so sometimes my visits end up getting counted and throwing my statistics off. This could also work if you have multiple bloggers and don’t want their visits to get confused with the overall traffic of the site.
The Tools:
A text editor. I use Notepad ++, but you can use whatever you like.
Your Google Analytics Code
Access to your WordPress theme
The Solution:
The solution is fairly simple, though it does require two minor adjustments on the part of the user.
First off, it will require that you login as an administrator prior to viewing your live site. This might take a little bit of getting used to, but what I’ve found is helpful is updating any bookmarks on my browser to go directly to the login page–just as a helpful reminder.
Also, some WordPress themes may allow you to insert Google Analytics code via their option panel. While this might be helpful in most cases, this particular workaround will not function correctly without further editing of the theme.
For starters, I recommend first creating a backup copy of your site files. Though this process should not mess with anything else, it helps to have a backup copy handy, just in case of something weird. Also, it might help to edit your theme offline and then upload it, so while I know that WordPress does have a feature to edit code, I prefer to test offline prior to uploading.
Open header.php and locate the </head> tag. Found it? Great! Now, right above it we’re going to add the following lines: < ?php global $user_ID; if (!current_user_can('administrator')){?>
< ?php } ?>
What this does:
Sets the $user_ID variable to global. This allows us to use the built in user functions.
The script then checks to see if the user is not an administrator using the “current_user_can” function.
Right now, this code doesn’t alter anything. That’s about to change! Copy your Google Analytics code and plug it in between right after the first ?>
What you have now (depending on your Google Analytics code) should look something like:
< ?php global $user_ID; if (!current_user_can('administrator')){?> <script type="text/javascript" src=" http://www.google-analytics.com/urchin.js "></script>
This should eliminate any logged in administrative users from showing up on Google Analytics as the script will only run if the user is not an administrator!
Alternatively, you can check if the user is logged in, and run it only if the user is not logged in. This is done by replacing if (!current_user_can('administrator')) with if (!$user_ID). (In case you hadn’t guessed, in PHP ! means “not”.)
Let me know, as always, if this works out for you, or if ! how I can help.
This is NOT a good method for re-sizing an image for a webpage! 
