General Question

serenityNOW's avatar

Another website design query (Details...)

Asked by serenityNOW (3293 points ) May 29th, 2013

A company is considering me to build from scratch an entire site. I could really use the work. Amazing timing! Anyway, they were showing me a drop-down selector/match-maker – actually, I’m not even sure what to call it. Well, it’s here – basically the whole page is that drop down.

So, does anyone know anything about that style? What it’s called.? What programming language(s)? I’d really like to achieve that, but with my current skills, I’d have to use a template/pre-written code, or hire a programmer…

Bonus Points:
I’m probably going to use Squarespace for the layout since they make it pretty easy to do the heavy-lifting. Will that be a complication. I want to keep is as simple as possible

Observing members: 0 Composing members: 0

19 Answers

Blondesjon's avatar

I would recommend looking in to writing scripts using jQuery. I’m currently in the process of designing a site myself and have been amazed at what can be accomplished now with just a few lines of code.

There are some great pdf programming manuals, covering all kinds of programming language, available for free here. They range from very simple beginner guides to some advanced shit that will rearrange your brain.

rexacoracofalipitorius's avatar

I had a look in the source, and the drop-downs are divs turned into a poorly-implemented version of a select element with JS and CSS trickery. This is dumb IMO, and it breaks the DOM.
So, I don’t recommend you emulate that. You can dynamically populate select elements on the server side easily enough, and most of those drop-downs only need a few static options anyway. My advice is to follow w3c standards as closely as possible when doing web dev, only breaking them for browser (IE, ahem) compatibility.

Also, this is worth a look:
http://www.w3fools.com/

They make some valid points about w3schools, but you might not want to take as gospel the words of people whose website looks like that.

serenityNOW's avatar

Okay, this is all jumping the gun because I won’t know if I got the gig until Friday. The interview was very positive. However this is stuff I should know, anyway.
Having said that, @Blondesjon, that seems like a good resource, and I did download a book, but it’s not practical that I could possibly learn this stuff, implement it and have it work consistently without any bugs in the time-frame I suggested. I’m working from scratch here, so I’ll be doing it all. (Graphics, Logo, and of course the entire website.)

What I’m really hoping for is maybe some sort of template/plug-in I could work off of. I just don’t know where to look. Maybe Wordpress can help me. Or some custom Jquery that I can incorporate elsewhere.

Again, though – no need to get ahead of ourselves, although if anyone wants to keep there fingers crossed!

Blondesjon's avatar

Good luck! Let us know how it all washes out.

serenityNOW's avatar

@Blondesjon – Man oh man, I hope so!

ETpro's avatar

@serenityNOW It sounds like a fun project, but after 20 years developing websites, I can tell you that bidding work you aren’t currently sure how to do does not take you to a place any rational person would call Serenity Now. What programming languages do you currently really grok?

phaedryx's avatar

@serenityNOW I would recommend learning a front-end framework like Twitter’s Bootstrap or Zurb’s Foundation. Both can be really helpful for quickly setting up a nice website. Bootstrap is more popular, but I currently favor Foundation. I think what you want is something akin to the “content dropdown” seen here: http://foundation.zurb.com/docs/components/dropdown.html

For front-end web development, solid HTML, CSS, and Javascript skills are a must. On the back-end, you’ll probably need to know something about databases and a language like PHP, Python, or Ruby.

@rexacoracofalipitorius don’t judge a book by its cover, the people listed on w3fools.com are all highly skilled and influential.

serenityNOW's avatar

@ETpro – HTML & CSS. Plain and simple. But even after 10 minutes of scanning the web I found this Wordpress Plug-in. You’re right on the money, though, and I’m trying to mentally phrase something that I’m going to write to them, along the lines of “I don’t want to overstate my abilities and can’t create this out of scratch, but I’d love to help…”

serenityNOW's avatar

@ETpro – I wrote them an email saying I don’t want to overstate my abilities, that I’d have to use a plug-in for something like Wordpress, that I’m active in the design community and definitely can’t simply start at a blank piece of code and write this from the bottom up. It’s true, I need to maintain my Serenity (cute!) and I can’t sacrifice my stability just to be up for two-months straight fighting with one component of a big site. However, is this is a big component? Their information is scant right now, but we’re going to have a 2-hour “sit-down” followup that will reveal more info.

@phaedryx I’ll check all those out and I really need a kick in the rear to learn JavaScript. Is it really easy and I’ve just been over-complicating it, or are there people out there just don’t get it?

rexacoracofalipitorius's avatar

@phaedryx I agree about w3fools.com, I was just having a bit of snark there.

