no subject
Tue, Oct. 6th, 2015 09:35 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
annarti
This year spring seems to have lasted about 2 weeks, but rather than happen around late-December, this time spring happened in late-September! And then SUDDENLY SUMMER. 35 over the weekend, complete with high winds that set fire to Port Lincoln. Today dropped back to 26-ish but it'll be up to 30 again by the weekend. So. This'll be that El Niño summer we've been warned of.
Meanwhile, I'm updating my web folio* and specifically making a blog for it. Here is the current test file and following are my known issues:
First up in Chrome, which is the browser I was looking at when creating it, so this is perfect. Also behaves in exactly the same way on the Mac at work. Picks up the custom fonts, resizes all the images smoothly and beautifully, columns respond... speaking of which!
When the browser is less than 756px wide (for mobiles), it changes from a 4-column layout to a single column, removing the first column (the little sidebar on the left), turning the right column into a square for the page header and dropping the third/navigation column to the bottom. Demonstrated here by Chrome on the left, Firefox in the middle (after a bit of wrangling) and Edge on the right. Edge is surprisingly perfect. Genuinely didn't expect that.
So these two examples are what it's SUPPOSED to do, complete with little pop-out menu in the top right, which actually works everywhere in exactly the same way. Who knew?
Firefox slightly less perfect in that it drops the fonts, but this has always been a FF issue so I'm not hugely fussed. It took a bit of wrangling--the image within the entry refused to shrink and hence made the column the full width of the image, which is 1000px and Not Helpful, but it works now.
Internet Explorer is good when big, if again dropping the fonts in somehow the most hideous way possible. When it shrinks, though, issues happen:
So now the sidebar navigation is right up just below the top image, and layered on top of the main body. WHY. SCREW YOU RIGHT IN THE EAR, IE. Edge works fine, IE breaks. My question, though, is does this really matter? The small width is for phone browsing. Do phones actually USE IE? I know Microsoft's removing support for it from its desktop OS, but what do Windows phones use? Is there still a high chance, like with desktops, that most people who've been using IE will be sticking with it until they're forcibly kicked off? HAVE they been forcibly kicked off? Does it even matter that IE looks shit when it shrinks?
Opera breaks like you wouldn't believe. It's doing the same not-resizing-the-entry-images thing as what Firefox was doing, only the FF fix isn't fixing Opera.
And when small, it makes the top banner-div the full height of the window, so the background repeats and text doesn't start for ages. I've got that particular div set to be '100vw' high, which is 100% of the viewport width. Which makes it an awesome square! On everything except Opera. Unless there's an easy fix for these two problems, though, I likely won't bother since Opera is so little-used, even less by designers and hence potential bosses. If it's something someone has a fix, for, though, I'm all ears.
So all up, the results are:
CHROME Perfect across Windows, Mac and also my little Android phone.
FIREFOX Near-perfect on Windows, theoretically-perfect on Mac (I think? I can't remember if the fonts worked), untested on my phone since the sodding thing has no space and won't install any other browsers.
EDGE Perfect; only available for Windows 10, presumably performs the same on a Windows 10 phone but I haven't got one to check.
INTERNET EXPLORER Perfect on Windows large screen, col-3 breaks when shrunk. Only available on Windows (YESSSSS).
SAFARI Perfect; only available on Mac (YESSSSSS).
OPERA Completely broken on Windows, perfect on Mac, untested on my phone. WFT mate. It's the same goddamn browser and has no affiliation to either.
Obviously all untested on iOS given my lack of an iThing, so anyone with an iThing to test would be much appreciated! It all worked on the Mac at work when I tested this afternoon, except for Firefox giving the same issue as it did on the PC, so theoretically that's fixed now, too. Also a Windows phone, and an Android with more space than mine so you can install other browsers and check it =x
* yes, again, shuddup. I'm making it more webby so it looks like I know the html I proclaim to know and they won't care that I've never done it professionally.
Meanwhile, I'm updating my web folio* and specifically making a blog for it. Here is the current test file and following are my known issues:
First up in Chrome, which is the browser I was looking at when creating it, so this is perfect. Also behaves in exactly the same way on the Mac at work. Picks up the custom fonts, resizes all the images smoothly and beautifully, columns respond... speaking of which!
When the browser is less than 756px wide (for mobiles), it changes from a 4-column layout to a single column, removing the first column (the little sidebar on the left), turning the right column into a square for the page header and dropping the third/navigation column to the bottom. Demonstrated here by Chrome on the left, Firefox in the middle (after a bit of wrangling) and Edge on the right. Edge is surprisingly perfect. Genuinely didn't expect that.
So these two examples are what it's SUPPOSED to do, complete with little pop-out menu in the top right, which actually works everywhere in exactly the same way. Who knew?
Firefox slightly less perfect in that it drops the fonts, but this has always been a FF issue so I'm not hugely fussed. It took a bit of wrangling--the image within the entry refused to shrink and hence made the column the full width of the image, which is 1000px and Not Helpful, but it works now.
Internet Explorer is good when big, if again dropping the fonts in somehow the most hideous way possible. When it shrinks, though, issues happen:
So now the sidebar navigation is right up just below the top image, and layered on top of the main body. WHY. SCREW YOU RIGHT IN THE EAR, IE. Edge works fine, IE breaks. My question, though, is does this really matter? The small width is for phone browsing. Do phones actually USE IE? I know Microsoft's removing support for it from its desktop OS, but what do Windows phones use? Is there still a high chance, like with desktops, that most people who've been using IE will be sticking with it until they're forcibly kicked off? HAVE they been forcibly kicked off? Does it even matter that IE looks shit when it shrinks?
Opera breaks like you wouldn't believe. It's doing the same not-resizing-the-entry-images thing as what Firefox was doing, only the FF fix isn't fixing Opera.
And when small, it makes the top banner-div the full height of the window, so the background repeats and text doesn't start for ages. I've got that particular div set to be '100vw' high, which is 100% of the viewport width. Which makes it an awesome square! On everything except Opera. Unless there's an easy fix for these two problems, though, I likely won't bother since Opera is so little-used, even less by designers and hence potential bosses. If it's something someone has a fix, for, though, I'm all ears.
So all up, the results are:
CHROME Perfect across Windows, Mac and also my little Android phone.
FIREFOX Near-perfect on Windows, theoretically-perfect on Mac (I think? I can't remember if the fonts worked), untested on my phone since the sodding thing has no space and won't install any other browsers.
EDGE Perfect; only available for Windows 10, presumably performs the same on a Windows 10 phone but I haven't got one to check.
INTERNET EXPLORER Perfect on Windows large screen, col-3 breaks when shrunk. Only available on Windows (YESSSSS).
SAFARI Perfect; only available on Mac (YESSSSSS).
OPERA Completely broken on Windows, perfect on Mac, untested on my phone. WFT mate. It's the same goddamn browser and has no affiliation to either.
Obviously all untested on iOS given my lack of an iThing, so anyone with an iThing to test would be much appreciated! It all worked on the Mac at work when I tested this afternoon, except for Firefox giving the same issue as it did on the PC, so theoretically that's fixed now, too. Also a Windows phone, and an Android with more space than mine so you can install other browsers and check it =x
* yes, again, shuddup. I'm making it more webby so it looks like I know the html I proclaim to know and they won't care that I've never done it professionally.