Menu icon Foundation

My Posts


My Comments

Audrey Bendjoua commented on Audrey Bendjoua's post over 5 years

Hello Wing-Hou Chan,

Thanks a lot once again.

After several trials this morning, I was about to take that way.
So I will follow your advice, rather than hide the "ALT" attributs into data-alt and then replace them via JS like Karl suggested. Unfortunately, I don't have enough skill to do that.

Navigation Timing API, from Matt Andrews would have been a solution but it's not well supported yet (especially by Safari, IE 9 does support it !). You might know it, but here is the link if you're interested :

http://mattandrews.info/talks/port80-2013/#/33

And another link from a french great developer who has made tests (Mobile first approch, Retina priority, network bandwith detection, and a mix of those three options). It's in french, but you can see the demo (just a bit of translation : "un concombre" is "a cucumber") :

http://blog.goetter.fr/tagged/responsive

Something weird occurs while I was testing this morning :

1) I've place the "Alt" attribut BEFORE data-interchange="[.....]", INSTEAD OF BEHIND, like I did first.
It's working much better. I mean, I don't have enough time to read the alternative text before images are properly replaced. Strange, isn't it ?

2) I've found a bug : I've tested my site on a smartphone which density is 245 ppi (Acer E2 duo : not exactly Retina, but still…). So it should be within the "Retina" default setting of Interchange ("only screen and (min-resolution: 192 dpi)"), but the small images are displayed instead of the Retina ones. In that case, Navigation Timing API was working really great. Too bad !

So, deal with option one, and I won't bother you anymore !

By the way, please accept my apology because I've made a mistake writing your name this morning, when I answered to Karl. I should have read my post once more before sending it. I'm truly sorry.

Thanks again.

Audrey

Audrey Bendjoua commented on Asif's post over 5 years

Hi Karl,

We were writing at the same time (I was asking Wu-Chang his opinion). As I've joinded the discussion very late, I did not exepect any answer.
So first of all, thanks a lot for your support.

And yes the images are "my awesome content" as I'm explaining it in my other post.

I'll try your solution. I don't know much about JavaScript but I'm tenacious.

Thanks again.

Audrey

Audrey Bendjoua commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

I'm confused : I've just read the post "Does Interchange effect SEO".

I've joined the forum too late, so I don't think anyone will answer me nor give me any advice.
That's why I'd like to submit you my issue.

In the website I was talking about, images are "The awesome content". I need Google website crawler to see and "read" them. Therefore I can't get rid of the "ALT" attribut.

And I have another doubt : using Interchange, that is to say, using images without their "SRC" attributs, will they be "transparent" regarding web indexing ?

When the site will be in production, images will often change, making my project "alive". They are at the heart of the web site. I'm a graphist coming into development after 15 years of print experience in press magazine. My purpose is to make print and web run together : after all they are both information medium, so why should each one should be on an excusive basis ?

