The Web Design & Development Megathread

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

«‹›361 »

kedo: Nov 27, 2007

butt dickus posted:

I'm working a minor mobile site for some of our techs who are on the road. The icons on my desktop site end up being way too small so I figured I'd just use HTML entities in place of icons. I have a few things that look like this:
HTML code:
<a>
<h1>&#128663;</h1>
<h3>Map</h3>
</a>
It looks fine when I preview it on a desktop browser, Android or Windows phone, but on an iOS device the entities are super tiny! Can I fix this or do I need to do something like make SVGs?
e:
Android

iOS

You should be able to adjust the font size just like anything else? If worst comes to worst you could use conditionizr to target some CSS specifically at iOS. But try setting an explicit font-size first if you haven't already.

# ? Apr 13, 2015 16:54

Adbot: ADBOT LOVES YOU

# ? May 12, 2024 12:24

butt dickus: Jul 7, 2007; top ten juiced up coaches
and the top ten juiced up players

I'm using em but I just changed it to px and they're still tiny!

# ? Apr 13, 2015 16:55

kedo: Nov 27, 2007

Can you post a JS fiddle or something? Also, if you're on a Mac with Xcode installed you can use Safari's developer tools in iOS to figure out what the hell is going on.

# ? Apr 13, 2015 17:23

butt dickus: Jul 7, 2007; top ten juiced up coaches
and the top ten juiced up players

I cut away everything that's not relevant.
https://jsfiddle.net/rkpabr2f/

We don't have any Macs here.

e: He tried a different ticket that displayed the "Check In" block which uses a more standard &check; entity and that one displays at the right size.

butt dickus fucked around with this message at 17:31 on Apr 13, 2015

# ? Apr 13, 2015 17:27

kedo: Nov 27, 2007

butt dickus posted:

I cut away everything that's not relevant.
https://jsfiddle.net/rkpabr2f/

We don't have any Macs here.

e: He tried a different ticket that displayed the "Check In" block which uses a more standard &check; entity and that one displays at the right size.

Try using -webkit-transform: scale(whatever number); on the h1. Works for me adjusting the CSS in Xcode/Safari dev tools.

e: You're still probably going to need to target iOS specifically for that because -webkit will also target desktop Safari and Chrome.

# ? Apr 13, 2015 17:45

butt dickus: Jul 7, 2007; top ten juiced up coaches
and the top ten juiced up players

That does work but it fucks up mobile Chrome and also the checkmark gets super huge. I'm going to switch to SVGs. Thanks, guys.

# ? Apr 13, 2015 17:49

no_funeral: Jul 4, 2004; why

Maluco Marinero posted:

What's the purpose? You can set scrollLeft and scrollTop on an element whilst it is set to overflow: hidden.

That said though, locking natural scrolling without a good reason is one of the worst design trends of the modern era, so thats why I asked about the use case.

Its what the client wants. Real estate agents want what they want, can't dissuade them.

# ? Apr 13, 2015 18:23

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Sitting Bull posted:

Its what the client wants. Real estate agents want what they want, can't dissuade them.

The only thing necessary for the triumph of evil is that good men do nothing.

# ? Apr 13, 2015 18:27

no_funeral: Jul 4, 2004; why

Kobayashi posted:

The only thing necessary for the triumph of evil is that good men do nothing.

yeah i told them i'd do snap scrolling, win/win

# ? Apr 13, 2015 18:53

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

edit: poo poo, I keep forgetting about the Django thread

IAmKale fucked around with this message at 23:56 on Apr 13, 2015

# ? Apr 13, 2015 23:39

fuf: Sep 12, 2004; haha

Is there a good article / book on SEO that just explains the legitimate, relevant bits in a sober, technical way? I need to be able to tell people I offer SEO with a straight face, but it's not really a world I want to invest too much time in.

# ? Apr 14, 2015 09:19

nanerpuss: Aug 6, 2005; voudrais-tu une banane, mon amie?

fuf posted:

I need to be able to tell people I offer SEO with a straight face

god bless and goon speed

# ? Apr 14, 2015 19:01

kedo: Nov 27, 2007

https://support.google.com/webmasters/answer/35291?hl=en

From the horse's mouth. The jist of it is "code things the right way, have a sitemap, provide a good service and don't try to gently caress with us." There are a lot of new tangents you can pursue these days (Google preferring https over http, or sites with mobile views over sites without) but the core of SEO from a developer's perspective hasn't changed a lot in the past five plus years.

I generally tell clients that I offer "organic SEO," meaning I code things in a way that makes Googlebot happy, but nothing past that. True SEO requires someone carefully monitor a site's analytics and actually spending money on adwords and content generation in response to trends. I refer clients to third parties for stuff like that.

A lot of clients who want SEO would be better off hiring a marketing firm, it'd get them far more bang for their buck.

kedo fucked around with this message at 19:27 on Apr 14, 2015

