| Author |
Topic: Web Developers, Flash, iPhone, etc. |
Drew Howard
From:
48854
|
Posted 3 Feb 2010 2:26 pm |
|
http://www.slate.com/id/2243422/
I’m a web developer when I‘m not gigging and am starting to dumb-down some of the websites I built/maintain as the Flash components, tables, etc. don’t work on i-Phones.
I am thinking of adding either the hated splash page to some sites so surfers can choose between Flash or CSS versions of the site, or a redirect.
Any developers in this here neck of the woods?
http://www.drewhoward.com |
|
|
|
John Cipriano
From:
San Francisco
|
Posted 3 Feb 2010 4:38 pm
|
|
For the page you linked, the only Flash piece I see is the music player, top right. I doubt it will make much of a difference to the overall layout if it doesn't load...not enough to justify a landing page, anyway. What I do recommend for going forward, though, is to start using CSS & divs for layout rather than tables. Some benefits: content can rendered as it loads, content can be broken up logically in narrower windows (if you want it to), and it's just way easier than tables, especially when adding or removing things.
As an example, take the rounded rectangle on your site. One way to do this in CSS would be to have a header div that has the top bar and corners as a background, followed by a body div, which has as a background a repeating image that is a "slice" of the vertical bars, and finally a footer div with the bottom bar and corners as a background (like you've done, but in a div rather than table cell, and as a background image). In the body div you float a few inner divs corresponding to your columns. This will allow the design to stretch with the content, so that you can avoid using iframes.
There are a few good habits that I remember being really helpful as I made the transition to CSS layouts.
- Default style sheets: http://shapeshed.com/journal/default_styles_for_css/
(note especially the part titled "Remove default styles")
- Centering blocks with margin:auto. Avoid center tags, font tags, etc. You will want *all* layout code in a separate file, so that you can change designs without looking at any HTML.
- Declare a docstyle and validate against it. It will prevent weird rendering bugs before you spend hours tracking them down.
- Instead of making images of text, try dynamic font replacement. Cufon is best. I tried out a lot of things (sIFR, using PHP to generate images on the fly) before finding out about it. It's a lifesaver when you have dynamic text that you want in something other than Arial. http://cufon.shoqolate.com/generate/
an example where I used it: http://napolifoodsinc.com/products
I hope this doesn't come off as too critical. What you've done works, and it looks good. But you asked about making designs friendlier to non-standard browsers like iPhones and such, and CSS layouts are exactly how you do that. If you decide to go down this route and have any questions, feel free to send them my way.
Last edited by John Cipriano on 3 Feb 2010 4:44 pm; edited 1 time in total |
|
|
|
Cal Sharp
From:
the farm in Kornfield Kounty, TN
|
Posted 3 Feb 2010 4:40 pm
|
|
Flash seems to be on the way out, if you want your web pages to display correctly on mobile devices. Everyone thought Apple was nuts when they stopped putting floppy drives in computers, too, but who uses floppies anymore?
I've got some YouTube Flash videos embedded on some of my sites, and they won't validate. I think the answer lies in HTML5. I certainly wouldn't revert to the old splash page.
_________________
C#
Me: Steel Guitar Madness
Latest ebook: Steel Guitar Insanity
Custom Made Covers for Steel Guitars & Amps at Sharp Covers Nashville |
|
|
|
Wiz Feinberg
From:
Mid-Michigan, USA
|
Posted 3 Feb 2010 10:50 pm
|
|
I have avoided using Flash on any of my websites (except for third parts banner ads). I use external stylesheets, with some on-page special styles for those pages. to override the master styles. I use positioned DIVs, not tables, except where the data is tabular (e.g: copedent charts).
I recommend this approach to others. Also, get rid of FrontPage markup websites and fix them to use standard HTML coding, then validate them at W3C.
_________________
"Wiz" Feinberg, Moderator SGF Computers Forum
Security Consultant
Twitter: @Wizcrafts
Main web pages: Wiztunes Steel Guitar website | Wiz's Security Blog | My Webmaster Services | Wiz's Security Blog |
|
|
|
Drew Howard
From:
48854
|
Posted 4 Feb 2010 5:40 am
|
|
| Thank you everyone, this is the crew I'd hoped would reply!! |
|
|
|
Cal Sharp
From:
the farm in Kornfield Kounty, TN
|
|
|
|
Georg Sørtun
From:
Mandal, Agder, Norway
|
|
|
|
John Cipriano
From:
San Francisco
|
Posted 4 Feb 2010 2:50 pm
|
|
| Wiz is right, sometimes you need some CSS in the page itself. So the best thing to do in that case is to assign the element that needs styling an id (if there's only one) or a class (if there are many), and then style that element in the head tag. Resist the temptation to do, for instance, <a style='color:red'>, if only to preserve your own sanity should you decide to change it to a different color in six months. |
|
|
|
Wiz Feinberg
From:
Mid-Michigan, USA
|
|
|
|
b0b
From:
Cloverdale, CA, USA
|
|
|
|
Georg Sørtun
From:
Mandal, Agder, Norway
|
Posted 5 Feb 2010 3:47 am
|
|
Wiz, that book is OK but a little old by now...
For aspiring webmasters the SitePoint References is a better starting point - and free.
I'd also recommend membership in the Web Standards Group and the css-d, since there will always pop up questions - like in this thread.
I am a professional web developer, focusing mostly on front-end (design/HTML/CSS) and accessibility (WCAG etc.), and know how important it is for aspiring web masters/whatever to get the right information and understanding early on so they avoid wasting time. Web development is moving pretty fast in some areas... |
|
|
|
Cal Sharp
From:
the farm in Kornfield Kounty, TN
|
|
|
|