Anyway, to get back to my main issue, should I use Interchange knowing that images will be the website reason of living ? Should I wait untill PICTURE tag and SRCSET can be implemented ? (You can check that link : http://picture.responsiveimages.org/ )

May you give me your opinion regarding that question and the best choice for me ?

Audrey

Audrey Bendjoua commented on Asif's post over 5 years

Oups ! Seems I miss my HTML code, here it is :

 <div class="project-img">
      <img data-interchange="[img/projects/dacca.jpg, (default)], [img/projects/dacca_r.jpg, (my_custom_query)]" /><span class="alt">La catastrophe de Dacca</span>
      <!--[if IE 8]>
      <img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" />
      <![endif]-->
      <noscript><img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" /></noscript>
    </div>
    <!-- End project image -->

Audrey

Audrey Bendjoua commented on Asif's post over 5 years

Hi everybody,

Sorry to jump into this matter so lately.

My question is simple :
If images are "the Awesome SEO content" (and they are in the website I'm buiding), should I avoid using Intechange and figure out another solution, using the PICTURE tag, like in the project above ?

http://picture.responsiveimages.org/

This question is linked to another recent post ("A kind of flash using Interchange"), when I've noticed issues using the "ALT" attribut with Interchange, when testing the site on mobil and tablet. I had to remove the "ALT" attribut because users would have seen it plainly, in full text, while the browser was searching the right image to display. Removing the "ALT" attribut disturbs me. (See the code to check what I did). No "SRC", no "ALT", no indexation ? (Not to speak about validation)

I hope someone will give me advice because images are at the heart of my project.

Audrey

Mandela


```HTML

span.alt {
  display : none;
}


```CSS  

Audrey Bendjoua commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

That's a great help, indeed. Thank you so much. I had no idea how to handle both compression via Gzip and the .htaccess file. I'll complete this with "Error Document 404 404.html" or something like that.
Actually I've found a link, but I'll have to work hard to plainly understand it.
Here it is :

https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess

Meanwhile, as I have to show a preview of my website today, I've removed the "ALT" attribute from images using data-interchange, and added a ... with a ".alt { display: none; } " within my CSS file, to give a chance to accessibility. (Yes, I know, it's old scholl using CSS now, but I knew nothing about web matters 4 months ago, so I'll jump to SASS a bit later).

Everything seems to work well with Foundation 5.2.2, except I have an issue on Iphone 4 which doesn't load all the file at once. I have to refresh to force it to display all the images. This problem occurs only on my home page, where I use the Block Grid to display images. (My site is like a portfolio except I don't show what I did, I show what I can do.)

Regarding the network band with, there would have been a solution here : http://www.resrc.it/
But it's a third component and it's expansive.
The great idea would be that a web host includes such a solution within its plans. Maybe the future ?

Anyway, thanks again for your support and your attention.
Audrey

Audrey Bendjoua commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

Thanks a lot for your reply.

Using Interchange, my code won't be validate anyway because the images have no "SRC". I'm just worried about indexation and accessibility. I guess I have to make choices.

I plan to set up a .htaccess file in order to put images and font in cache, but I'm an absolute beginner in development, and Apache documentation is quite technical and very tricky for me. But since my web host won't give me access to the http.config, I have no other choice.
Do you have any idea where I could find clear explanations about setting the .htaccess file the right way ?

To compil JS files into few files as possible, as required when using Google web developper tool, I've put all toghether jquery.min.js file, foundation.min.js file and foundation.interchange.js file, in that order, into a single file. It's working when testing the website with MAMP, but is it OK to do things that way ? I'm asking, because I've just noticed Foundation 5.2.2 has been released. So I'll have to do it again to be up to date.

I can save a few kb compressing foundation.interchange.js file but not that much.
As I'm not using all the foundation components (only the essentials + pagination), my foudation.min.js (I mean my custom file, with jquery, foundation and interchange) file doesn't weight so much. I've tried with Uglify : result is 95%, so 5% less than my original file.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Audrey Bendjoua's post over 5 years

Hello Wing-Hou Chan,

Thanks a lot once again.

After several trials this morning, I was about to take that way.
So I will follow your advice, rather than hide the "ALT" attributs into data-alt and then replace them via JS like Karl suggested. Unfortunately, I don't have enough skill to do that.

Navigation Timing API, from Matt Andrews would have been a solution but it's not well supported yet (especially by Safari, IE 9 does support it !). You might know it, but here is the link if you're interested :

http://mattandrews.info/talks/port80-2013/#/33

And another link from a french great developer who has made tests (Mobile first approch, Retina priority, network bandwith detection, and a mix of those three options). It's in french, but you can see the demo (just a bit of translation : "un concombre" is "a cucumber") :

http://blog.goetter.fr/tagged/responsive

Something weird occurs while I was testing this morning :

1) I've place the "Alt" attribut BEFORE data-interchange="[.....]", INSTEAD OF BEHIND, like I did first.
It's working much better. I mean, I don't have enough time to read the alternative text before images are properly replaced. Strange, isn't it ?

2) I've found a bug : I've tested my site on a smartphone which density is 245 ppi (Acer E2 duo : not exactly Retina, but still…). So it should be within the "Retina" default setting of Interchange ("only screen and (min-resolution: 192 dpi)"), but the small images are displayed instead of the Retina ones. In that case, Navigation Timing API was working really great. Too bad !

So, deal with option one, and I won't bother you anymore !

By the way, please accept my apology because I've made a mistake writing your name this morning, when I answered to Karl. I should have read my post once more before sending it. I'm truly sorry.

Thanks again.

Audrey

You commented on Asif's post over 5 years

Hi Karl,

We were writing at the same time (I was asking Wu-Chang his opinion). As I've joinded the discussion very late, I did not exepect any answer.
So first of all, thanks a lot for your support.

And yes the images are "my awesome content" as I'm explaining it in my other post.

I'll try your solution. I don't know much about JavaScript but I'm tenacious.

Thanks again.

Audrey

You commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

I'm confused : I've just read the post "Does Interchange effect SEO".

I've joined the forum too late, so I don't think anyone will answer me nor give me any advice.
That's why I'd like to submit you my issue.