# ? Apr 14, 2015 19:24

Data Graham: Dec 28, 2009; 📈📊🍪😋

The key is sincerity. If you can fake that, you've got it made!

# ? Apr 14, 2015 19:43

The Dave: Sep 9, 2003

Yeah if you're going to offer SEO you need to be comfortable with telling them how to change their content (or changing it yourself). I think at this point there's not a lot of technical stuff you can do to help game the system in anyway, you need good content that is tied to the keywords you are trying to hit and prioritize (through code) the important phrases.

# ? Apr 14, 2015 19:50

kedo: Nov 27, 2007

Actually you should just add a footer to every page on every site you make and fill it with super hot keywords like "doggy day care" and "real XXX sex." Then set the font color to match the background.

That'll show those stupid bots :smug:

# ? Apr 14, 2015 19:53

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

There's also http://schema.org/ and https://developers.facebook.com/docs/sharing/webmasters#markup if you want to ~~sound really impressive~~make their eyes glaze over as your impenetrable technobable defeats their conscious reasoning.

# ? Apr 14, 2015 20:06

kedo: Nov 27, 2007

Speaking of og tags, what's the policy on using non-standard properties? I'm working on an academic journal where DOI numbers are a thing and would love to do something like this:

code:

<meta property="article:doi" content="000043" />

# ? Apr 14, 2015 21:48

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Hey. I've been having this problem that's proving really tricky to figure out.

I'm using flex box on two paragraphs that start off side-by-side, but become linear when the window resizes. The only problem is, there's too much space on the left and right sides when the paragraphs become linear because of an image (that does not flex) above it.

Here's a pen: http://codepen.io/mmckenna/pen/QweOrQ

Basically, I want each paragraph take up roughly 85% percent of the body div when they become linear.

teen phone cutie fucked around with this message at 05:33 on Apr 15, 2015

# ? Apr 15, 2015 05:27

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

They're doing it because you have width: 45% and no flex instructions.

Add flex-grow: 1; to the .index_content css.

# ? Apr 15, 2015 06:10

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Works like a charm. Thanks!

# ? Apr 15, 2015 17:09

ufarn: May 30, 2009

I've only just started looking into replacing my <div>s with modern HTML5 tags, but I have some questions about semantics/best practices:

(1) Which of these two are preferable:

HTML code:

<ul id="nav" role="navigation">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>

HTML code:

<nav id="nav" role="navigation">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ul>
</nav>

The same applies to a seemingly redundant <header> around an <h1> with no tagline.

(2) Second, should I use <article> for a similar index list of articles, or should I just leave them in a <a>s inside a <li> inside an <ul>? <article> seems like something you wrap around a bigger blog with title, content, and so on.

# ? Apr 15, 2015 18:02

Tomahawk: Aug 13, 2003; HE KNOWS

Any tips on an easy and not terrible way in JavaScript to implement something similar to http://paletton.com/#uid=1020u0k4lllaFw0g0qFq1g0w0eC using a hash to be able to save and share variables via a URL?

I've got about 50 variables that have various 1 digit numbers assigned to them and it looks ridiculous to save it as a 50 character string in a URL. I tried doing a base36 conversion but JavaScript hates huge numbers.

I'm sure there is a really obvious solution that I'm overlooking.

Tomahawk fucked around with this message at 19:21 on Apr 15, 2015

# ? Apr 15, 2015 19:18

Dr. Poz: Sep 8, 2003; Dr. Poz just diagnosed you with a serious case of being a pussy. Now get back out there and hit them till you can't remember your kid's name.; Pillbug

I'm a .NET developer and am curious to learn more about SEO basics. I know of the IIS SEO Toolkit but was curious if there is anything comparable that doesn't require a site be hosted in IIS. Any general links or resources are appreciated as well as recommendations on services that provide SEO as well. Any advice, links or suggestions are appreciated.

# ? Apr 15, 2015 20:06

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

ufarn posted:

I've only just started looking into replacing my <div>s with modern HTML5 tags, but I have some questions about semantics/best practices:

(1) Which of these two are preferable:
HTML code:
<ul id="nav" role="navigation">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
vs
HTML code:
<nav id="nav" role="navigation">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ul>
</nav>
The same applies to a seemingly redundant <header> around an <h1> with no tagline.

(2) Second, should I use <article> for a similar index list of articles, or should I just leave them in a <a>s inside a <li> inside an <ul>? <article> seems like something you wrap around a bigger blog with title, content, and so on.

(1) I've seen:

code:

<nav id="nav" role="navigation">
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
</nav>

Something about ul and screen readers.

(2) I would think article is just the article itself not the list of articles. So I'd leave it with li.

# ? Apr 15, 2015 20:20

fuf: Sep 12, 2004; haha

Dr. Poz posted:

