Proper markup for two logos with Gilder/Levin image replacement

I'm developing a site that has two logos in the header: one aligned left, and the other one aligned right.

I have managed to make it work with Gilder/Levin image replacement, but the markup is not perfect and I'm not sure how to proceed.

HTML:

<div id="top"><div class="widthWrapper">
  <h1>
  Foo Logo<span></span>
  </h1>

  <div id="bar">
  Bar logo<span></span>
  </div>
<!-- #top, .widthWrapper --></div></div>

Code (markup):

CSS:

h1 {
  float:right;
  position:relative;  /* allow span to be absolute positioned over h1 */
  margin:0.25em 0.5em 0 0;
  padding:0;
  overflow:hidden;
  height:60px;
  width:300px;
}

h1 span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0 auto;
  margin-right:1em;
  height:60px;
  width:300px;
  background-image: url(images/foo.png);
}

#bar {
  float:left;
  position:relative;  /* allow span to be absolute positioned over #bar */
  margin:0 0 0 1em;
  padding:0;
  overflow:hidden;
  height:70px;
  width:400px;
}

#bar span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0 auto;
  height:70px;
  width:400px;
  background-image: url(images/bar.png);
}

Code (markup):

Responsiveness works perfectly using smaller images for smaller displays, the code to change the size of the logos is something like this (inside the @media query)

h1, h1 span {
  height:60px;
  width:300px;
}

h1 span {
  background-image: url(images/foo.png);
}

Code (markup):

I have tried this, but I have problems with the second logo being contained into h1.

<h1>
  Foo Logo<span></span> <span id="separator">-<span> Bar logo<span id="bar"></span>
</h1>

Code (markup):

What would be the best approach for this?

 

That methods old school man, what if your logos over a picture or a pattern?

Maybe try something like this?

http://codepen.io/sitechop/pen/VjaeqK

Not sure what your design looks like so I just did some random stuff. I threw the divider as an :after on the h1 for shits. Look how much cleaner the html looks:

<h1>
  <span class="logo-1">Logo</span>
  <span class="logo-2">Logo</span>
</h1>

Code (markup):

 

Thank you, it seems to work with some modifications although I have to test it with more browsers. Do you know the name of this image replacement method to look for more information?

This is the code:

HTML:

<h1>
    <span>
                      Foo
    </span>
    <small>
                      Bar
    </small>
</h1>

Code (markup):

CSS:

h1 {
  overflow:hidden;
  padding:0 0.75em;
}

h1 span {
  white-space:nowrap;
  overflow:hidden;
  float:left;
  height:70px;
  width:400px;
  background-image: url(images/bar.png);
  text-indent:100%;
}

h1 small {
  float:right;
  height:60px;
  width:300px;
  background-image: url(images/foo.png);
  margin-top:0.30em;
  text-indent:100%;
}

Code (markup):

How would you make the graphics be one in top of another for the media queries? this css is not working:

  h1 span, h1 small  {   
  float:none;
  padding:0;
  text-align:center;
  margin:0 auto;
  }

Code (markup):

 

That's because it ****ing works properly, unlike that halfwit text-indent retard bullshit you posted!

Do NOT use the text-indent method, as it defeats one of the ENTIRE reasons to even be USING image replacement... images off appearance while CSS is still enabled. You'll just get two blank boxes. COMPLETELY misses the point!!! That's why you make an empty span and position it OVER the text, instead of trying to remove the text or slide it to where it can't be seen offscreen. With our friends in Canada and Australia facing bandwidth caps, people browsing on secure methods that neuter bandwidth, the fact that broadband is STILL a myth across most of the continental US, and the impending bandwidth crunch because NOBODY is building new backbones as they've not even paid off the existing infrastructure, and mobile connections that are a pathetic joke in most places, disabling images is quite commonplace... using text indent tells those people to go **** themselves, which is why I tell any developer advocating said technique to do the same!

Using text-indent for image replacement is HERPAFREAKINGDERP inaccessible RUBBISH!!!

Really though without seeing the images in question, the ACTUAL text being replaced, and what each element actually IS, it's near impossible to tell you what the proper markup for them should be. This is a case where placeholders and vagaries just don't cut the mustard.

There's also several techniques that one may or may not want to leverage, such as if you really care about older browsers that can't handle generated content or not, since if you don't mind those just getting the text, you could just :before and :after the replacement images.

 

I have rewritten it using GIlder/Levin. The css code in the media query is not working well when resizing the window:

HTML:

  <h1>
       <span>
              Foo<span></span>
       </span>
       <small>
              Bar<span></span>
       </small>
  </h1>

Code (markup):

CSS:

h1 span {
  float:right;
  position:relative;
  margin:0.25em 0.5em 0 0;
  padding:0;
  overflow:hidden;
  height:60px;
  width:300px;
}

h1 span span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0 auto;
  margin-right:1em;
  height:60px;
  width:300px;
  background-image: url(images/foo.png);
}

h1 small {
  float:left;
  position:relative;
  margin:0 0 0 1em;
  padding:0;
  overflow:hidden;
  height:70px;
  width:400px;
}

h1 small span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0 auto;
  height:70px;
  width:40px;
  background-image: url(images/bar.png);
}

Code (markup):

media query section is not working as I want:

@media (max-width:50em) {
  ...
  h1 span, h1 small {
  float:none;
  padding:0;
  text-align:center;
  margin:0 auto;
  }
  ...
}

Code (markup):

The code in the first message works fine, but this markup looks more correct to me. Not sure if it's viable to do it this way or it's fine to leave it as the first version. I'll look into :before and :after, thanks.

 

I'd say the majority of people use image replacement so they can have text version of websites name inside h1 tag, for SEO reasons. I can honestly say I don't know a single person who browses with images off. If you're really concerned with that go ahead, but that methods not going to work on anything other than a solid background color.

Deathshadow does the alt attribute hold any value? I really want to drop these dumb hacks and just do this:

<h1>
  <a href="#">
    <img src="logo.jpg" alt="Digital Point">
  </h1>
</a>

Code (markup):

Puntocom81 upload the page or put a demo up so we can see whats happening. My head doesn't render html/css to well haha

 

This code does not degrade gracefully. It shows the image instead of the text when rendering it without css. Also, and please correct me if I'm wrong, but img alt is for describing the image, not to show to site title, and img is not semantically correct to be inside h1.

Ok, will post an online version as soon as possible, probably tomorrow.

 

Just for information you can also check https://css-tricks.com/css-image-replacement/ for alternative image replacement techniques although there are only two (including the one you are using now) which work in all situations.

Well, I do... on my phone. It is a perfect way to save data and enjoy a speedy Web experience even on a slow connection.

 

Which is one of the target audiences I mentioned -- and why usually on my narrowest media query I'll often kill off ALL unneccessary images to just allow the plaintext and content images through.

Of course I live in an area where 4g is "yeah right, enjoy your one tower with zero line of sight anywhere in town", 3g is "enjoy your two bars or less no matter where you are", and the only connection that works reliably is old-fashioned GSM... which is why the impending shutdown of GSM to reclaim those frequencies for "future technologies" is looking to basically leave three quarters the COUNTY without cell coverage since the dipshits STILL won't invest in actually putting the infrastructure for the new tech in place before they shut down the old one!

You'd think they were still paying off the old one they were shutting down or something since they were just pocketing all the cash and squirreling it away in overseas banks instead of re-investing it in the business. Go capitalism in markets where there's no competition!

 

Not to sound like your mother, but if everyone else went jumping off a cliff... Just because the "majority" is doing something, doesn't make it right. Kind of like when things are popular, doesn't necessarily make them good. See "Disco", Justin Bieber, and Donald Trump. I like rock, I like soul, I like pop, but I never liked disco...

When you are choosing your tags AND your content, you should be doing so for the MEANING. In that way most logo images are just presentational affectations OF the text, as such the text is what goes in the markup, NOT the image. The image is presentation, and presentation has ZERO malfing business in your markup.

Hence one (and only one) of the many reasons people use image replacement. There are a LOT of reasons image replacement exists and why it should be used; if you're focusing on it just because of SEO-tardery, then you're buying into the scam artist bullshit.

