When preparing images for the web and other online media, you often need to compromise between image display quality and the file size of the image.
That statement is straight out of Adobe’s help files and is really the heart of this discussion. A perfect picture in size and quality for the most part is too big (physically and in file size) to be useful on the web. Compromises must be made. This subject can go on for days, but here are some simple things to memorize.
Print – 300-600 dpi (dots per inch, printer resolution)
Pixel Demo
Web – 72 ppi (pixels per inch, monitor resolution)
Tuesday, April 14, 2009, members of the Chicago Dreamweaver met and enjoyed a presentation by Dennis Deacon on Information Architecture. It was a good reminder of it’s importantance and raised the understanding by many others.
During this meetup, we video taped the presentation to present on this site. Just a FYI, like the Cubs, we’re still working on it. Look for an announcement on the Dreamweaver Meetup site once it is available.
…so what’s wrong with tables, again?
From the late 1990s through the early 2000s, HTML tables ruled in laying out web pages. Simple, high-level layout with two or three columns quickly led to more complex layout requiring nested tables and nested tables inside of nested table. Transparent GIF graphics were used to force tables to provide proper gutters or spacing between columns of content. It soon became clear that while using tables for layout was fairly easy, this sloppy ease came with a hefty price tag:
Intertwine of Structural Code and Content: Placing the structural and presentational HTML code in the midst of all the textual content created an inflexible, unmanageable and inaccessible page & site.
Code Bloat: Table-based pages required a lot of table-related code for the structure of the site. Many times, empty table cells would be used simply to create space. Below is a typical page layout with no content (left) and the code behind this layout, again, with no content (practically a blank page with no value (right).
Table-based layout (left), and the related HTML code (right)
Maintenance Nightmare: If trying to find content embedded within all that code isn’t enough, try a redesign, which takes anywhere from six to eighteen months. This is the reason why most redesigns would actually be redoing the site from scratch.
Content Order: Content hosted within a table is always accessed in a top down, left to right order. This means a three column table would be access in the order it was represented on the screen. This is not optimal for text-based browsers, screen readers (for the visually handicapped) and search engine crawlers.
Inflexible for non-web platforms: Try to print a table-based layout or view one on a mobile device and you’ll quickly experience the inflexible nature of table-based layouts,.
Ok, you now know why table-based layouts are not the way to go. So why migrate to a tableless CSS layout for your web design?
Less Code: Lighter pages with less code and all presentation in an external stylesheet allow pages to load faster, search engine robots to more easily digest your content and are easier to maintain and redesign in the future.
More Flexible Content Delivery: Want a site that ranks better in the search engines? Is easier for text browsers or assistive devices? Organically adapts to delivery on mobile devices? Go tableless.
Now that we know why we’re headed toward a tableless layout direction, let’s take a look at the different type of layouts. Keep reading →
Following is a summary of topics discussed during January 2009’s Dreamweaver Meetup Mentorship series
Print vs. Web
We had a lively discussion on print vs. web design. Many examples of differences were tossed out, including typographical quality (150+ ppi vs. 72/96 ppi), fixed layouts & typefaces, interactivity, etc. The key to remember for web designers with a print background is that instead of controlling the design, you must allow the user to control the design. Therefore, designs must be created with a level of flexibility in mind.
Web Standards
We discussed how, by leveraging Web Standards, you gain in efficiency and flexibility. The power is unlimited. One example discussed was the ability to redesign an entire site by just recoding the CSS file, and never touching the content or HTML. The example discussed and displayed was the CSS Zen Garden. Keep reading →
The purpose of web design is to create an online presence that provides valuable content to the intended audience. What follows barely scratches the surface of web design, but covers three important topics that we should look at before we dive into the details.
We’ll take a look at planning a website; the goals for the website, the owning business or organization and the audience for the site. We’ll also look at competitive analysis. We’ll then look at creating personas to develop a better understanding on the site’s audience, wireframes to organize the page-level content, then creating the actual design in a graphic tool like Photoshop. Lastly, we’ll look at building, testing, then finally launching a site.
Welcome to the first post of the Chicago Dreamweaver Meetup site. This site is meant to support the members of the Chicago Dreamweaver Meetup by offering a central location for information and knowledge sharing. It is also the home of the group’s mentorship series, which will be posted on a regular basis. All are welcome to participate, become engaged, and share.
Look for updates, including the mentorship series schedule, and the first mentorship posting within the next couple of weeks.
Visit our Meetup.com site to join the meetup group, attend meetup events, and further the discussion.
Chicago Dreamweaver Meetup Tip
Subscribe to the Message Board at the Meetup.com site to join in on the discussion. From the Chicago Dreamweaver Meetup site, select Message Board, the select Track this Message Board.
