CSS3 or Jquery for image transitions

i want to build some simple transitions for images and a little text into my site similar to say what Honda have in there site - http://www.honda.co.uk/

Im using Dreamweaver CC. What do you think would be best to use, CSS3 animation or Jquery ? what do you think Honda used ? What would be compatible with most browsers, id want the transitions to work on at least 70-80% of browers ? I read Jquery will work with more browsers but its often slow. That being said CSS3 looks easier, and i will design the site so if 20% cant see the transitions the site will still work well for them and look good ( they will be able to click through transitons to the next image or message). Flash is a bad idea right as thats getting less browswer compatible ?

Thanks for your help. I used to design sites a lot 12 years ago but am a bit out of date now !

 

I'd say it really depends on what browsers your trying to support. CSS3 transitions are way more lightweight and easier, but its a new thing that a lot of old browsers wont support. I'm almost positive honda is using JS/jQuery.

 

thanks KewL, i guess id hope at least 70% - 80% of the browsers using the site would be able to see the transitons, so with what your saying it doesnt sound like CSS3 would be ok on as much 70-80% of browsers being used (the site would have an audience in both Europe and America and be mostly business users). so it seems like JS/jQuery like Honda would be the best bet. to get maximum compatibility on browsers ? There isnt an issue with speed and performance though on mobiles and tablets with JS/JQuery though is there ? I mean it wouldnt slow the site down too much would it ? Im not a brilliant coder so would use Dreamweaver CC to put in the JS/jQuery with the behaviours or such like. would you recommend that ?

 

what percetnage of browsers geting used now would you estimate can support CSS3 ? as low as 50%, or like as high as 80-90% ?

 

Really don't know too much about jQuery to answer that. As far as css3 support, you got gotta look at your sites statistics and base it off that. Looks like IE8, and IE9 do not support transitions, pretty sure a massive amount of people still use those. So unless your traffic consists of web hip people i'd go with jQuery. Maybe use jQuery as a fallback?

http://caniuse.com/css-transitions

 

yes, thanks KewL, ive come to that same conculsion now after doing some research. Problem is i thought it was going to be a bit easier than i thought with dreamweaver to put the JQuery in similar to that Honada site, but i was planing on updating my skils anyway, so think ive got bit learning to do ! Do you or anybody else know some good JQuery extensions to get the same effect as on the Honda site ?

 

To be forward looking you might want to use the transitions and have a fall back script for IE9 and prior. You can load the script conditionally by testing for old IE. Browsers that do not recognize transitions will simply ignore the CSS declarations. Then when the old IE no longer needs to be support you just have to drop the detection and script instead of having to rewrite to support CSS.

 

i found this site, really usefl as it shows current broswer % who can support CSS3 animations, its as high as 80% now http://caniuse.com/css-animation

so i figure i will do in CSS3 and do like you say, have fall back image for IE9 and lower, but have the animations for most who will be able to see them.

its a good thing in the end CSS3 looks best path, as im more a designer than coder, so its going to make things easier. CSS3 dont look too hard and ive a good book, half learned it already.

thansk for all your advice guys !

 

Css3 is best for image transitions.But it will work in Latest's browsers.

 

CSS does not just look easy, IT IS EASY. Just don't get into the trap of over styling or adding too many effects.. Animations can very quickly become a distraction instead of an enhancement if you over do it.

These CSS Best Practices Have been helpful to some developers.

 

Now, I HATE jQuery... It's fat, bloated, and craps all over every website it's used on. That said...

You'd be better off using jQuery than that steaming pile of manure known as Dreamweaver. Deinstall that halfwit nonsense you can learn NOTHING from, make microwave art out of it's DVD's, and get yourself a nice plain flat text editor and test in actual browsers!

That said, as to your question for doing the grunt-work of animations CSS3 is just badass... Partly because if CSS3 isn't available (old browsers) you will still in most cases have your image-swap or move occur, it just won't be animated. Mostly though, it's because it uses less CPU than JS and is far less complex to implement. While jQuery simplifies that implementation, it's still a complex CPU and battery chewing way of doing it compared to a transition.

That said, how do you want your animations to run? Continuous? When something happens? Continuous animations can be done with just CSS3, some triggered animations (like menu fade-in/out) can be done in just CSS3, but on the whole if it's event driven, you'll need a little bit of Javascript since behavior is JS' job.

For example, the "banner rotator" demo for my JavaScript library adds javascripted controls and sets things up with scripting, but uses CSS3 to perform the actual animations -- all the script has to do is swap classes around to trip the CSS.
http://www.elementalsjs.com/example.eFlipper
Live demo: http://www.elementalsjs.com/demos/flipperTest.html

Lets' dissect the opacity fade from that demo. The script, regardless of what animation is being done, just takes the previously shown (if any) image and strips the 'flipLast' class off it. It then takes the current image and replaces "flipCurrent" with "flipLast", and then sets the next image to "flipCurrent". No class, opacity 0, last opacity 1, current opacity 1. If you set an opacity transition up "transitionpacity 0.3s" for example, when the new image goes from classless to 'flipCurrent' it will fade in... making the previous image have a opacity 1 class leaves it in place waiting to fade out when it's class is flipped out.

For an opacity swap that's a simple:

.flipSlide {
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	opacity:0;
	transition:opacity 1s;
}

.flipCurrent {
	z-index:30;
	opacity:1;
}

.flipLast {
	z-index:20;
	opacity:1;
}

Code (markup):

In THEORY you could simplify that even further (I'm still learning) so all the script has to do is swap the current class.

.flipSlide {
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	opacity:0;
	transition:opacity 0 1s;
}

.flipCurrent {
	z-index:30;
	opacity:1;
	transition:opacity 1s;
}

Code (markup):

It's on my to-do list to rewrite that 'flipper' to use this method instead. On that first transform the first number is how long the transition should take, the second number is a delay before it should be done. Normal ones will wait 1 second before blinking out of existence, ones with the flipcurrent class will slowly fade-in over 1 second.

One of the BIGGEST advantages though is that even when you have to resort to javascript, you can use the same script for many different effects, or disable effects altogether with media targets as 'how it's shown' is entirely CSS based. In that flipper demo of mine for example, all the animations on that page are running using the same CSS -- the only difference in animation is ONE class on the outer container; no extra class it does opacity. add "flipSlideDown" to the container and they slide in from above... add "flipSlideUp" you can use the slide up animation -- That's slick. I like that... a lot.

If you look in the CSS:
http://www.elementalsjs.com/demos/eFlipper.screen.css

...and go down past the "animations" comment, that code is all it takes for all nine of the different animations used there. Try implementing those animations in JS, and you're looking at ten to twenty times the code.

So yeah, CSS3 all the way, EVEN if you're going to be doing behaviors using JavaScript. Part of why ~70% of jQuery's codebase belongs in the trash now.

 

You know, I rarely agree with more than half of most articles, but that's a really good one -- even if I do disagree with the first point; one stylesheet per media target (screen, print, etc) reduces handshakes, speeding page load, and you can use it to pre-cache appearance of other pages the user might visit. I still say if you need more than two separate stylesheets on a page per media target you're doing something wrong... and that's one file for the site, one for the specific page.

But my viewpoint on that is skewed; I've never written a website (including an entire forum skin) that was more than 48k. It's why I cannot fathom what the devil people are doing when they have hundreds of K of CSS or more. See the idiotic halfwit nonsense known as bootstrap, which is by itself larger than I'd make an entire site template (not counting content).

 

thanks guys, CSS3 it is. why do you object to Dreamwever so much deathshadow, you sound pretty strong on code but my background is much more design, and building a site in code and keep previewing in a broswer would be difficult and time consuming for me, and right now i dont have that kind of time. As long as the code dreamwever writes does the job ?

 

If you restrict yourself to code-view, you can ALMOST make decent websites with it, but at that point you just threw money away on a bloated, slower less capable version of your typical notepad replacement like Flo's Notepad 2, Notepad++, EditPlus, etc, etc...

If you rely on the idiotic WYSIWYG/preview pane, don't micro-manage what it has the giant brass pair to vomit up and call markup, and rely on it's broken halfwit outdated code and even more broken/idiotic 'wizard' type nonsense for doing things, the resulting site is an inaccessible slow loading mess.

Generally speaking, from the use of scripting to do CSS' job (all those stupid mm_ js functions), non-semantic markup (thanks to the WYSIWYG), and code bloat (from inlined presentational style) is a laundry list of how not to build a website, and people making websites are dumber for that crap even existing. Screen readers, search engines, non-style users, scripting disabled users, and people using non-default system font sizes will all get the shaft from taking such a sleazy and pointless shortcut.

Define "design" -- print? PSD's? Nothign to do with building a website if you care about speed and accessibility. There's a whole slew of stuff you can do in either that has no business on a website in the first place.

Really "Design" before "content" is broken methodology if you take the time to understand what HTML is for; device neutral delivery of content. The whole reason it exists is to create markup that can be customized for multiple device and user capabilities -- from print to braille to aural; from 22x20 VIC-20 to 1152x900 Sun Workstation to 4096x2880 bleeding edge displays...

... and that is why dicking around drawing goofy pictures in Photoshop -- no matter how many of them you make -- is putting the cart before the horse and a completely back-assward approach to web design; no matter how many scam artist PSD jockeys will try to tell you otherwise.

Therein lies the problem with WYSIWYG's and preview panes; what you see is almost guaranteed NOT to be what your visitors get; with the wide variety of device capabilities and sizes, with differences in rendering engines and default font sizes, the very notion of making a visual design before you have semantic markup of your content and an actually working layout is so completely back-assward I have difficulty fathoming how anyone other than sleazy scam artists would choose that approach by choice.

Of course, there is WAY too much emphasis on flash over substance right now, with pretty much anyone hiring a "Designer" these days being taken for a ride by a scam artist -- see EVERY SINGLE halfwit ineptly coded inaccessible train wreck people have the brass to call "templates" on nube predating whorehouses like ThemeForest and TemplateMonster.

I keep hearing that nonsense from people -- really? Alt-tab F5 is "difficult and time consuming"? If you aren't testing AS YOU GO in ALL the major browser engines (and several legacy ones) don't come crying to forums like this when your completed layout doesn't actually work anyplace except the stupid preview pane crap in that bloated overpriced pile of manure.

If you don't "have the time" to test in actual browsers, you probably shouldn't be designing or developing jack **** for the web. Sorry if that sounds harsh, but it's the truth. If you actually think that preview pane / WYSIWYG has ANYTHING to do with what it's going to look like in real browsers real-world, you're in for a nasty shock.

Depends on your definition of "does the job" -- if you can live with an inaccessible buggy broken train wreck of how not to build a website... Particularly if you do something REALLY stupid like use a WYSIWYG becuase again...

What you see is most likely NOT what your visitors are going to get.

I think that's the hardest thing for people from a "design" background to grasp; it's the entire reason we're told to use semi-fluid elastic responsive design these days, and pretty much the folks relying on WYSIWYGS, or sleazing out HTML 3.2 with 4 tranny or 5 lip-service around it will never actually grasp WHY.

 

<I keep hearing that nonsense from people -- really? Alt-tab F5 is "difficult and time consuming"> of course previewing it doesnt take a lot of time, but building everything in raw code does, if your not a techie, does.

You say <HTML is for; device neutral delivery of content> but the purpose of interent is to dispaly a companies content in a way that looks good and enhances there marketing image.

Of course the code must work well enough for the site to load OK and do what you want. Of course you have to test that on different platforms as you go along.

But at the same time the way the site looks is crucial. When you watch a TV advert, what do you think is more important to the person paying the advertising, the way the ad looks and what it says, or the technical functionality of the transmission ? So long as the site loads in ok on different platforms then the design is actually crucial.

So while i agree with you that there is no point in a site looking good if the code doesnt work ok on various platforms, there is also no point in a big company trying to enhcance its image with a site that looks bad designed by a coder.

 

That is only one of many purposes of the Internet; after all it's origins was as a military tool and a way for students, researchers and scientific professionals to share information.

Though you have a good point about "looks good" -- but what if it ONLY looks good in ONE place for a small group of users? You use the WYSIWYG you might have something that looks good for a large screen desktop user, but how's it going to hold up on a Phone? A Tablet? A netBook? A cheaper notebook? How's it going to hold up on a 4K pixel width display? How does it 'look good' if the user has to dive for the zoom thanks to uselessly undersized fixed-metric fonts then encounters a fixed width layout that falls apart miserably? How good is it going to look if it bombs for users who don't happen to use the magical modern browsers? What if they go to print it? What if they're not even on a visual user-agent at all? (braille, screen readers, search engines)

Worse, how bad is it's bloat going to hurt your pocket on hosting costs?

The problem is if you use a WYSIWYG, it's not GOING to look ok on multiple platforms, because unlike a TV transmission you don't just have one device target... NOT that TV transmission is all that great an example anymore since PROPERLY done you'd record in 16:10, planning your shots for 16:9 and 4:3 cropping / pan and scan-- unless you want bars or distorted viewing angles that a lot of users are going to be annoyed by. The web is FAR worse since it's effectively like planning for a million different aspect ratios, on dozens if not hundreds of different devices of WILDLY varying capabilities.

That's the problem though, using a WYSIWYG or pissing out a PSD before you have code IS going to look bad for someone somewhere at some time. I've never seen a website built using a WYSIWYG or starting from a PSD that wasn't an accessibility train wreck that did more damage to the site owners reputation than good.

There's a reason we've been told for over a decade to use semantic markup, separation of presentation from content and to follow things like the "Web Content Accessibility Guidelines" -- and you're NOT going to get that out of a WYSIWYG... nor do you end up with that 99.99% of the time you start out worrying about what it's going to look like ahead of what's actually important -- the content.

After all, people visit websites for the content, NOT the goofy graphics you hang around it, scripttard nonsense pissing away the accessibility, or dozens of other broken practices people seem to be making sites with that to be frank, relegates them to being doomed to failure, a money pit if you have what it takes to keep it afloat regardless of what crap it is, or a web-rot "also ran".

It's a hefty chunk of why most web start-ups fail within their first year; and why most brick and mortar businesses are stuck with an expense instead of an investment.

 

well there is a simple soultion to what your saying isnt there, just test as you go along in browsers on both desktop and mobiles. If its not coming out well then tweak it as you go.

I used to design websites about 12-13 years ago for pretty big London agencies for pretty big clients. This same debate was gong on then. Some agencies used designers to dessign the look, and then coders built it in HTML using the design format worked out by the designer. Other agencies used fireworks and dreamweaver. While dreamweaver did not always load well most times it worked well enough - and i did used to test my work in various broswers.

Since then ive done different things so im coming back to it now out of date.

Are you saying the Dreweavers coding has got worse because there are more platforms now to consider like Mobile. I had planed to build it repsonsively with a fluid grid in Dreamweaver CC. And i was hoping that would do the trick in enabling the design to translate ok on different screens. Of course i will preview as i go along with the design and was hoping the fluid grid would do the job in making it work well on desktop, mobile and tablet.

But if you think thats still going to be problematic, as my coding skills are limited do you think id be better of using something like Wordpress and a template which presumably use better code ?

 

Wait for it. :-O
I'll let ds handle that question, but unless you're going to learn javascript and PHP, you're limited to static front end coding. And that, my friend is not that difficult as long as you write a well structured document (sort of like typing a paper on a typewriter) and apply semantic tags. there just aren't that many element tags you need to learn. As for CSS, if you're well structured and semantic, that is usually pretty straight forward.

cheers,

gary

 

you know if both you and ds are saying a decent template is coded so bad its not going to hold up i have to say its different to advince im getting from my brother who has been working for decent sized london companies as a web designer for the last 14 years, and another friend who runs a web design company and does quite well, and even has the Yankies in New York as a client.

that been said i am tempted to learn the coding properly. I am not a complete nob at coding as i did manage to learn actionscripting in falsh quite well 12 years ago. How long do you think it will take me to get to grips with it, like two or three weeks ?

sorry another questin for you two if you dont mind. What do you think has worse code in it then, WYSIWYG in drewamweaver or a template and wordpress ?

im quite confused how two people with over a decade experience would think a template would be good enough for my purposes, yet both of you two dont. Roughly want percentage of broswers do you tink would experience problems with a decent template ? like 20% or something ?

I really would have thought decent templates would load in well on 98%+ browesers, are you saying thats not the case ? Im suprised, are there not any companeis that sell templates with well written code ? why not ? thats very suprising.

If i really need to learn the coding side better i will. I did learn the basics of HTML 12 years ago and Flash actionscripting.Im sure if i got stuck into HTML5 and CSS i could learn it, i already know some of the basics.

at the same time these chinese companies have been already waiting some time and i cant afford to delay things more than a few weeks, there potential partners not just clients, if these sites go well they make us partners with a share in the business so i need to do a good job.

if learning the code well will take more than two weeks, i could just go for a template or dreamwever wysiwig, get that up quick in a few weeks, then improve my coding skills and upload an updated site with improved code a month later or so.

appreciate any advice though dudes.

 

It really comes down to a simple choice. Your design, or your design limited by the skills of the author of some third party piece of junk. If you have a simple design that works within the limits of the vision and creativity of a template author; then go ahead and use it. No one will notice or care that you are now available to join the herd of the mediocre. You can spend your time trying to make bloated, inflexible; and in many cases invalid code do what you want. Of course you will need to take time out to deal with the security vulnerabilities that come with the territory.

The second choice is, learn to actually write your own code. It does not take long to get up to speed if you have some previous experience. I don't hire tool monkeys because I can get that kind of work from school kids for minimum wage. At the time I retired I got $160.00 an hour to manage projects and the people I hired earned 40 to 75 an hour; but they could create, code, test and implement using their own skills. Tool monkeys are a dime a dozen; though a few have develop a niche where they make a decent living. If you are using the same tools as school kids then your value is no more then then the kids, and the kids who have developed real skills will kill you in the market place when they graduate.

However if you have an immediate need to deliver something to an agreed upon schedule then hacking it together might be necessary using whatever is available, but going forward you are not going to get paid top dollor without a unique style of your own.