@serenityNOW JavaScript is pretty simple, particularly to those of us used to C-like syntax, but it’s a bit inconsistent and there are a lot of ‘gotchas’. In my experience, some people find it hard to learn, and some take to it like a duck to water. Personally, I’ve been using it (grudgingly) for over a decade, but I still have to look up basic stuff. If there were another way to manipulate the DOM on the client side, I would probably use it.
I don’t like Javascript especially, and if there were such an alternative I would not recommend the use of Javascript to anyone. The fact is that if you want to do client-side stuff with web pages, you must use Javascript- so as a web developer, it behooves you to learn it.
My advice is to learn the basic language until you have a certain level of comfort with it, and then use a framework as @phaedryx recommends. The ones he listed are all frontend (client-side) frameworks. These are good and useful things to know.
I recommend you learn one of the more popular overall frameworks. If you already know PHP, Python, or Ruby, then I recommend Drupal, Django or Rails respectively (personally I detest and despise Rails, but it is wildly popular and successful.)
My own websites are all done in Drupal. Drupal is easy for setting up basic things (I call it “a CMS with a framework thrown in”, but the learning curve is steep for more sophisticated things. Fluther is a Django app. I have installed and played with Django. It’s less easy than Drupal to start with, but probably easier once you start getting the hang of things. Rails is great for programming, but in my experience it’s terrible for reusing someone else’s code. Rails apps are very tightly integrated, and installing someone else’s app can be an extremely picky and difficult process. I struggled with a Rails app for almost a year before finally admitting defeat in the face of an untraceable stack limit excess which neither I nor two professional sysadmins (one of which an experienced Ruby hacker) could diagnose.
These are mostly just my opinions and impressions. If you don’t already know any of these three languages, then there’s probably nothing to choose between these three frameworks. There are a great many to choose from, and probably at least one for every major programming language. (including Haskell, Erlang, and brainfuck!)

phaedryx's avatar

+1 for @rexacoracofalipitorius

@serenityNOW I have a bit of a love/hate relationship with javascript.
I think javascript is easy to learn, easy to learn incorrectly, and easy to make a mess of. I also think that there are people who just don’t get it. I haven’t read it, but I’ve heard good things about Eloquent Javascript.

You can get a lot of mileage out of front-end framework, so I’d probably learn that before diving into javascript.

rexacoracofalipitorius's avatar

@phaedryx I have to respectfully (and only partly) disagree: I think it’s best to learn the basics of Javascript before dealing with any front-end framework, since any of these must necessarily be implemented in Javascript.
Also, +1 for Eloquent Javascript- I’m reading it right now (along with the O’Reilly “Definitive Guide” and a bunch of unrelated other books).

ETpro's avatar

@serenityNOW I apologize for not having a look at the link in the question details when I replied. I’m actually a member of several Meetup groups. Meetup is FAR more than a single dropdown. It is an incredibly rich and robust social networking tool. It’s very database intensive. As of April 2013, the company claimed to have 13.4 million members in 196 countries and 125,247 groups. That gives you some idea of the database running it. It allows all sorts of social media functions like reservations for events, blogging, posting photo albums of events, automated and proctored group mailing lists and that’s just a list of what I am aware of. Such an application requires a very robust custom back end. They also use a lot of client side scripting and it appears they have actually developed their own variant of the jQuery JavaScript library for some of this.

serenityNOW's avatar

@ETpro – Yikes!

The below I typed earlier, but it seems Fluther was down for a moment?

@rexacoracofalipitorius & @phaedryx – Thanks for the insight and I think javascript is more of a focusing issue, which is why I like HTML & CSS. You type it, it just appears. I like that. I think I read somewhere they might be adding “logic” or whatever you call it to CSS, so all the better that I learn some scripting. Having said that, there’s no way I could learn it in the time-frame I’ve been (potentially) given. It should be mere hours until I find out, and am looking forward to some sack-time, but I saw people were still responding to this thread, so I figured it would be polite enough to at least chime-in.

My last ditch effort would suggest to them I do the graphics, layout and typography, and have someone else that I’d work with to do the programming. I’m not going to “bargain” with them, but that would be an ideal scenario.

Special thanks again to @ETpro to pointing out my serenity would be blown. Things have reached somewhat of a plateau in my moods (mental illness – see some of my other threads) and I really shouldn’t rock the boat. Thanks for all the thoughtful answers and I’ll check out Eloquent Javascript.

serenityNOW's avatar

P.S. @ETpro – I think I might mention that info to them, whether I get the job or not. That’s effin’ incredibly naive on their end. (My end, too?) I only visited that site as a reference, I didn’t do any “investigation!” Thanks again…

ETpro's avatar

@serenityNOW I recommend you sign up with Meetup.com, then search for local groups you’d find interesting. Oh yes, they do have a fine search engine built in that can search by relevance and distance from your zip code—not a simple feature to implement. You will probably find a JavaScript group most willing to welcome someone who has just decided to dive in to writing code. JavaScript is a good starting point, because the logic (if, then, else; when, etc.) is pretty standard fare for any major high-level, object-oriented, statically-typed language. PHP and MySQL are easy next acquisitions for someone focused in Web programming and already familiar with HTML. PHP is designed to generate HTML as well as to function at the command-line interface level and to be used in standalone graphical applications. And it interfaces beautifully with the MySQL database. Both are open source.

ETpro's avatar

I just downloaded a FIrefox addon that tells me (when it can) what backend a site uses. It appears that other than jQuery and Google’s mapping API and statistics analysis, the Meetup.com site is a custom web app written in compiled code, not a platform or framework.

serenityNOW's avatar

@ETpro – Thanks for doing the backend research on Meetup. The company I’m working with is going to hire a separate programmer to do the meetup programming; I’ll be taking the more graphically oriented side. Basic HTML & CSS layout, and mostly just design and graphics. It will be neat to have the opportunity to work side-by-side with a programmer. Maybe we can each pick up some tricks.

As for Meetup, I finally signed up and am going to an Adobe Users group at a local library on Tuesday, granted they “accept” my RSVP. I’m trying to find some graphic design ones, too. I think it’s important right now to accentuate and improve the skills I’m good at, and stop trying to be a jack-of-all-trades. With that being said, @phaedryx – I picked up a copy of Eloquent Javascript and plan to start using it tonight.

Thanks gang, and I’ll be sure to not take on any jobs that unbalance my Serenity @ETpro ;)

ETpro's avatar

@serenityNOW Super outcome. Enjoy the project.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther