Help Me Pimp Their Site Please...

November 9, 2011 10:23 AM

Doing some web design after being out of it a long time and my brain isn't in gear. I'm admittedly rusty and oblivious to the latest trends, codes and plugins for designing some of this basic stuff right now. Main goal: if I can make my client's dream site an awesome reality in a quick manner while remaining as lazy as possible, that would be fantastic! ;)

I've been so out of it that I'm using a version of Dreamweaver I bought in 2007. I do know some HTML and CSS... mainly I'm trying to figure out the fastest, easiest and best ways to fulfill my client's dreams for this without reinventing wheels, wasting time, or spending all day doing tutorials to figure out which approach to take.

1. My client has asked for a 700 pixel wide Flash animated slideshow on the home page but for obvious reasons I don't want to use Flash and have people not be able to see it. I don't think an animated gif or an embedded movie is right either. I dunno... what are people doing now that will be the smallest size, fast loading and good quality? Tips?

2. They want various pages with "fancy photo galleries" of 10-20 photos each. Suggested approaches?

3. It's for a historic museum and they would like to feature "chapters of informational copy that can be read with swooshing a finger instead of scrolling down the page." I'm just trying to figure out the best way to keep the text above the fold, organized and inviting to read, with a few photos here and there... Their old site was the poster child for tl;dr. I'm getting them to edit, but there's still a lot.

Thanks in advance for your help! :)

posted by miss lynnster to computers & internet (15 answers total)

Understanding there are lots of ways to do this, personally I'd use Wordpress and Slideshowpro as the core components.

For loading PDFs inside your layouts you could use Flexpaper.

Scrolling is going to be handled by the browser and device, though - "swooshing a finger" instead of scrolling isn't going to be something you can offer directly.
posted by odinsdream at 10:29 AM on November 9, 2011 [1 favorite]

1. Jquery slider
2. There are a million gallery scripts out there. Again, jquery.
3. Does not compute. We do not use the term "the fold" anymore. The fold where? On what? My desktop web browser? My netbook? My iPhone? My iPad? Try a horizontal navigation and let the text paginate itself based on the browser size or something.
posted by DarlingBri at 10:31 AM on November 9, 2011 [2 favorites]

DarlingBri - I will always say the fold. It's how I roll. I'm old. I'm a rebel.

What I mean is that when it's viewed on an iPad or phone or computer I am trying to keep the text readable without scrolling the page down.

I would rather not use WordPress for this particular thing, I think.
posted by miss lynnster at 10:38 AM on November 9, 2011

I will always say the fold. It's how I roll. I'm old. I'm a rebel.

I think the point DarlingBri was trying to make is that while a few years ago you only had to worry about 2-3 different resolutions that were all the same aspect ratio, the number of devices, resolutions and aspect ratios out there make trying to keep content 'above the fold' is practically impossible.
posted by missmagenta at 10:53 AM on November 9, 2011

What I mean is that when it's viewed on an iPad or phone or computer I am trying to keep the text readable without scrolling the page down.

Well you can't. The viewport on an iPad is different than a Blackberry is different than my browser is different than your browser. There is no fold anymore. It was eaten by the device marketplace and then spit out by the requirement that text be resizeable by the viewer.

Nivo Slider is a JQuery slider that has also been rolled into a WP plugin but if you're not using WP, just use the standard version.
posted by DarlingBri at 10:59 AM on November 9, 2011

How much HTML and CSS do you know/remember/want-to-muck-around-with?

If you want to stay away from code, I wonder if Muse would fit the bill. It's still in free beta. I've only played with it a little, but it looks like it has bit and bobs like slideshow widgets. (I can't speak to the quality of the code it produces, but it can't be much worse than the older versions of Dreamweaver.)
posted by ann_disaster at 10:59 AM on November 9, 2011

1. There are plenty of jQuery-based image sliders out there. Try Nivo Slider or Easy Slider or View.js or Galleria etc etc etc.
2. The same or similar scripts can be used for these. Galleria might be perfect.
3. That's fine, and I understand where they're coming from, but you're going to need to manage their expectations. That quote you've given is a bit worrying, as most people aren't (at least today) going to be viewing this on a touch-sensitive device. I think you need to read up on responsive webdesign. This is the practice having different CSS load depending on various attributes, most commonly the screen width. Here's the most commonly cited article at alistapart.com. Chris Coyier recently did a good screencast on it, which goes over a few principles and talks about about some useful resources etc. CSS Tricks itself is quite a good example of responsive CSS. As you make the browser narrower and wider, various elements move around to give you a good view of the content.

Btw, depending on how lazy you want to be, and depending on what their requirements are, using Wordpress could be an excellent choice. You say you've been out of the webdev game for some time? Wordpress has matured significantly and is powering a significant number of sites. They don't have to be remotely bloggy. For instance, it's powering both of these completely different sites. Usefully for you, this means that there are a significant amount of resources and themes available for easy plugging in and tweaking.
posted by Magnakai at 11:00 AM on November 9, 2011

I 2nd taking another look at wordpress. There are a few sites with tons of wordpress themes at very affordable prices with amazing functionality covering at least your slideshow and picture gallery requirements. I have used themeforest.net a few times now with good success.
posted by scrubbles at 12:07 PM on November 9, 2011

Wordpress + JQuery is definitely the way to go. It's important to know HTML+CSS, but the days of worrying over code (and trying to get it all cross-browser, etc.) are pretty much over.

But really, if you're not up-to-date on using modern tools and designing for multiple formats, you're doing your clients a disservice.
posted by coolguymichael at 12:10 PM on November 9, 2011 [1 favorite]

I already started it, not in WordPress. If I may link to it so people can see what I'm doing and express help easier, that would be awesome and appreciated. The slideshow is just for placement, really. Im just slogging through. Other than ITALIANS IN LA>COMMUNITY the links don't lead to anything yet.
posted by miss lynnster at 12:35 PM on November 9, 2011

At this rate, it may be the last site I ever design... Grump.
posted by miss lynnster at 12:37 PM on November 9, 2011

The reason people are suggesting Wordpress is that it's a dead simple CMS that you can really strip down and use for your specific goals.

It makes it simple to add pages, adjust content, and rework themes without messing up the whole site or re-coding huge chunks of it.

There are a variety of CMS options, of course, that serve the same purpose. I do highly recommend you pick from among them, though, rather than coding the site by hand from scratch. There's no reason to re-invent these concepts. If you don't use a CMS, you're seriously doing your client a disservice because it's a nightmare to edit later, especially for some future developer taking on the project.
posted by odinsdream at 7:56 PM on November 9, 2011

I feel like now I'll have to start from scratch to learn to recreate this in WordPress. Now I'm more stressed than I was before.
posted by miss lynnster at 1:29 PM on November 10, 2011

This discussion may be helpful, specifically artlung's comment.
posted by odinsdream at 3:08 PM on November 10, 2011

You really don't have to start from scratch to make a Wordpress theme, and I'm not even necessarily saying it's the best option, only that it's well worth considering as a CMS. If the client doesn't want to pay for a CMS then that's their prerogative, but make sure they know exactly what that entails in terms of upkeep costs.
posted by Magnakai at 9:56 AM on November 13, 2011