Ok, a lot of Flash. That’s what I’ve been doing lately. I miss my beloved XHTML, CSS and jQuery quite a lot but I’m starting to do some more fun things with Flash at least. One of my recent projects involves creating a dynamically generated scrolling image gallery. When working on this I realized I needed some kind of a formula to calculate the horizontal spacing of each image so that they would appropriately spread no matter how many images were there. It took me hours to finally work out because, well, I ams not so goods with the maths anymore.
If anybody is looking to do something similar, I’ll save you the time by sharing with you the formula I finally worked out.
(TotalWidth – 2 * padding – LastPictureWidth) /(NumberOfPictures – 1)
Posted in Web Programming |
Tagged |
No Comments »
It’s January again. Outside it’s cold and gray, I don’t have a dime left after the holidays, I’m 20 pounds heavier than I was last summer, and there’s not much to look forward to until spring. What does this mean for me? It means it’s time for the annual “Do nothing but exercise and learn from free tutorials” time of the year!!! Last year around this time I taught myself jQuery, experimented with CMS and blog platforms, began object oriented Java and PHP, and improved my knowledge of databases. Considering that I’m now working primarily as a designer rather than a developer, I think I’ll be concentrating on Flash and Photoshop. I recently starting learning how to actually use the Pen tool and other things like custom textures and I now realize I never knew more than a fourth of what one can do with Photoshop. Hopefully I can truly call myself a Photoshop expert by the time spring rolls around!
Posted in Uncategorized |
Tagged |
No Comments »
Well, the blog has been live on this site for just over a year now. It’s crazy to think that at this time last year I had never touched any blog software, had not yet programmed any database interactions, didn’t even know what jQuery was, and could barely remember how to make a simple tween in Flash.
In this next year I hope to keep learning, get more involved in the local development scene, and maybe make some better use of this blog. Hopefully I’ll find the time to post some code tutorials and more snippets of wisdom.
Posted in Web Design, Web Programming |
Tagged |
No Comments »
So, big news… I just started a new job. I resigned as a Web Developer from Hal Leonard the day before Thanksgiving and started my new job as a Web Designer for Journal Interactive, the online division of the Milwaukee Journal Sentinel, on Monday December 14th. It’s very odd switching from spending 95% of my time coding to spending 95% of my time designing and I’m not sure which one I truly like better yet. I can definitely say that I’m enjoying my new work environment, salary, commute, and hours though.
Posted in Uncategorized |
Tagged |
No Comments »
Although I’ve always been astounded by how differently the various browsers treat code and how one developer’s approach to a problem can differ so greatly from another’s, it’s only recently really, I mean really truly, dawned on me how ridiculous this all is. At the heart of the problem comes the fact that so much of the W3’s work is ignored whether it’s by major corporations releasing browsers or by stubborn developers who are just going to stick with what the know. If a restaurant blatantly disregards an FDA guideline they are closed down but if company providing half the world with an internet browser blows off the W3 nobody thinks twice. If a lawyer tries to make an argument that violates the Constitution his argument is dismissed but if a developer blatantly disregards a W3 recommendation there’s no consequence. Just imagine all of the frustration and pointless bickering we would rid ourselves of if we all just listened to what the experts are telling us.
Posted in Web Programming |
Tagged |
No Comments »
Less Markup
A div based layout uses a fraction of the overall markup that tables do. Well styled divs replace the need to put align, height, and width properties in your HTML, they eliminate table rows and cells that do nothing but contain a blank space, and they reduce the amount of nastily nested ending tags that often reside at the bottom of our pages. Essentially, tag soup becomes tag tartar.
- Less markup means smaller file size for faster loading.
- A higher content to markup ratio for improved Search Engine rankings results from div layouts. Additionally, search engines can better navigation and group content found in the divs and lists used in CSS design.
- Less code means fewer opportunities for coding errors.
Quicker Development
Although frustrating and seemingly mired with problems at first, creating websites with divs and CSS actually takes far less time and effort than creating a table based site. As with any technology, you just need to take a little time to learn it.
Visual Consistency
After having created dozens of sites both with and without tables I have found that with div and CSS layouts it is much easier to achieve a visual consistency throughout the site.
- It is difficult to get every page to appear the same when using deeply nested tables due to the fact that one missed td or one missed spacer row causes text and image margins to appear off.
- During the development process any change made to the table structure of one page needs to be replicated on others. This becomes cumbersome even after only a few pages have been created and often a change made on one page fails to make it to the other leaving inconsistent layouts between the pages.
- One needs only to begin typing after a <div> tag near the top of the page rather than finding the proper table row 150 lines and 6 indentations into the code when using divs and CSS.
Code Readability
A basic div consists only of <div> and </div> tag while a basic table consists of <table><tr><td></td> </tr> </table> . All of these tags become further complicated with nested tables which eventually create a behemoth JSP which is difficult to dissect. Once the time is taken to learn div layouts reading through the page markup is extraordinarily easy. Unfamiliarity with the technology is not legitimate grounds for dismissing it as div layouts with CSS only take a few weeks to learn.
- I once taught a back-end developer div layouts for some admin pages on a website. Having no CSS and div experience he picked it up in a few hours and was amazed and how much simpler the JSP became.
- Using a CSS framework and div layouts my team was able to create the basic layout and integrate into it some image generating back-end code in less than an hour.
Improved Maintenance
Most will agree that the true power of CSS is in the way it allows a site to be redesigned or revamped without having to touch every single page in the site. Using a CSS driven div layout makes it possible to update the appearance of a site on a much more frequent basis without great effort.
- Although we go through painstaking detail to separate business and action logic in our Java, PHP, and .NET code we make no efforts whatsoever to separate content from layout in our page design. A well coded HTML page contains almost nothing but content while the CSS file contains all of the layout properties. Just as we create business, action, domain, and DAO classes for separation of work and easier maintenance in back-end code, we should do the same on our front-end.
- This article reviews the merits of CSS and comes to the conclusion that the separation of content from layout is the cornerstone of CSS: http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
- In order to change the layout of a table based site one must edit each and every page since the formatting properties are on the page. When changing the layout of a CSS driven div layout, it is possible to achieve site-wide dramatic changes with a few minor changes to one CSS file.
- The classic example of this is: http://www.csszengarden.com/
Select a design under the “Select a design” section to watch the site change its appearance completely without altering the HTML markup whatsoever. This demonstrates how much change one can make by only altering a single CSS file when using a div layout.
Javascript/DHTML
All modern JavaScript/DHTML/AJAX techniques rely on div layouts, with the obvious exception of tools designed for sorting and manipulating tables. Creating advanced DHTML interactions is time consuming and frustrating when using tables.
- The DOM structure for a div based site is much simpler than a table based site meaning that DOM traversing, a crucial component of many JavaScript functions, is far easier in a CSS layout.
- A great deal of DHTML simply consists of rewriting CSS rules on the fly. If the original HTML relies on tables instead of CSS for its formatting properties, this incredibly integral functionality of DHTML is rendered moot.
- Virtually all jQuery, MooTools, and Scriptaculous plugins and examples are coded to interact with div layouts on the page. Relying on tables makes it difficult to integrate the wealth of wonderful JavaScript tools into our projects.
Browser Quirks
The battle cry of all of those who dismiss div layouts is that it is not well supported by browsers. This is a fair argument but it is also an argument whose legitimacy is diminishing over time.
- IE6, by far the most problematic browser, can be targeted with IE6 specific style sheets.
- Most browser inconsistencies actually arise from minor coding mistakes which some browsers forgive while others do not. Simply correcting these mistakes often fixes these problems.
- CSS resets eliminate all browser default styles meaning that as you start your actual development your site will render consistently.
- CSS Frameworks like BluePrint come already tested and guaranteed to render correctly in all major browsers, usually back to IE6.
- Tables themselves do not render consistently across all browsers and are actually often much more difficult to style since many of the table and table cell properties such as “align” and “bgcolor” are deprecated as of HTML 4.01 (source).
Modern Design
Many modern design techniques are far easier implemented with CSS div layouts than they are with a table structure. Tiled backgrounds, drop shadows, and rounded corners are just a few of the examples of prevalent design trends made much easier with CSS.
- This website, as well as many others like it, feature fantastic designs that can only be realized through CSS: http://cssremix.com/
Thinking Ahead
With CSS3 on the horizon it is clear that all future advances in HTML markup are going to be done in a table-less CSS driven manner. Quite simply, there is a ton of new functionality being developed for CSS based layouts while nothing new is happening for tables. It is crucial to begin understanding CSS now as to not be completely left in the dust in the upcoming years.
Posted in Web Programming |
Tagged |
3 Comments »
Revelation of the month:
It’s tough to convince people that they need a good website, not a good enough website.
Posted in Freelancing |
Tagged |
1 Comment »
9 out of every 10 people who contact me about web design/development projects list Flash as one of their website requirements. Despite this, I have yet to talk to a single client who actually needs Flash on the site. For whatever reason, the general public seems to associate ANY interactivity and movement, no matter how basic, with Flash. I’ve heard all of the following reasons for why people think they absolutely need Flash on their site:
- Embedded Videos
- Photo Galleries
- Drop Down Menus
- Menu Hover Effects
- Dynamic Content
It’s funny enough that all of this BASIC website functionality is easily accomplished without Flash, but when you start thinking about the excellent interactivity that can be achieved with DHTML and Javascript libraries like jQuery and Prototype, Flash starts to seem incredibly obsolete. I don’t know who out there is informing everybody that they need Flash on their website, but man, it has to stop. My emails to clients are really turning into broken records, listing the project requirements one by one and explaining how that’s not Flash and why it’s better that way.
Posted in Web Programming |
Tagged |
2 Comments »
My two-month long redesign project is finally done!!! I spent a lot of time deciding what went into and what would come out of this revamped portfolio/blog and I couldn’t be happier. I decided to take out things like detailed “About Me” sections and the “FAQ” page since nobody seemed to ever read them anyway. The “Services” page also went away for the same reason. I went with a hybrid thumbnails/large images approach to displaying my work on the portfolio page and made a simplified contact form. There were a lot of subtle touches and tough editing that went into the final design and I think it turned out rather well. Now that this is done hopefully I can start some more freelance projects and get back to more regular blogging.
Posted in Web Design |
Tagged |
1 Comment »
Over the weekend I launched a new site, a personal blog that showcases my somewhat dark and self-deprecating sense of humor. The blog, Just One Day Without Failing, uses WordPress and a theme I made myself. It’s mostly pointless but I hope to keep it entertaining so check it out.
http://justonedaywithoutfailing.com/
Posted in Uncategorized |
Tagged |
2 Comments »