The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

pipes! posted:

You want a CSS reset, declared at the beginning of your external, linked CSS stylesheet before any other author-written styles. Normalize and Eric Meyer’s Reset are the current favorites, I believe, although Normalize is less a "zero out everything" approach and more one that provides sensible cross-browser considerations.

Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyer’s Reset is a sledgehammer.

# ? Oct 22, 2013 20:16

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 23:11

Oh My Science: Dec 29, 2008

I read A style-guide for modular SASS development using SMACSS and BEM that sidebar.io linked me to. Think I'll give it a shot and see how I like it.

# ? Oct 22, 2013 20:20

pipes!: Jul 10, 2001; Nap Ghost

cbirdsong posted:

Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyer’s Reset is a sledgehammer.

I use it personally, and I agree. It's also doubtlessly saved me hours of trying to make obscure states of form elements work the way they were intended to.

# ? Oct 22, 2013 20:21

Pollyanna: Mar 5, 2005; Milk's on them.

Kobayashi posted:

Next time I work on a substantial project, I think I'm going to try atomic CSS design. The metaphor is quarks (raw tags), atoms (abstract components), and molecules (larger components), plus utilities (resets, etc). Seems like it could be a neat way of doing things. Probably a bit overkill, though.

Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different?

# ? Oct 22, 2013 20:48

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

cbirdsong posted:

Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyer’s Reset is a sledgehammer.

It depends greatly on the design of the site in question. I use Normalize "mostly" but for those sites where "MAKE IT LOOK JUST LIKE THE PHOTOSHOP WHY IS THAT 2PX OFF OMG!@!!!" is sadly in play, a reset work for me better as a starting point.

# ? Oct 22, 2013 20:48

MonkeyMaker: May 22, 2006; What's your poison, sir?

Pollyanna posted:

Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different?

Django doesn't assign HTML objects to anything.

# ? Oct 22, 2013 22:06

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Lumpy posted:

LESS. One file for reset / normalization, one file for variables, one file for "base" typography, one file for everything else, with an optional file for responsive rules if having it in the "everything else" file makes it too big.

In the "one file for everything else" - is there a sort of structure to it? Or just grouping related things together?

# ? Oct 22, 2013 22:13

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Pollyanna posted:

Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different?

You really need to go through that Django tutorial a few more times.

# ? Oct 22, 2013 22:24

ManoliIsFat: Oct 4, 2002

Thermopyle posted:

You really need to go through that Django tutorial a few more times.

Ya, I'm totally confused. Are you talking about the ORM? Those are python models/objects, not "HTML Objects" (whatever that means)

# ? Oct 22, 2013 22:35

Pollyanna: Mar 5, 2005; Milk's on them.

...Yeah now that I think about it, what the hell was I trying to say? What happened to the whole separation of content and presentation thing? :psyduck:

Never mind, I'm confused.

# ? Oct 22, 2013 23:30

ManoliIsFat: Oct 4, 2002

I think you've just got some ideas mixed up in your head. Django does have templating (replace a bunch of stub-values in a text file to produce a real page with content), it has an ORM (a system of mapping python objects to the database) and it does have an MVC architecture.

(I know you're just learning a bunch of this this stuff. It will come naturally to you soon, it's so easy to mix up all these acronyms)

# ? Oct 22, 2013 23:53

vtlock: Feb 7, 2003

I need some advice on how to start a project:

I have a spreadsheet with three columns of data--A,B, and C. I want to make a web form in which a user enters an A value and a B value (say A1, B1) and, if those match two values in the spreadsheet, the form returns the appropriate C value (in this case, C1).

I can store the data in any form--csv, xml, database, whatever.

Is there a best way to do this? (And is there a way to do it without going down a path of PHP vulnerabilities?) Are there any frameworks that might get me started?

# ? Oct 23, 2013 00:14

Pollyanna: Mar 5, 2005; Milk's on them.

Okay, I don't quite get how to center elements in CSS. I have a <ul> element that I'm trying to make a horizontal menu from. Supposedly, making something a centered object involves something like this:

