Ask MetaFilter questions tagged with design and HTML

Story problems.

SinisterPurpose — Thu, 16 Jul 2009 10:08:33 -0800

Web Designers! Tell Me Of The Dragons You Hath Slain! We all remember the fun we had with this question. As was suggested to me in that thread, I have been spending as much of my time as possible learning on my own. (Concentration has been mostly on Web Design) Unfortunately, the countless books, articles, and blogs I've read are not completely complimentary to my learning style.

Of course I'm gaining knowledge and skills with these, but I'm looking to sharpen this particular sword as quickly as humanly possible. And for me, that mean hearing anecdotes, stories, and real world challenges from people who live within this realm every day. I understand and process information most effectively when it is wrapped in a pretty little narrative. (Probably why I majored in English in the first go round.)

I'm looking for descriptions of problems you've encountered working in web design. If you found a solution, you can feel free to share it. Or not. Be as detailed as you like.

Also, I'd like to hear about your Eureka! moments as you were learning. What made a particular concept sink into that soft, mushy melon of yours? What was that first baffling problem you had that first day? What issue just keeps coming up and won't go away? Just vent if you like; I guarantee I will mine something out of it.

Inevitably, someone will ask for a clarification on what I mean by "web design". I understand that it is a broad and multi-faceted discipline. If you think you have what I'm looking for here, then you do. I am deferring to your experience here. Let's feel free to err on the side of this-is-probably-what-he-wants-even-if-he-doesn't-know-it.

It works for 99% of our visiters

2bucksplus — Tue, 17 Mar 2009 15:30:08 -0800

I made what I think is a great website for my company using Microsoft FrontPage. However, I have received a few complaints about accessibility and am wondering how to proceed. I know Frontpage is a terrible product in terms of standards compliance, but it got the job done (I thought) and it allowed me to make a 20+ page website quickly and according to my design, making me look like a hero around the office. My boss and coworkers are also pleased with the website and it allows me to frequently update our site as we see fit.

Since our site has gone live we have received a few complaints, specifically that it does not work in Firefox and on handheld browsers and that increasing the font size (for easier reading) "breaks" the website.

We looked to webdesign firms and professionals, but we quoted in the neighborhood of $4,000 (this is for local NYC firms) which is sadly out of our range.

Is there a better program I should be using or are there settings I should use in Frontpage or Expression web? Is there any way for me to "strip" the website of IE specific coding? Is is feasible for someone or something to clean up the website code for a reasonable price?

What are the most common HTML tags you use in main content divs?

Karmakaze — Tue, 30 Dec 2008 14:01:14 -0800

What are the most common HTML tags you use in main content divs? I'm trying to put together a sample document to test css. I'm sorting through a bunch of third party css templates and have been tasked with dropping actual content into them. Not surprisingly, I'm finding a bunch of them break when faced with reality. (For example, a lot of the designers zero'd out margins and padding and seem to have forgotten to add them back to anything but paragraphs for the main content areas.)

I'd like to put together a simple sample content block to plug into the templates so I can say "Look, if this snippet won't render properly, I'm not even looking at it." I know I need to check P, UL, OL, LI (including some nested lists), IMG, TABLE, TR, TH, TD and BLOCKQUOTE. What other tags turn up in main content a lot that I should include, too?

(I realize part of the answer is to get better designers, but I have to work with what I have, and I figure getting better specs to them will smooth a lot of this out.)

Eye-candy graphics directly in Email

designbyme — Tue, 04 Nov 2008 08:33:52 -0800

Eye-candy filled e-mail without having to open an attachment - how do you create this? You know the e-mails you get from advertisers that are loaded with graphics, images and lots of color.... how do you create something like that?

Why my design sucks? I can has better design skills please?

Meatbomb — Fri, 31 Oct 2008 04:15:14 -0800

Three part question about "professional-looking" websites. 1. What makes a website look "professional"? It's hard for me - I know it when I see it, but at this point it is something ineffable and I need people more technically competent and with more refined knowledge of aesthetics / layout / design to spell this out.

2. Why does my business website look unprofessional or amateur? I won't link, but it is the "Modern Institute" site recently posted into projects. I want it to say "these people are online professionals", and right now it doesn't.

3. Why does my own judgment seem to change so radically over time? When I first create a new design / layout / color scheme / whatever, I'm all "ooh! it looks so PROFESSIONAL!!! I am design KING!!!". Now when I look at it, weeks or months later I am embarrassed that this is the image my organisation is providing to the Internet, and I feel that it looks like it was made by a 6th grader just learning HTML.

I can't afford professional services, I need to just rely on my own work here... please, help me make this look better? And tips that will help me in the future?