The first and foremost reason is accessibility AND flexibility of design. The text makes more sense than the image, particularly since ALT should describe what it is an image of, which is not necessarily the meaning of the text or logo itself. Images off appearance showing a hyperlink on text UA's, or being read "IMAGE: alt text here" in a screen reader kind-of sucks out loud. On the layout side, you can add/remove/replace the image in the css however you like. The SEO is just a natural side effect of this, stemming from the BEST SEO advice we ever got -- as Matt Cutts put it, "write for the user, not the search engine"... an image tag for a presentational image that the site would make complete sense without is NOT writing for the user!

Another reason is caching. The smaller markup of not having the URI in there and simply an empty span (I don't usually deploy with the comment on it) means that the majority of the code for that image is already in the cache on subpages. Less markup and pre-cached CSS == faster page load. It also means that if you have multiple images of presentation you could tile sheet them en-masse reducing the overhead.

I've just never seen a logo that would qualify in my mind as part of the content of the page. Again, it's presentation, and if you're putting presentation in the markup you've missed the entire reason HTML even EXISTS!

You really need to get out more... (I kid, I kid...)

It's QUITE common where I am, pretty common across great swaths of the United States, Canada, and Australia. It's even common amongst home users in many of those places where they face bandwidth caps that either cut them off cold, neuter their 5mbps connection to 128kbps, or worst of all, just starts turning what would normally be a $60/mo connection into a thousand dollars or more as they just start charging you for the overage.

Not everyone lives in the privileged magical land of 50mbps+ broadband for everyone at pennies on the dollar. Some places no matter how much you spend, it just doesn't exist and isn't likely to exist for a decade or MORE. PARTICULARLY in places that are still paying off their existing copper infrastructure... that's something that's a bit of a laugh, many "late comers" to Internet are getting the better speeds as it was their first investment... while places that have had cable TV and DSL forever are still paying that off before they can even CONSIDER laying down fiber.

See how attempts to bring FIOS to New England fell utterly and completely flat on its face because nobody's willing to back it financially. I think it's in like three towns, and they're done.

More often than not that's then a problem with the design, NOT the method... pre-compositing the background can often fix that, as can "close enough anti-aliasing" if handled properly. If you NEED an alpha foreground you could always double up on the background with a second replacement image. There are plenty of ways around that... and if you can't get around that, then you're likely dicking around with goofy graphical bullshit slapped together by some PSD jockey who probably has ZERO blasted business designing a Joe blasted thing for websites. Aka the typical artist under the DELUSION that they are a designer when they don't know enough about HTML, CSS, emissive colourspace, or accessibility to be designing but two things; and Jack left town...

Side note, I'm often aghast at how often I'll come across dipshits using massive alpha transparent png to piss all over a site, particularly in cases where pre-compositing to the background would do the job just as well. There's a reason I try to avoid using alpha transparencies on websites!

 

From your descriptions of cell-coverage and bandwidth-problems, I feel less and less inclined to even visit the US
I am, as you know, from the privileged part of Europe, where there has been done investments in the billions the last 10 years to cover the whole country in at minimum decent 4G - per now I think it's about 87% of the country covered, and what isn't is mostly very small villages (think less than 500 people) or wilderness. I don't think I would've survived having to have a sort-of working wifi to get online with something close to decent speed. I guess that's one of the major selling points for Starbucks and such: free wifi.

 

Yet bandwidth is not everything... Often displaying very large images (and large scripts, and other bloated content) can bog down a desktop PC, let alone mobile phones. Disabling images (and especially JS) can help in this matter too. Most of mobile phones (remember that the majority of people do not use flagships) are pretty slow and struggle to render those bloated sites, no matter how fast the connection is.

Plus, a great part of those images are just useless background decorations. They are not needed if you are just browsing the Web on a go, or need to check something quickly when you are outside, etc. No matter how fast the connection is, it will always take time to download tens, or even hundreds of files which are usually served by many popular websites. Blocking at least some of them helps

 

Honestly, I can't answer that without knowing what the text is that's going inside it, why it's separate from the h1, IF it should even be separate (as is it part of the same heading or not?), and what it's being replaced with.

CONTENT dictates the markup, and in this case "foo" and "bar" are simply too vague to have ANY clue what the proper HTML should be. HTML without context for the content is PRESENTATIONAL use of tags, and, well... you've seen me rant and rave about the evils for that plenty of times by now.

I'll poke my head into your other thread when I wake up... gotta love living a 26 hour day.

Which is a point I'm ALWAYS trying to drive home... file COUNTS are as if not often more important than sizes.

You can see this if you upload via FTP... what takes longer, uploading a single 10 megabyte file, or a hundred 10k files? HTTP has the same type of overhead issues, that real world averages 200ms (a fifth of a second) for each file past the first eight, and worst case can hit a second or more, REGARDLESS of connection speed. You do a ping or tracert, multiply that by three, and that's how long each request ACTUALLY takes in overhead (called handshaking), the only reason the average is lower is the ability to connect for more than one file at a time, and if you're on a shared public connection like your local coffee shop, (or if like a friend of mine your old lady is watching the Doctor on Netflix and your 14 year old is hogging the pipe torre... uhm, doing research for school) that number drops precipitously. IT's amazing how fast even a 45mbps home connect can get choked out faster than CM Punks attempt at entering the UFC.

Sadly, it's again only going to get worse as NOBODY's building any new top-level infrastructure -- as it is I happen to be seated on the "wrong side" of the "Pipeline divide" meaning that I get faster speeds to France across the Atlantic cable than I do 80 miles down the road to Boston, MA. MOSTLY because a tracert shows the traffic actually going across the atlantic and BACK first... or how to connect to chicago from here (one of the biggest fastest hubs in America) the traffic goes all the way across Canada to Vancouver first.

Though MOST of that is just the fact that Time Warner and... gah, whatever the company is to the south that changes hands more often than a former Soviet third world puppet state... are having a behind the scenes turf war despite having a "gentleman's agreement" not to compete in the same markets.

Of course Charter just bought out Time Warner here, so Christmas only knows where my own connection cost and speed is going next as they try to price gouge the consumer to pay out all the investors who made the buyout possible as the stocks of both just rose. (particularly with over 60% the buyout being leveraged in cash and it being a smaller company gobbling up a larger one)

There's an impending bandwidth crunch coming to most of the first world, and really most places aren't doing anything about it or even planning for it other than trying to impose bandwidth caps, charge as you go... which is why "Net Neutrality" is such a hot topic amongst computing geeks right now; trying to fight the inevitable outcome of the people running things pocketing more than they put back in -- to the point that companies are changing hands like hotcakes like they always do right before a collapse.

Oh look, another failing industry for the Fed to just hand money to in a bailout, despite having no plan to ACTUALLY fix the problems.

I've been hearing for over a decade and a half "broadband is here, who cares" and there's STILL places where that's not true, there's ALWAYS smaller cheaper less capable devices getting into more people's hands, and aging infrastructure that's just not keeping up with the task. If you're lucky enough to live in one of the manic pixie girl worlds where new infrastructure was handed to you, well good for you! But don't screw the 80%+ of the world population who aren't even close to that.

 

Thank you very much, your help is greatly appreciated.

I used #foo and #bar to make it simpler. In the header there are two logos: one of them is the logo of the shop and the other one is the logo of their distributor. Both are located in the header as seen in this example:

http://37.252.122.117/cc/

 

Hmm... you know, I'm not entirely certain I'd treat the second one as content... but again without having FULL content of the page marked up BEFORE screwing around with appearance, I can't say. I've no clue how either of those images relate to the rest of the page... or if they're even appropriate to be the H1.

Having them RTL when the heading order is the other way around seems quite odd too.

 

Again... not really true here in Norway. Most people have at least mid-range to top-range phones (think iPhone 5S or better, or Samsung S5 or newer) which doesn't really struggle that bad with most things internet, even with images and such sucking away at the battery. And really, if your desktop struggles with bloated sites, you need a new desktop

This Macbook I'm on right now struggles a bit with heavy load on the browser - I see the beachball way too many times for my liking, but this one is 7 years old, and due for an upgrade/replacement soon.

That is true, of course, and as you say, often it goes faster and uses less battery to turn off images - however, as long as there is no good way to only turn off specific images based on something like publishing date, or actual file date or something, reading articles where all images are turned off is a pain in the ass. Personally, I just can't be bothered, but then I don't really visit that many sites that has this problem, either (apart from Facebook, but I use the app anyway, so it's not really a thing).

 

So... you either don't have poor people, or don't know any? How exactly do people other than full time executives making five times the median income (what's that there, 120k kroner / 19k USD?) actually afford these high end phones?

Here in 'Murica, you get more than 20 miles from a major urban center (apart from on college campuses where alleged adults still being treated like children and mostly acting like children still have life paid for by mommy and daddy) you don't see a lot of high end smartphones in the hands of Joe Sixpack or Susie Sunshine. You DO see a lot of low to mid-range android knockoffs... Like my CuBot GT99... or older devices because people shot their wad years ago. (ASSUMING you see them at all given that across a lot of the rural parts of the country, nobody can afford the service plans when it's the same $$$ as a weeks worth of food for a family of three.)

Unless you're only catering and/or only know the top 2% -- or your country only HAS what would be considered the top 2% of wealth in America as your entire society -- what you describe sounds like an aristocratic fantasy-land; completely out of touch with the "Joe on the street"

Though last time I was in scandahoovia (admittedly this was 20 years ago) there was an aristocratic societal divide across the region... it's starting to look pretty clear on which side of that you may have been raised.

The poor stay poor, and the rich stay rich, and I'm right here in the middle... now ain't that a...

 

The average net income in Norway is approx 400k. Granted, that is an average, not a median (I couldn't be arsed going through data to find the actual median income), but even students, living on ONLY student loans, have an income of 120k. Average on social benefits (not working at all) will also be somewhere between 60-80k (we're talking actual money paid here, that is after rent is paid, and other regular living costs, not including food and, as we're discussing here, a phone).

And of course, I'm not saying everyone has the latest and greatest, of course they don't. However, getting hold of say an S4, or an S5, or an iPhone 5S or an iPhone 6 will probably cost you about 1500 - 2500 NOK used, and we do have some of the cheapest contracts in the world (about $12 / month gives you free calls/sms/mms, 1GB data with 4G speed, and you can easily upgrade that to about $25/month and get 3GB data, and buy more data if need be specific months).

I don't. I have friends in all parts of society, from the poor, on welfare, to people making $200k or more a year. However, apart from some of my friends who doesn't even own a smartphone (using old Nokias and Ericsson phones), by choice, mind, not because they can't afford better, I think perhaps the worst phone I know of is iPhone 4. Some might still be using S3s or Notes, or similar, but usually people upgrade their phones every 2-3 years at worst, once a year on average, I guess.

Looking at numbers, Telenor (the biggest telecom-company in Norway) says that about 8 / 10 have a smartphone, and out of those, about 60% have a smartphone with 4G capabilities, 30% with 3G, and the rest, continously dwindling, have 2G or worse. The most sold cellphone in Norway last year (2015):
1. iPhone 6
2. iPhone 6s
3. Samsung S6 Edge
4. Samsung S6
5. Samsung S5

That should tell you something as well.

 

Is it not a little bit short-sighted?

My desktop is fast enough to manage the bloatware but the computer I have at work - not really (this is why I use Palemoon with uBlock + NoScript here). Just last year we still had several machines with just 512 MB of RAM and others with only 1GB of RAM are still prevalent. There was even one Windows 98 computer still in use.

There are many cases where you simply are not in power to upgrade, and still have to use the computer. Especially in places like educational or public institutions, or charity organizations you often have to deal with very old hardware.

On a side note, I actually believe that to make sites work smoothly on slow hardware should be part of Web accessibility because it is often older people, people with disabilities, people with financial difficulties, etc. who are simply unable to afford upgrading their hardware (or even buying one).

 

Keep in mind that you live in a small country, maybe half the size of Texas, where I live. El Paso is closer to Los Angeles than it is to Dallas. The 600+ miles are sparsely inhabited, being high plains ranch and farmland. A small farm where I lived back in the day was 10 miles from the nearest town, pop..1250, and 70 miles from the county seat in the opposite direction. As a telecom company might put it, that last mile is a bitch.

Here in Dallas, I have 60mb/s internet with no data limit, and that's the base service. Worst case, I've downloaded 25gBytes of data in 20,000+ files in one night and into the morning concurrently with normal browsing, email, &c. It's not that we don't have the service, it's that we are not a puny little bit of land with high population densities that make it economical to provide everyone with high speed service. That means if you don't take those folks without high speed connections seriously, you're screwing them over. Guess where people who have to drive 70 miles to the stores do their ahopping? Can you say internet?

gary