CSS code:

.center {
	margin-right: auto;
	margin-left: auto;
	width: x%;
}

where x is some percentage of the page width.

I'm not sure this does quite what I want it to. It doesn't put it exactly in the middle of the page, and ideally I'd like it to change its position as the webpage is resized. How do I do that?

Additionally, I don't think I understand nesting/grouping correctly. I have a div element that has a ul child, which itself has one or more li elements. My attempt at trying to get everything under a div.links to have certain properties both looks bad and doesn't work.

Here's the entire code I'm using right now:

CSS code:

@import url('normalize.css');

h1 {
	font-family: 'MS PGothic', sans-serif;
	text-align: center;
}

a {
    color: blue;
    text-decoration: none;
}

ul {
	list-style-type: none;
}

.center {
	margin: auto;
	width: 40%;
}

div.links ul{
	list-style-type: none;
}

div.links li {
	margin: 3px;
	float: left;
}

div.links a {
	display: block;
	background-color: #D6C8E8;
	padding: 3px;
}

div.links a:hover, a:active {
	background-color: #B48BE8;
}

What's the most common and accepted way of centering an individual element and passing on attributes through a parent-child tree?

edit: Never mind, figured out the whole nesting thing (use IDs). Still not sure how centering should work.

Pollyanna fucked around with this message at 03:17 on Oct 23, 2013

# ? Oct 23, 2013 03:06

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

That should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it.

On my own front - anybody know anything about handling Google Toolbar?
Its pop-up blocker is blocking all our website's PDFs from opening that use target="_blank" and I can't figure out if that's intended behaviour or if there's something I can do to avoid triggering it. I wouldn't normally worry, but our industry fairly widely uses a few Google products that 'helpfully' include it as an opt-out on install, and our consultants keep submitting them as broken links because all the toolbar does to indicate it's blocked a "pop-up" is put a little exclamation marker on the pointer.

# ? Oct 23, 2013 05:01

Pollyanna: Mar 5, 2005; Milk's on them.

Ghostlight posted:

That should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it.

Ummmm, hm. This is how my HTML looks:

HTML code:

<body>
    <div id="links">
        <ul>
            <li><a href="~/homepage.html">Home</a></li>
        </ul>
    </div>
</body>

That makes the navbar div a direct child of body, correct? So it should be positioning itself relative to that, but it isn't.

I somehow just managed to get the navbar directly above any of the actual content. :wtf:

What am I doing

# ? Oct 23, 2013 05:22

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

If that's literally your HTML I'd say your first problem is that you aren't declaring the <ul> or its <div> as a .center

# ? Oct 23, 2013 05:27

Pollyanna: Mar 5, 2005; Milk's on them.

Okay, now it's working.

CSS:

CSS code:

@import url('normalize.css');


/* BASIC ELEMENTS */
h1 {
	font-family: 'MS PGothic', sans-serif;
	text-align: center;
}

a {
    color: blue;
    text-decoration: none;
}

ul {
	list-style-type: none;
}

/* SPECIFIC DIVS */

.placeholder {
	font-style: italic;
	text-align: center;
}

.table {
	display: table;
	margin: 0 auto;
	position: fixed;
	width: 10%;
	bottom: 10px;
	left: 50%;
}

/* navigation bar */

#links ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#links ul li {
	float: left;
	display: inline;
}

#links li a {
	background-color: #D6C8E8;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	padding: 2px;
}

#links li a:hover, a:active {
	background-color: #B48BE8;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	padding: 1px;
}

/* project post */

#project {
	margin: 8px;
	padding: 3px 9px;
	width: 40%;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

#project ul{
	list-style-type: circle;
}

HTML (via Django):

HTML code:

<!DOCTYPE html>

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'basica/style.css' %}" />

<html>

<head>
    <title>Projects</title>
</head>