I sincerely thank you in advance for your time in this regard.

How much should I expect to pay for someone to create me a simple two page website and where is the best/cheapest place to host it?

davidstandaford — Sat, 20 Sep 2008 10:03:50 -0800

How much should I expect to pay for someone to create me a simple two page website and where is the best/cheapest place to host it? I have an idea for one of those simple one word website and since I know just enough web stuff to end up messing it up I would rather pay someone to do it for me.

The url of the website will be a question and the first page of the site will be a one word answer (with a link to an external page) and at the bottom of the page it will say "more", with a link to the second page.

The second page will contain one or two sentences explaining the website and an archive of all of the pages that the one word answer on the front page has linked to.

There will also be a basic free tracking service that I would like them to set up on the front page.

How much should I expect to pay someone to create this website? I will provide them with a log-in for the site that I have hosting on and the text (html) for the two pages.

What is the best (cheapest) place that I can find to host this, assuming it is a tiny website that gets a small amount of traffic. Preferably, I would like a site that will also handle domain ownership, as I have not bought the domain yet, but it is still available.

I would like to update the website nearly daily, changing the site that the one word answer links to, and adding that new site to the second (archive) page. Basically, however the site is set up, if I have the html for the those two pages, will I just be able to make the changes on my local copy and then upload it/ftp it to the site?

This is a political site for the US election... should I be concerned at all about potentially hiring someone to make this website who has strong opposing political views. Would it be good to be upfront about the political aspect of the site and which side it is for?

I don't know anything about website security... is such a set-up (two pages) likely to be a secure set-up, or is there a bunch of other steps I should take to make sure this isn't hacked/corrupted by spammers or something.

Is there anything else I should be aware of when trying to hire someone for this type of project?

Search me that flash mr google

Smegoid — Tue, 12 Aug 2008 11:06:26 -0800

What's the latest wisdoms on flash and search engines (aside from "don't use flash")? Looking for tips geared towards new media sites (collectives, art galleries etc.) Being the most net savy of my group, I got tasked with designing our online portfolio and a site for the art space we co-manage. Did it all in flash as it seemed the thing to do. Despite filling out all the meta content in the html file, we're still pretty blind to search engines (been up since 2005). In particular people are complaining that none of their work shows up when searching for their name. I've poked around to see what the current deal is, and short of not using flash, it seems there's no good way to make yourself visible to the search engines. Anyhow we got out of the gallery business awhile ago, but we'd still like to maintain the site as a sort of memorial.

So anyone with more experience have some tips? I was thinking a text based splash page, or maybe cutting down the site into text based html with flash navigation and movies, etc.

Here's the site www.nestmontreal.ca

As you can see, it made sense to use flash for the look we were going after. But being invisible to search engines really sucks!

Many thanks!

How can I fix my weirdly rendering navigation tabs?

goodnewsfortheinsane — Thu, 10 Jul 2008 18:30:19 -0800

What's wrong with my CSS that makes top the nav render like this or this on some browsers, and how can I fix it? This is an example of a desired rendering, and here's is the CSS. Thanks in advance, guys & gals!

wordpress template is screwed up

clockworkjoe — Sun, 01 Jun 2008 11:47:28 -0800

Wordpress/web design problem-my custom template is screwed up and I can't figure out how to fix it. Please help. I just started a wordpress site for my blog. I created a custom template for the page. However, while the code is right, the design is screwed up. The sidebar is at the bottom instead of being at the side. You can see it at raillery.tv/blog

What am I doing wrong?

You can see the code here http://forums.somethingawful.com/showthread.php?threadid=2718078&pagenumber=26#post344233403

how to get title and description in Google organic search results

mamessner — Tue, 22 Apr 2008 08:48:04 -0800

What am I doing wrong in my HTML that the description in Google's organic search just says "Untitled Document?" Check out the HTML for our photography site by going to View:Source at www.vantagephotography.com. I can't copy and paste the HTML here - it doesn't appear. The page has a title that shows in the title bar, and a meta description. When I find it in organic search results in Google (#1 when you search for "vantage photography") it just says "Untitled Document" with no description. Our other site - www.weddingsbyvantage.com - has the same problem. Help! What are we doing wrong? It should have been indexed and cached many times by this point.

How can I be cheap and have a good website?

Bageena — Wed, 16 Jan 2008 09:05:40 -0800

Anyone know where a pair of clueless artists can find some free website design templates? My friend and I are trying to get something up FAST, as fast as possible, while keeping as much money free as possible as we have an upcoming art show and we need money for the prints and frames. So yeah.... flash would be awesome, but HTML will suffice. I just don't want some geocities-esk 1990's website! Thanks Mefites!

