Squarespace template modification


#1

#2

I was actually already expecting that, as I was also not so happy with it, but wanted to hear from you first.

The problem isn't exactly on mobile, it's on any screen that's too small. And yeah, I've done it already, in just a few minutes, with these in mind:

https://css-tricks.com/centering-css-complete-guide/

wink

PS: I just noticed I'v switched the file names last time! stuck_out_tongue

PPS: I'm trying to move away from zendesk and into this new ticket solution I'm creating. I hope you don't mind leaving your ticket (and all others from now on) open to the public.


#4

[email protected]:

Hi Caue

Yep, I was using mobile as shorthand for small viewport.

I think something’s gone wrong: the code in tblog looks the same, yet no thumbnails are showing.

Cheers


#5

I don't seen to have any trouble. The CSS code used to be:

  article img.thumbnail {
    float: right;
    width: 200px;
    margin-left: 1em;
  }

And now it is:

@media screen and (min-width: 768px) {
  article img.thumbnail {
    float: right;
    width: 200px;
    margin-left: 1em;
  }
}
@media screen and (max-width: 768px) {
  article img.thumbnail {
    width: 200px;
    margin: 0 auto;
    display: block;
  }
}

Meanwhile in my screen and on my phone, I can see this in effect working just fine here: http://www.formulate.com.au/tblog/

Or were you already trying to apply it in production, i.e. directly on the blog? If so, in fact, I forgot you do need to change one setting there! This line:

Y.io('/tblog?format=json', {

Has to become this:

Y.io('/blog?format=json', {

#6

Stange. I tried it in a different browser and it worked, so I refreshed in Firefox and it worked again. Sorry.

Can you make it so that on small screens, the image width is 100% of the text? Looks odd being not as wide.

Also need a bit more padding above and below so it's not so hard up against the text.

Thanks,


#8

Yeah, okay, I've raised the image file size optimization to 500 (it was ?format=200w on the script) and so that auto adjustment can be easily done...

I still find it weird how when on much smaller screen the image actually gets bigger. I prefer having it centered as it was, but that's entirely up to you.

And maybe there's still some adjustment to be done when the screen is between 750 and 800 px. I've made this CSS to address it, but you can just remove it if you prefer: , (min-width: 751px) and (max-width: 800px)

I feel we're pretty close to reaching final here... stuck_out_tongue


#9

Hi Caue

I don't really understand what the file size optimization (?format=200w) does, but I hope it doesn't slow down page loading.

I like the way it looks now on smaller screens. Full width and more space above and below works for me.

I agree it looks funny when the image gets smaller as the screen gets bigger. Can you make the size of the image on larger screens the same as the largest size it ever gets on smaller screens? That way, it will only ever get bigger as the screen gets bigger, and I don't mind the image taking up a bit more space.

I also think we're getting close to final, by the way. Thanks for all you've done so far.

Cheers
Jessica


#10

Depending on what you meant, that's very easy, and already done now. I've changed the CSS width to 400px. But you see, at some widths, text will be very compressed on the left side, which I managed to avoid with width 200px, which is a great width I think.

The file size optimization does improve page loading, but increasing it to 500 is very unlikely to have a significant impact on the page loading time in any internet you use there. It will impact a bit more depending on how many posts you want to display at once on very slow internets. I mentioned it because I like to use every optimization resource I've got in hands and just in case you do have access to slow internet and feel a difference there, you'd already know why.

Now, it will be mostly impossible to make the floating image be same size or bigger than the full width one and look good for every screen size. If you look how it looks right now, at some screen sizes (between 800 and 950, and between 450 and 600) I'd say it's quite problematic. I could only solve it by reducing the image size or having it centered on top (as it was before). Unless you have some other idea...

Maybe I should take some deisgning courses. stuck_out_tongue


#12

Responsive web design is tricky, isn't it?!

I've given it a fair bit of thought and decided I actually don't think the fact that the image gets smaller – as the view gets bigger – matters. So I've changed the width back to 200px (and added some comments).

One last thing before I sign off on this: can you confirm that it works with IE (at least IE9 and above)? I hear that special media queries have to be written for IE.


#13

It sure is tricky! smiley

I have [no good way to test any Internet Explorer]( http://stackoverflow.com/questions/3426498/online-internet-explorer-simulators) so I'm sorry, I can't give any guarantees for IE.

But no modern site will look good in IE8 or less. And as far as I can tell, not even squarespace.com itself is flawless in IE9. All that being said, it seems like http://www.formulate.com.au/tblog/ do look nice in IE9 as far as www.netrenderer.com can tell.

You're right to be worried about that. [IE8 is still somewhat significant]( http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/), even if the majority of IE users are on IE9 and above. And people are amazingly lazy to do the right thing (try talking to sao paulo citizens washing cars and sidewalks with water hoses). But that's some stats from the only statistics site I've found that lists IE as over 50% usage. Most will tell [IE is less than 20-25% of the world wide web]( http://en.wikipedia.org/wiki/Usage_share_of_web_browsers).

So you should take a look at [your own site usage metrics]( http://help.squarespace.com/guides/using-squarespace-metrics) instead, under traffic overview. In mine, for instance, all IE usage is insignificant at less than 1%.

I do think this is, in these days, nothing to worry about.


#14

Hi Caue

I'm more concerned about IE than many because one of my main target audiences is government, and they are often stuck with IE8, IE9 etc. Even though for my site it is only about 2% users from IE8 and 3% from IE9, this is a risky audience to alienate, as they are actually the ones that hire me. But I'm happy with how it looks like it will render on IE9, and I think I just have to give up on IE8.

Thanks for all your work on this project. I've just paid the remaining $USD42.

All the best,
Jessica


Squarespace modification stopped working
#15

Ah, yes... The government... And banks... They do often make the terrible tech choice of keeping everything outdated. At least nowadays people stuck there might have an option to use their smartphones and tablets! smile