<body>

    <div>
        <h1>Apps and Projects</h1>
    </div>

    {% if project_list %}

        {% for p in project_list %}

            <div id="project">

            <h2>{{ p.name }}</h2>
            <ul>
                <li>{{ p.description }}</li>
                <li><b>Paradigm</b>: {{ p.paradigm }}</li>
                <li><b>Dependencies</b>: {{ p.dependencies }}</li>
            </ul>
            <br>

            </div>

        {% endfor %}

    {% else %}

        <div class="placeholder" id="none">
            <p>No projects registered.</p>
        </div>

    {% endif %}

    <div class="table" id="links">
        <ul>
            <li><a href="{% url 'basica:home' %}">Home</a></li>
        </ul>
    </div>

</body>

</html>

I had to look up something about using tables as a way of centering the navigation. Maybe horizontal lists isn't the easiest way to do it...but at least it works!

What other ways can I refactor my code to make it more efficient? (DRY is the term I think)

Pollyanna fucked around with this message at 06:01 on Oct 23, 2013

# ? Oct 23, 2013 05:58

Diabolik900: Mar 28, 2007

Just so you know, this:

code:


#links li a:hover, a:active {
	background-color: #B48BE8;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	padding: 1px;
}

Doesn't do what I suspect you think it does, even if it "works" for now. The "a:active" part will affect all active anchor tags, not just the ones inside you links list items. You need to do it like this:

code:


#links li a:hover, #links li a:active {
	background-color: #B48BE8;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	padding: 1px;
}

# ? Oct 23, 2013 13:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

fletcher posted:

In the "one file for everything else" - is there a sort of structure to it? Or just grouping related things together?

Definitely. This will vary on the site, but I have internal sections to the file, with an "index" at the top so I can press '%' in VIM on it and jump down to it. For example, I'm in the process of re-doing my own site right now, and my index looks something like:

code:

= STRUCTURE
-- containers
-- grid
= TYPOGRAPHY
-- general
-- specific
= ELEMENTS
= COMPONENTS
= BLOG
-- lists
-- posts
= WORK
= RESPONSIVE

There isn't that much CSS, but I find using an index like that helps me find things fast, and sort of forces me to think about the rules I am making. The "Do I need this, if so, where does it belong..." conversation I have to have with myself keeps me from just tacking on one-off rules at the bottom of the file out of habit.

Hey, I think I'll make my 2nd blog post be all about that!

If I ever I finish the site... :smith:

Lumpy fucked around with this message at 13:35 on Oct 23, 2013

# ? Oct 23, 2013 13:23

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Pollyanna posted:

I had to look up something about using tables as a way of centering the navigation. Maybe horizontal lists isn't the easiest way to do it...but at least it works!

You don't need to use table-like properties for that FYI: http://jsfiddle.net/Qu3zz/ (there are other ways of doing this also])

Some other comments:

Don't wrap things in DIVs for no reason. <div><h1>blah</h1></div> is pointless. Just use the H1. You could wrap the H1 in a HEADER technically for semantic purposes, but that DIV is pointless.
Your css LINK should be inside the HEAD
Get rid of that BR after the project list. That's putting presentation ("I want whitespace") in your markup. Use CSS to add bottom margin or padding.

Lumpy fucked around with this message at 13:39 on Oct 23, 2013

# ? Oct 23, 2013 13:32

MonkeyMaker: May 22, 2006; What's your poison, sir?

Just some notes from a Django and web dev:

Pollyanna posted:

HTML code:

    <div>
        <h1>Apps and Projects</h1>
    </div>

Don't wrap single block-level elements in other block-level elements, especially unclassed/id'd elements.

Pollyanna posted:

HTML code:

    {% if project_list %}

        {% for p in project_list %}

            <div id="project">

            <h2>{{ p.name }}</h2>
            <ul>
                <li>{{ p.description }}</li>
                <li><b>Paradigm</b>: {{ p.paradigm }}</li>
                <li><b>Dependencies</b>: {{ p.dependencies }}</li>
            </ul>
            <br>

            </div>

        {% endfor %}

    {% else %}

        <div class="placeholder" id="none">
            <p>No projects registered.</p>
        </div>

    {% endif %}