In the website I was talking about, images are "The awesome content". I need Google website crawler to see and "read" them. Therefore I can't get rid of the "ALT" attribut.

And I have another doubt : using Interchange, that is to say, using images without their "SRC" attributs, will they be "transparent" regarding web indexing ?

When the site will be in production, images will often change, making my project "alive". They are at the heart of the web site. I'm a graphist coming into development after 15 years of print experience in press magazine. My purpose is to make print and web run together : after all they are both information medium, so why should each one should be on an excusive basis ?

Anyway, to get back to my main issue, should I use Interchange knowing that images will be the website reason of living ? Should I wait untill PICTURE tag and SRCSET can be implemented ? (You can check that link : http://picture.responsiveimages.org/ )

May you give me your opinion regarding that question and the best choice for me ?

Audrey

You commented on Asif's post over 5 years

Oups ! Seems I miss my HTML code, here it is :

 <div class="project-img">
      <img data-interchange="[img/projects/dacca.jpg, (default)], [img/projects/dacca_r.jpg, (my_custom_query)]" /><span class="alt">La catastrophe de Dacca</span>
      <!--[if IE 8]>
      <img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" />
      <![endif]-->
      <noscript><img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" /></noscript>
    </div>
    <!-- End project image -->

Audrey

You commented on Asif's post over 5 years

Hi everybody,

Sorry to jump into this matter so lately.

My question is simple :
If images are "the Awesome SEO content" (and they are in the website I'm buiding), should I avoid using Intechange and figure out another solution, using the PICTURE tag, like in the project above ?

http://picture.responsiveimages.org/

This question is linked to another recent post ("A kind of flash using Interchange"), when I've noticed issues using the "ALT" attribut with Interchange, when testing the site on mobil and tablet. I had to remove the "ALT" attribut because users would have seen it plainly, in full text, while the browser was searching the right image to display. Removing the "ALT" attribut disturbs me. (See the code to check what I did). No "SRC", no "ALT", no indexation ? (Not to speak about validation)

I hope someone will give me advice because images are at the heart of my project.

Audrey

Mandela


```HTML

span.alt {
  display : none;
}


```CSS  

You commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

That's a great help, indeed. Thank you so much. I had no idea how to handle both compression via Gzip and the .htaccess file. I'll complete this with "Error Document 404 404.html" or something like that.
Actually I've found a link, but I'll have to work hard to plainly understand it.
Here it is :

https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess

Meanwhile, as I have to show a preview of my website today, I've removed the "ALT" attribute from images using data-interchange, and added a ... with a ".alt { display: none; } " within my CSS file, to give a chance to accessibility. (Yes, I know, it's old scholl using CSS now, but I knew nothing about web matters 4 months ago, so I'll jump to SASS a bit later).

Everything seems to work well with Foundation 5.2.2, except I have an issue on Iphone 4 which doesn't load all the file at once. I have to refresh to force it to display all the images. This problem occurs only on my home page, where I use the Block Grid to display images. (My site is like a portfolio except I don't show what I did, I show what I can do.)

Regarding the network band with, there would have been a solution here : http://www.resrc.it/
But it's a third component and it's expansive.
The great idea would be that a web host includes such a solution within its plans. Maybe the future ?

Anyway, thanks again for your support and your attention.
Audrey

You commented on Audrey Bendjoua's post over 5 years

Hi Wing-Hou Chan,

Thanks a lot for your reply.

Using Interchange, my code won't be validate anyway because the images have no "SRC". I'm just worried about indexation and accessibility. I guess I have to make choices.

I plan to set up a .htaccess file in order to put images and font in cache, but I'm an absolute beginner in development, and Apache documentation is quite technical and very tricky for me. But since my web host won't give me access to the http.config, I have no other choice.
Do you have any idea where I could find clear explanations about setting the .htaccess file the right way ?

To compil JS files into few files as possible, as required when using Google web developper tool, I've put all toghether jquery.min.js file, foundation.min.js file and foundation.interchange.js file, in that order, into a single file. It's working when testing the website with MAMP, but is it OK to do things that way ? I'm asking, because I've just noticed Foundation 5.2.2 has been released. So I'll have to do it again to be up to date.

I can save a few kb compressing foundation.interchange.js file but not that much.
As I'm not using all the foundation components (only the essentials + pagination), my foudation.min.js (I mean my custom file, with jquery, foundation and interchange) file doesn't weight so much. I've tried with Uglify : result is 95%, so 5% less than my original file.

Posts Followed

Following

  • No Content

Followers

  • No Content