It’s been an ongoing debate since perhaps the beginning of time– can a person use their creative and analytical brains (right and left, respectively) with equal skill. Obviously, there were some who did it well–artist and inventor Leonardo da Vinci comes immediately to mind–but what about in today’s society, in particular the gap between web designers and developers. Should there be an overlap in skill sets?
While I admit that having specialization of labor, as a whole, has brought many benefits to society, in this particular case of website creation the two divergent mindsets are working toward a common goal. It is less like a composer and a biochemist and more like an interior designer and an architect.
Because there is a shared purpose and desired product/outcome, even if the design and development work is split between two individuals, there is the expectation that they will have to communicate to each other to reach the client’s goals. It becomes necessary,even on a basic conversational level, for both the designer and developer to understand parts of the other’s job and associated vocabulary. Ignorance here will benefit no one.
How much more of an overlap might be necessary depends on what type of services you offer individually. Obviously if you are a lone designer offering a PSD to HTML service, you’ll need to know HTML and CSS. If you are a solo web developer putting together a web app, being able to put together a cohesive user interface is a must. The right brain/left brain skill set overlap becomes then an extending of the basic level of understanding needed to interface with the other half–be it designer or developer. This is more, I believe, a matter of personal preference than a mandatory learning because it requires the individual to be confident enough in his or her skills to carry out the tasks of the other
While we can argue the merits of separation all day, the fact is that neither designers nor developers operate in a vacuum, completely cut off from the other. There is a symbiotic relationship between the two, put in place by the very nature of the work. Considering how tightly the Internet connects us all together, it seems even more counterintuitive to fight to keep the right and left brains completely divided. After all they do make up one mind.
Search Engine Optimization (SEO) is important to any website. Being able to show up in the top of search rankings heightens visitor traffic to your site and may have a significant impact on conversions–sales, subscriptions, and so on. While content has an enormous impact on a site’s ranking, one of the factors you may not consider is how the code itself may affect it. HTML5, while not fully supported in all browsers, can be helpful in getting search engine’s “spiders” to rank your content as more relevant.
What’s going on now?
HTML is not a programming language. It’s abbreviation gives it away as “hypertext markup language” which is a fancy way of saying that it tells your browser how to display the information–kind of like a graphic designer might layout a page, adding images and breaking text into paragraphs and headings. What search engine spiders (a.k.a. bots or crawlers) do is feed that information, gathering relevant bits of text so that the search engine can feed that, plus some other factors, into an algorithm which ranks your website accordingly.
In HTML4 –the version currently supported by all major browsers, though Internet Explorer is debatable sometimes (ha ha)— div tags are used to denote sections of the page–perhaps for styling reasons, or so the designer/developer can tell where he or she is. This is an example (though not the full markup for the page) and I have added comments to mark the end of divs:
<div id=”header”>
<h1>Page Title</h1>
<div id=”nav”>
<a href=”http://blog.jpdesigntheory.com”>Link to somewhere</a>
</div><!–end nav–>
</div><!–end header–>
<div class=”article”>
<p>This is some important main content–perhaps a blog post, or just the main portion of the website</p>
</div><!–end article–>
<div id=”sidebar”>
<p>This is not a portion of the main text.</p>
</div><!–end sidebar–>
<div id=”footer”>(c) 2012
</div><!–end footer–>
Did that take you a minute to get through? Imagine if I hadn’t commented–would you have been able to understand as quickly what was going on with the code? Admittedly, a spider is designed specifically to glean information off of a webpage, but it might not most relevant content. Also, in our example, our divs had relatively easy to understand names and was commented, which is not always the case and makes the interpreting job that much harder.
How does HTML5 change that?
With HTML5, the generic div is joined by a myriad other descriptive tags. These tags are used for areas found on most websites–like headers and footers . Here’s that same markup again in HTML5:
<header>
<h1>Page Title</h1>
<nav>
<a href=”http://blog.jpdesigntheory.com”>Link to somewhere</a>
</nav>
</header>
<article>
<p>This is some important main content–perhaps a blog post, or just the main portion of the website</p>
</article>
<aside>
<p>This is not a portion of the main text.*</p>
</aside>
<footer>(c) 2012</footer>
*Note the change from id=”sidebar” to <aside>. <aside> merely denotes an area that is not part of the main content, which could be a sidebar.
See how much easier that is to follow? The same is true for search engine spiders. They are able to identify exactly what is important and what might be lesser content on the page.
Because neither version of our example has any styling information, both would display (in an HTML5 supporting browser) as:
It has no impact on mere mortals not viewing the site’s source code, but can make life easier for developers and spiders alike.
It should be said that HTML5 is not yet supported in all browsers, so I wouldn’t recommend dropping HTML4 immediately. However, as browsers update to support these new tags, it is beneficial for business owners, site creators, and SEO ninjas alike to be aware that content might be king, but code is still the poet laureate.
What do you do if you accidentally put too much information on your website? If you use a content management system (WordPress, Joomla, Drupal, etc.) or have access to your website you can take down excess or unneeded information fairly easily. Pages can be removed and information can be hidden but what can you do if the information is already showing up in search results? Or cached results? Here is a quick and easy method for removing a page from Google Search Results pages:
Removing a Page from Google Search Results
1. Access your Google Account (if you don’t have one, sign up)
If you have a Google account, you should be able to log into the Google’s Webmasters section. After your website it set up, you can use some of the many tools Google offers. The tool you need to remove a page is called “removals.” Here is a link to the removals page: https://www.google.com/webmasters/tools/removals.
2. Get the URL of the page you want removed from search results (e.g. www.mycompany.com/aboutus.html)
URLs include pages, images, documents, etc. Basically anything on your server. If you can access the content through your website, Google can find it too.
3. Move and/or delete the page
The page cannot exist on the URL you are requesting to be removed from the Google Search.
4. Remove the URL
Fill out and submit a removal request, follow the instructions and wait. It may take a little while before the URLs are completely removed.
As you can see, Google has made this a relatively quick and painless process. However, if you want to have multiple pages you want removed from Google, it may take some time.
Clean (clutter-free and simple) website designs are very popular and give your website a very professional look. Here are 5 examples of clean designs that we hope will really inspire you.
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.
This is NOT a good method for re-sizing an image for a webpage! 