If you're doing loops like this, save yourself some processing time on the `ifs`:

HTML code:

{% for project in project_list %}
	<HTML HERE>
{% empty %}
	<div class="placeholder" id="none">
		<p>No projects registered.</p>
	</div>
{% endfor %}

Also, why an ID of "none"?

# ? Oct 23, 2013 17:21

Pollyanna: Mar 5, 2005; Milk's on them.

Thanks, guys. There was a lot of leftover crap that didn't have any effect, so I cleaned it all up along with the changes you suggested. It works a lot better now :shobon:

Right now, I have my navigation bar like this:

HTML code:

    <nav class="center">
        <ul id="navbar">
            <li><a href="{% url 'basica:projects' %}">Projects</a></li>
            <li><a href="{% url 'basica:blog' %}">Blog</a></li>
        </ul>
    </nav>

and it's different for each page. It's not the best or easiest method. What's a better way to say "hey, print a link for all the other urls in urls.py"?

# ? Oct 24, 2013 03:17

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

How come it's different for each page? I don't think you'd want to automatically print a link for all other urls in urls.py. You will inevitably add more urls down the road, and then you'll have to devise a way for it to ignore certain ones, etc, and it would have been easier to simply list them out yourself.

I think it might be easier to create a new template called navbar.html, and then in any of your other templates you can simply do:

code:

{% include "basica/navbar.html" %}

Be sure to also read about template inheritance if you haven't already, it is very handy.

# ? Oct 24, 2013 03:35

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Do wildcard SSL certs work for both https://foo.bar.com as well as https://bar.com ? Is there anything special you need to do?

# ? Oct 24, 2013 05:14

Tad Naff: Jul 8, 2004; _{I told you you'd be sorry buying an emoticon, but no, you were hung over. Well look at you now. It's not catching on at all!}

fletcher posted:

Do wildcard SSL certs work for both https://foo.bar.com as well as https://bar.com ? Is there anything special you need to do?

Nope. I learned this the hard way just recently. *.*.foo.com is different from *.foo.com. I had to rename a bunch of things like dev.app.foo.com to dev-app.foo.com when the cert requirement came in.

# ? Oct 24, 2013 05:45

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

FeloniousDrunk posted:

Nope. I learned this the hard way just recently. *.*.foo.com is different from *.foo.com. I had to rename a bunch of things like dev.app.foo.com to dev-app.foo.com when the cert requirement came in.

I don't wanna go sub-sub-domain though, just domain and sub-domain. Is my only option to redirect https://foo.com to https://www.foo.com ?

# ? Oct 24, 2013 05:48

Tad Naff: Jul 8, 2004; _{I told you you'd be sorry buying an emoticon, but no, you were hung over. Well look at you now. It's not catching on at all!}

fletcher posted:

I don't wanna go sub-sub-domain though, just domain and sub-domain. Is my only option to redirect https://foo.com to https://www.foo.com ?

Oh, I don't know about the levels of it. I work on a subdomain to start with, so we have a wildcard for *.mydept.mycompany.com. HTTPS works for butts.mydept.mycompany.com, but not for dongs.butts.mydept.mycompany.com. But I see you're trying to go the other way. Yeah, I suspect in that case you'd need to redirect to the www subdomain.

# ? Oct 24, 2013 06:05

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

FeloniousDrunk posted:

Oh, I don't know about the levels of it. I work on a subdomain to start with, so we have a wildcard for *.mydept.mycompany.com. HTTPS works for butts.mydept.mycompany.com, but not for dongs.butts.mydept.mycompany.com. But I see you're trying to go the other way. Yeah, I suspect in that case you'd need to redirect to the www subdomain.

That seems to be what http://google.com does, so if it works for them it works for me I guess!

# ? Oct 24, 2013 06:31

kedo: Nov 27, 2007