design my designing mind!

howiamdifferent — Mon, 19 Nov 2007 21:49:56 -0800

Help a design-impaired mind finish his dream project. How can one come up with a design/layout that is both simple and elegant (e.g. joshspear.com) and scalable? Is there some technique, principles, etc. that can be followed to end up with a satisfactory design? What are the technical limitations that put a cap on the awesomeness of a web design?

I am a computer engineer with a good coding background and average knowledge in HTML/CSS.

Prettify that Page!

LoopyG — Mon, 23 Jul 2007 09:35:41 -0800

Help me find books/sites to help me learn how to make good-looking websites! I have been making a fair number of sites lately, and while I've got the chops for programming any flashy functionality that is needed, I am hopeless for making sites that simply LOOK good (for one of the more ugly sites, refer to www.myirishpictures.com).

I am wondering on you MeFites recommendations about books/sites/general resources on design, and just making things pretty in general.

a greener shade of pale

yonation — Fri, 01 Jun 2007 06:57:51 -0800

web colors question: using separate images for the rounded corners of a CSS div makes the main body and the corners different colors, although in photoshop they are identical... I have a DIV with text in it. this DIV has a background set to the exact color I want (#bed814). Now, i found a javascript (here) to make rounded corners, and have created PNGs with the rounded corners the exact same color in photoshop.

in Firefox (on PC and Web) the corners and box appear identical. In Safari, and perhaps IE, the corners are noticeably a different shade of green. What is going on?

I forgot HTML, I forgot CSS

ztdavis — Sun, 22 Apr 2007 21:29:06 -0800

In making a gallery page for a website, what is the easiest way to have a scrolling area for clickable thumbnails that bring up a larger image, as well as some information about the image, in a table cell above? Specifics, examples, many self links, and my (mangled) code so far available inside. For starters: I want to look like I have it here, but -- you know -- working and all. The three thumbnails at the bottom should be just three of many in a horizontally scrollable area about as tall as they are. Click on any one of these will change the larger image as well as the title of the image and perhaps some other information. The "next" and "previous" links up top would, as you might guess, take you to the next and previous images in the row of thumbnails.

Sounds fairly easy, at least it should be. I just haven't designed a website in four years and I never knew more than pidgin HTML and CSS to begin with. I don't want to use flash, even though I know it might be an easier way to go about it. I have thought about frames, but have yet to try it because I was hoping to just do it on one page if possible.

The rest of my malformed examples have the table borders set to 1, which should make it just a hair easier to follow along at home.

Here is the stylesheet, which has an impact on the spacing of many of the table cells on the site and might make some stuff make a little bit of sense.

To summarize the site structure:
The top row is two cells with colspan each set at 2.
The second row is the largest with two cells, a narrow cell for navigation and a big wide cell for the main content (with a colspan of 3).
The third row is one empty cell (just to be a spacer under the navigation cell) and on most pages has three cells, each with one thumbnail image. For this particular page I want it to be a long row of thumbnails.

In example 2 I have created a new row at the bottom and given it a table with the property of "overflow" set to "scroll". The site didn't like that.

Example 3 has a new table nested into a new row. The result is still very weird.

Example four starts to work, but still no scrolling. Example five is similar, just with a ton more thumbnails. Both of these have a table nestled in one of the cells of the third row. This is the closest to what I want so far, but it still doesn't scroll

Example six has just two cells in the bottom row, and many thumbnails simply dumped into the rightmost one.

That's where I am right now. I don't even know if this is something simple that I am stupidly missing, or something complex that I shouldn't bother with.

If you want to play with the code and see what it looks like at home, the site URL is http://www.welldisposedcameras.com
Images are in the /images folder and thumbnails are in the /images/th/ folder the CSS is just /stylesheet.css (as linked above).

Aside from all this, I haven't even come up with a good idea for linking the thumbnails to the image. Am I going to need to create a separate page for every image and link to it with every thumbnail?

In case any one wonders, this is this and the images are from one of our members. I want to finish the site and get more cameras back from users before I post this to either Projects or MeTa.

Sorry if this is obvious or stupid. Thanks for any help!

Web page updates for the musically-inclined

purplefiber — Tue, 23 Jan 2007 20:55:58 -0800

Help me update my group's website without pulling my hair out... I play with a musical group that is presently (though hopefully not for much longer) doing all its own admin: finances, promotion, management, and website. We are trained in music, and untrained in everything else, so we end up spending WAY too much time trying to do tasks that, for the more technically savvy, should take just a few minutes. For example- simple content updates and revisions to our website.

Presently I'm using an html template and plugging in the relevant details of upcoming events, etc. However I find html code very tedious and dizzying to look at, so I would love to find a program (I know they exist) into which I can type normally and it will convert into code. The catch (and I'm not sure if this is much of a catch) is that we want to stick with the same layout, fonts, etc that we have already, so something like Google Page Creator, where you have to use their layouts, wouldn't work. Can you recommend any applications (bonus points if they're free) that would allow me to do this more easily, freeing up hours of my time for practise and surfing AskMefi?

Thanks!

me tarzan, you css

Hands of Manos — Tue, 21 Nov 2006 13:56:36 -0800

Help my brain wrap around CSS (especially making a css enabled tab menu) Okay,

I know web design from a purely design stand point (that's aesthetically speaking) and I know html, some cold fusion and some php as well. I can at least understand what php does..."write some code and then tell your html to reference right here..."

I can't, for the life of me, understand css. I wanted to make a css menu (the horizontal kind that has nested parts in it and drops down when you roll over it) however everytime I open up Dreamweaver I find it easier just to code it by hand instead of trying to GUESS what to do in css.

So could someone help me figure out how to put in a css menu in my html or just to understand css all together (or a webpage that references it)

Thanks

XML for my product lists and rollover menus?

brianvan — Sun, 27 Aug 2006 16:42:34 -0800

Are there any good XML/XHTML frameworks for using XML data to automatically populate both/either web page content and JavaScript rollover menus? I'm working on a website for a client; it will basically be an online brochure for available products in a bricks-and-mortar store (without any merchant features). We've already decided that this site will have an index page with a rollover menu, and that the menu will link to subpages populated with product content.

I've now realized that, as opposed to writing everything out in (X)HTML, I could compose XML files with all the appropriate product data - a field for the product name, description, thumbnail filename, full-size filename - and make a general template page that could read XML data and populate a list with it. While we're at it, why not do the same thing for the navigation menu? Not only would that allow me to flexibly change the product menu whenever I want, but it would keep the menu consistent for the whole site. As a former applications programmer (ASP, C++, SQL), this sounds like life would be great if I could get both to work.

So before I either try writing this in PHP (which is a new language for me) or contracting the work out on some freelancing site, does a framework or template exist (open source, perhaps) to just drop this into my site and go with it? Or is this application really simple enough to do in an hour of my spare time? If I have to code it myself + debug it, I may simply do everything by hand in existing authoring programs the way it is classically done, at the expense of tedium in making future updates. (Plus, I have to provide deliverables to my client sometime in the next few weeks. In this case, "finished quickly" is way better than "elegant".)

Good styles for good business site design?

zek — Mon, 15 May 2006 15:23:59 -0800

What website layouts work best for a site selling some books and/or software? Ideas? Examples? What about NOT-recommended ideas and examples? I have a small line of software and books (like 10 different items total) and decided it's time to redesign the front page. I've been selling for years, but I'm kind of flying by the seat of my pants and would like to consider new layouts.

Any ideas here? Is it better to put only one or two popular products on the front page? Or make a little smorgasbord? What designs invite a closer look?

For example here are some sites I pondered:
- Manifold (GIS) -- this GIS system goes for a "newsy" look... it gets better if you scroll down but it seems to make one's eyelids heavy. But I bet this gets great keyword rankings on Google.
- PaintShop Pro -- the classic corporate look with little content and lots of abstract navigation (sometimes with Flash). This, to me, screams "run away!" Agree? I'm thinking the lack of keywords is also really bad for getting good positions in a search engine.
- WinAVI - sort of a high-end shareware (try/buy/info) but like the corporate style there's almost not enough to draw me in. On the other hand it's intuitive for visitors who already know what they want.
- TMpegEnc - the classic "sourceforge" look, heavy on revision summaries and little to really draw you in... looks like a model not to emulate.
- Shareaza - not bad, lots of good little bites and pics to tell you what it's all about.

This might not be the best way to compare, though... unlike the sites above I also have a small product line that shores up my income quite well. I have to figure out how to represent them too.

Anyway I'm leaving the question wide open to get different perspectives. Does anyone here sell online using their own website? What styles get a nod for common sense, usability, and drumming up visitor interest? Maybe we can share crib notes.

How to make an icon for a web page?

Meatbomb — Sun, 19 Mar 2006 00:59:37 -0800

How do I create a little icon for the tab of a web page? I have tried searching, but "icon" and "web page" is on every 3rd page on the internet, hard to see what keywords to search...

You know how, say, Metafilter has it's own special "MF" icon in the tab bar of the page? Or how the coffeepot ghost guy has a little picture (of himself?) as the icon for his webpage? If he can do it it must not be that complicated?

I am vaguely competent with Photoshop and html.

Can someone please either spell out how to do this, or point me to a web resource that does? I would really appreciate it, thanks in advance for your time.

What is the best and/or most efficient website design software these days?

Servo5678 — Mon, 27 Feb 2006 06:48:55 -0800

What is the best and/or most efficient website design software these days? Here at the office we're (finally) ready to dump our old Microsoft Frontpage-based website and move on to something better. The problem is that with so many options out there I'm conflicted on just what software to suggest. I'm looking for advice on just which website editor is worth the time and money these days.

As far as funtionality goes, we want to be able to link our still-in-development project database to the new site so that when users check on project information the latest data is displayed on the site (project budgets, contact person, etc.). Our first idea was to just build a database in Microsoft Access and use Frontpage to bridge everything, but I'd much rather go in a different direction.

Any advice for me? What are the favorite web design software packages these days? How about linking a database to a website?

Good WYSIWYG web development software for the Mac?

brokekid — Mon, 23 Jan 2006 17:19:45 -0800

I'm looking for very simple WYSIWYG web development software package like JAlbum, Freeway and RapidWeaver. Are there more packages out there that are very similar and very good for the Mac? I do a lot of web design work probono for friends, family and some non-profit. I am looking for software that I can try out to cut my time down even more. Freeway, JAlbum and RapidWeaver are good, but they each are lacking in their own way. Any ideas?

I need some insperation

delmoi — Mon, 07 Nov 2005 15:52:04 -0800

Design ideas for a web based application? Great web-apps? I've got artist's block. So our company makes this internet device for corporate use, and we want it to have this really slick web-based interface. I'm trying to come up with some HTML/CSS templates that we might use.

A little back story: A company owed us some work and the came up with a few templates. They were so bland, uninspired and artless that I, as someone with some web design experience, was personally offended. I asked my boss for some of our basic logos and whatnot and so now I'm planning to do a rough mockup on my own time. (I'm employed as a programmer, not a designer)

All I need to do, basically, is come with some kickass CSS and graphics (I will have control of the HTML for this mockup). But I'm a little stumped as far as how to start. Most of my design experience is with "information display" type pages (like a blog) with lots of text rather then an administration-type application which will be mostly text-free.

So do you know of any really cool web-based applications that I might draw inspiration from? Anything else I could look at?

I'm having a hell of a time just getting started.

Thanks.

Picking a Content Management System and learning PHP

godawful — Fri, 26 Aug 2005 03:16:55 -0800

Thanks to your answers to this question, I'm going to spend the next month redeveloping our website. But now I'm faced with choosing the right tools for the job. So for this project - a simple website for this organisation incorporating news, articles, upcoming events - I was all set to learn and use Textpattern and anticipated a smooth ride, until the goalposts got moved.

Now the boss has pulled a new feature out of his ass: he wants the site to be a community, which could be a really good thing for the organisation, but it makes the job much harder. We now need a membership database, which would allow members (around 400, all professors at member universities, by invite only) to edit a profile of their own, and participate in forum discussions. The profiles need to be searchable and viewable, like the faculty biographies on most university sites.

So to cut to the chase, I don't think Textpattern will handle this, at least not without extensive modification. I'm now looking at Drupal, and in particular a version of Drupal called Civicspace.

So, could anyone share experiences of using these programs for similar applications? They look complicated, so is there anything simpler that could accomplish the same thing, perhaps Xoops or something?

And finally, someone mentioned that if I choose Drupal, I would have to learn PHP to modify the look beyond standard templates. How hard would this be inside a month? 2 months? I'm not afraid of learning some programming, but I need to give an accurate idea of the timescale to the boss.

how to display image files on a web page

DyRE — Wed, 26 Jan 2005 22:01:20 -0800

Windows Explorer has an option to display all the image files in a folder in "filmstrip" mode, which looks like this. I want to create a similar method of display on a web page. I figure I'll have to (unfortunately) use frames to create the bottom gallery of thumbnails and have it scroll like that but I would rather not have to create a separate page for each full-size picture. I would rather the page displaying the picture be dynamic and just change the picture rather than refer the browser to a different file. I figure this could be done with some scripting language (PHP?) but I don't know much about that sort of thing. Can anyone help me out? [+] I do plan on learning how to do this stuff on my own but for what this is going to be used for is something that's likely going to be up for public view before I get the chance to learn this on my own. Searching for scripts that do this just leads me to stuff like Gallery and other things that aren't really what I'm looking for.