I'm a .NET developer and am curious to learn more about SEO basics. I know of the IIS SEO Toolkit but was curious if there is anything comparable that doesn't require a site be hosted in IIS. Any general links or resources are appreciated as well as recommendations on services that provide SEO as well. Any advice, links or suggestions are appreciated.

Scroll up this page a bit.

Thanks for the SEO responses everyone, that google article is perfect ammunition to fire at clients.

# ? Apr 15, 2015 20:22

Funking Giblet: Jun 28, 2004; Jiglightful!

The Merkinman posted:

[

code:

<nav id="nav" role="navigation">
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
</nav>

Ding ding ding. Too many websites express everything in lists, this is more apt. role="navigation" is redundant though, should be deprecated for nav elements soon.

# ? Apr 15, 2015 22:05

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

I would argue id="nav" is even more redundant than role="navigation".

# ? Apr 16, 2015 00:13

Funking Giblet: Jun 28, 2004; Jiglightful!

Depends how many navs you have, id selectors are still the best.

# ? Apr 16, 2015 00:24

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

I didn't meant to not use id, but id="nav" is from a pre-nav era and only makes sense when you're targeting div#nav because you need to distinguish the navigation bar from the other divs in order to give it navigation specific stuff, but if you're distinguishing your navigation bar from other navigation bars you should at least use nav#top or something because nav#nav is quite opaque.

# ? Apr 16, 2015 00:48

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

I've jumped aboard the "IDs in CSS are gross" train, so the way I would do it:

code:

<nav class="nav-main">

# ? Apr 16, 2015 01:01

no_funeral: Jul 4, 2004; why

How the hell do I allow a user to upload JPGs and an XML file, and compile it into an html5 virtual tour serverside..!??! pano2vr seems like the ticket, but their docs don't really explain what I'm supposed to do, or I'm looking at the wrong docs.

# ? Apr 16, 2015 01:51

kedo: Nov 27, 2007

Only use IDs for interpage navigation and JS imo. <nav id="primary" class="horizontal"> looks nice to my eyes.

# ? Apr 16, 2015 02:38

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

Funking Giblet posted:

Ding ding ding. Too many websites express everything in lists, this is more apt. role="navigation" is redundant though, should be deprecated for nav elements soon.

So all screen readers will treat a nav element as if it had role=navigation on it sometime in the near future? Do you have a link, as I have not been keeping up on changes in web accessibility as of late.

# ? Apr 16, 2015 04:10

Funking Giblet: Jun 28, 2004; Jiglightful!

Lumpy posted:

So all screen readers will treat a nav element as if it had role=navigation on it sometime in the near future? Do you have a link, as I have not been keeping up on changes in web accessibility as of late.

Screenreaders *should* implement it that way, but whether they will or not...
http://www.w3.org/html/wg/drafts/html/CR/dom.html#sec-strong-native-semantics

Funking Giblet fucked around with this message at 07:17 on Apr 16, 2015

# ? Apr 16, 2015 07:14

Data Graham: Dec 28, 2009; 📈📊🍪😋

Anybody know how the CSS class/ID name style standard managed to settle on "object-name" rather than "object_name" or "objectName" like in every other context?

Hyphenated names make me itchy, because some languages (including JS) always want to try to subtract poo poo.

E: I mean I assume it's because CSS properties follow the hyphenated style, but that annoys me for the same reason (having to expose them in JS with alternative camelcased versions like backgroundColor).

# ? Apr 16, 2015 11:51

o.m. 94: Nov 23, 2009

I heard that in CSS1, you had to escape underscores which was awkward and not always well supported and I guess it just came from there, people preferred dashes out of convenience

code:

p.your\_mom

For instance

# ? Apr 16, 2015 12:30

ufarn: May 30, 2009

Is <main> a canonical element, or is it still tentative? I don't see it in the majority of the official documentation, so just wondering whether I should stick with my <section role="main">.

# ? Apr 16, 2015 13:08

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

Data Graham posted:

Anybody know how the CSS class/ID name style standard managed to settle on "object-name" rather than "object_name" or "objectName" like in every other context?

Hyphenated names make me itchy, because some languages (including JS) always want to try to subtract poo poo.

E: I mean I assume it's because CSS properties follow the hyphenated style, but that annoys me for the same reason (having to expose them in JS with alternative camelcased versions like backgroundColor).

I used objectName for a long time until I started using Wordpress, then I switched to object-name to be one of the cool kids. Now I reserve camel case for js function names and Sass variables.

# ? Apr 16, 2015 15:07

Adbot: ADBOT LOVES YOU

# ? May 12, 2024 12:24

spacebard: Jan 1, 2007; Football~

ufarn posted:

Is <main> a canonical element, or is it still tentative? I don't see it in the majority of the official documentation, so just wondering whether I should stick with my <section role="main">.

It's in the specification: http://www.w3.org/TR/html/grouping-content.html#the-main-element

# ? Apr 16, 2015 17:21

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

«‹›361 »