So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk.

Basically,

CSS code:

// Do you guys do this:
header {
  width: 100%;

  @media screen and (min-width: 769px) {
    width: 50%;
  }
}



// Or do you do this
header {
  width: 100%;
}
// (then somewhere else in the document, potentially much later)
@media screen and (min-width: 769px) {
  header {
    width: 50%;
  }
}

To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines. The second option saves a bit of space by lumping all the queries together, but is harder to navigate.

Thoughts?

# ? Oct 24, 2013 19:26

Top Quark: Aug 2, 2010; "Going where no man has gone before."

Personally I'm a fan of the first option. To me keeping the file easy to navigate is paramount, especially with larger projects. I like being able to point at one thing, like a header, and saying "yup, this is where everything for the header is controlled". Mind you I have no idea if there's some sort of established best practice for this sort of thing, I just do what feels best.

# ? Oct 24, 2013 19:48

Oh My Science: Dec 29, 2008

kedo posted:

So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk.

I find myself jumping between the two methods pretty often. Unfortunately whatever framework is being used tends to have it's own pattern, most often one of the two you listed, and you're pretty much forced to adhere to whatever they chose for the sake of other developers.

# ? Oct 24, 2013 19:57

lunar detritus: May 6, 2009

kedo posted:

To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines.

This one. I used to do it separately but it was a pain to update or make substantial changes as I had to jump around the document to update everything. In the end the extra media query lines bother no one and make my life much easier.

# ? Oct 25, 2013 01:29

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

kedo posted:

So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk.

To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines. The second option saves a bit of space by lumping all the queries together, but is harder to navigate.

Thoughts?

I mostly do the 2nd one, as I generally don't have that may exceptions in my responsive design (case in point: my new personal site has a grand total of seven selectors that need responsive rules across two media queries) so it's much easier to keep them grouped at the bottom. I imagine if for some reason I needed a bagillion selectors requiring changes, I would probably prefer the other method.

# ? Oct 25, 2013 02:50

Pollyanna: Mar 5, 2005; Milk's on them.

fletcher posted:

I think it might be easier to create a new template called navbar.html, and then in any of your other templates you can simply do:
code:
{% include "basica/navbar.html" %}
Be sure to also read about template inheritance if you haven't already, it is very handy.

Oh my god this changes everything. Thank you :3:

# ? Oct 25, 2013 05:07

Ron Don Volante: Dec 29, 2012

Any recommendations for the best free html/css tutorial site? I've used w3schools in the past (for sql) but I've heard a fair number of negative things about it.

# ? Oct 25, 2013 05:14

Johann Gambolputty: Jul 6, 2006

Let me just preface this with I am a newb to HTML and especially Javascript.

I am trying to implement the leanmodal dialog window as shown in in this link, http://leanmodal.finelysliced.com.au/. If you click on basic in the examples section you will see what I am trying to create. While testing the dialog window on my local computer it works perfectly fine. The dialog window pops up. The background darkens some, and on click outside of the window it closes.

But, when I upload it to my personal website, the functionality breaks. The dialog window pops up. But, the background doesn't darken and the window wont disappear when clicking outside of it.

Edit:

Turns out I just forgot to upload the edited CSS I made.

Johann Gambolputty fucked around with this message at 08:19 on Oct 25, 2013

# ? Oct 25, 2013 06:44

Skiant: Mar 10, 2013

kedo posted:

So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk.

[�]

To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines. The second option saves a bit of space by lumping all the queries together, but is harder to navigate.

Thoughts?

Use the first method and then lump your queries together in the final output with grunt-combine-media-queries.

Ron Don Volante posted:

Any recommendations for the best free html/css tutorial site? I've used w3schools in the past (for sql) but I've heard a fair number of negative things about it.

Codeacademy is doing a fine job IMO.
Use the Mozilla Developper Network when looking for information about a specific attribute/property/method (prefix your google query by "MDN" and that should do).

Skiant fucked around with this message at 07:13 on Oct 25, 2013

# ? Oct 25, 2013 07:10

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

What are people's thoughts on design theory for a low-footprint business? My partner is a translator and I'm redesigning her website now, but really the website should only serve two purposes:

1. Legitimise and advertise her business, and
2. Point them to her email address and facilitate them asking her for a free quote.

I've broken that down into a few basic components:

1. A short, stereotypical "wowza" list of reasons why her business is fantastic (think a list of words and phrases like "reliable, confidential", etc).
2. Every four to ten words is essentially an obvious link to the 'get a free quote' section.
3. Minimal UI and graphics -- I recognise that graphics significantly help with the legitimacy of a business' image, but I want to balance that and ensure that there's minimal clutter and the least possible distance between arrival and sending an email for a quote.
4. Short list of qualifications, translation experience, and services offered.
5. A mock-up of an example quote email, just in case the person is at all unclear on how easy it is to send an email for a free quote.
6. A link at some point to her online blog where she uploads articles she has translated just to keep herself active.

Last night I was tossing around the idea of building an interactive quote-requester, where someone can drag and drop elements to say how many of what type of documents they have, which will build them a quote that they can email through, but I binned the idea after 2 minutes because it's just another needless, over-complicated obstacle between entering the website and sending her an email asking for a quote.

My main question is, for a site with such a small footprint, do you keep it all on the same page and just use anchors to pull it all around into sections? That way you can add stock photography etc to make it a bit more trendy/business-like, without cluttering up and obscuring information that would look much smaller if split into 3-4 pages. The main benefit would be that users can just scroll down to find everything they need (which isn't much at all) all on the same page (excepting the translation blog). The theory being that every time someone has to click a link to navigate away from a page, that constitutes an obstacle where they could just as easily go "the uncertainty of not knowing what will follow or whether that's what I want or not.. is more annoying than just hitting back and finding someone else". But then there's the other obvious obstacle in that the majority of the content is obscured from the user's first sight of the page -- it's down the scrollbar, beneath the landing section.

The current plan is to have it all on one page and have the top part of the site, the landing screen, contain a short intro and descriptive links to every major section on the rest of the page -- qualifications/experience, types of services offered, free quote, etc. If they're in a hurry, they can click to the anchor, and otherwise they can scroll if they're looking for more info before they commit.

What are people's prevailing thoughts on this question of getting information to the user and seducing them towards some goal (e.g. emailing for a quote)? Do you think clicking through or scrolling is a bigger obstacle?

# ? Oct 29, 2013 10:03

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

How does everyone deal with client-side caching when rolling out new .css or.js? We just rolled out a facelift so some files are cached and others aren't, creating a broken Frankenstein's Monster of a site. I've seen appending ?dateOfEdit to the end of the file, but in that case I'd have to update every .html page too (or at least the most popular ones).

# ? Oct 29, 2013 13:59

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 23:11

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Sulla-Marius 88 posted:

What are people's thoughts on design theory for a low-footprint business? My partner is a translator and I'm redesigning her website now, but really the website should only serve two purposes:

1. Legitimise and advertise her business, and
2. Point them to her email address and facilitate them asking her for a free quote.

...

What are people's prevailing thoughts on this question of getting information to the user and seducing them towards some goal (e.g. emailing for a quote)? Do you think clicking through or scrolling is a bigger obstacle?

"Mother discovers secret advertising companies don't want you to know!"

What you really want to make sure about is that the information doesn't look too dense. People will just back right out of your site if it looks like it will take too much effort to understand it. In my experience people don't really have a problem with scrolling, but you should still make sure your important information is "above the fold" (and probably duplicated at the end of the page). Including testimonials from real or fake people is also a good tactic for validation.

Potentially more useful, check out these links on conversion:

http://www.quora.com/What-are-some-top-strategies-for-conversion-optimization/answer/Andy-Johns
http://blog.kissmetrics.com/what-converting-websites-do/

# ? Oct 29, 2013 14:18

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »