Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: 1 [2] 3

Author Topic: Introducing the new Inkpattern Magazine site  (Read 7902 times)

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #15 on: September 28, 2009, 02:34:50 AM »

<-- in the us and I can view the site fine.

It looks good I like it Fred. I wonder how you will separate the issues in sNews?

oh, ffs! ;)
Thanks. The issues will be separated in two ways: 1) on the page "PDFs" you see the full issues available as whole, printable, magazines.
2) When the home page becomes "issue 2", the current home page becomes the page "issue 1-09". Links on the page will remain intact so there's no loss of content relation.
This was the thing I debated the longest with myself about, and although it's not an optimal solution it was the one I settled for at this point. I thought about making a category "issues" with each issue being a subcategory, but in the end that felt like more of a logistical nightmare -- at least at this point -- than the current solution. But it's only the first issue yet, there's plenty of time to fix whatever's hinky.

The GeoBlock... sigh. Seems I can't get that one right. Thought I had it right at first but forgot to change the local url to domain url, but that seemingly didn't matter. What I was trying to do was to catch visitors coming from the mainland and the US islands, plus proxy server users, in one swoop. I think that might be the problem. Anyway, what's the point of making a stand when the ground is wobbly...
I've made a small change but I don't know if it makes any difference. Locally it works, so it should work on the web host as well, but it seems not to. F***.

@keyrocks -- Thanks Doug, I appreciate it. FancyZoom isn't used on any images on the front page, no, but it still loads some of its UI images unnecessarily. Perhaps "a third" was a bit much, but certainly a good amount can be removed. Plus I've rethought the content a bit compared to the initial plan and am moving away from FancyZoom. Too many issues with it. 483 kb seems more reasonable for the front page, I forgot about the webfonts when I did my quick calculation and they're about 48k a piece. Still too heavy for dial-ups of course, but then dial-ups aren't at the forefront (sorry Phil).
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Introducing the new Inkpattern Magazine site
« Reply #16 on: September 28, 2009, 07:47:42 AM »

650 kb needs to be loaded. :o

what?!
/*Checks sizes*/
Shouldn't be more than around 350 kb on first load (front page). I'll be removing FancyZoom though which will cut weight with about 1/3. If that's any help?
Well, YSlow is giving me:
HTTP Requests - 44
Total Weight - 657.7K
 
   1   HTML/Text   11.5K
 
   10   JavaScript File   158.2K
 
   4   Stylesheet File   34.5K
 
   10   CSS Image   359.5K
 
   18   Image   93.3K
 
   1   Favicon   0.5K

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Introducing the new Inkpattern Magazine site
« Reply #17 on: October 03, 2009, 09:56:58 AM »

Hey Fred.
When visiting your online magzine I saw you were using JQuery.
So to Ajaxify my HTML5 playground blog, I'm going to use it too.
To open links in a new window and still being valid @ the W3C Markup Validation Service  you're using external.js too.
I did the same when I didn't have JQuery, but I've found this script which automatically:
- add an icon to all external link (and more...)
- open the link in a new window
Then I add to this script, a short line to have the title too.
Which gives:
Code: [Select]
<script>
$(document).ready(function() {
// Add pdf icons to pdf links
$("a[href$='.pdf']").addClass("pdf");
 
// Add txt icons to document links (doc, rtf, txt)
$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
// Add zip icons to Zip file links (zip, rar)
$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
 
// Add email icons to email links
$("a[href^='mailto:']").addClass("email");
 
//Add external link icon to external links -
$('a').filter(function() {
//Compare the anchor tag's host name with location's host name
    return this.hostname && this.hostname !== location.hostname;
  }).addClass("external");
//You might also want to set the _target attribute to blank

$('a').filter(function() {
//Compare the anchor tag's host name with location's host name
    return this.hostname && this.hostname !== location.hostname;
  }).addClass("external").attr("target", "_blank").attr("title", "Le lien s'ouvrira dans un nouvel onglet");
});
</script>
It works on my local site.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #18 on: October 03, 2009, 01:05:22 PM »

Nice addition and useful if you have a number of different type of things you link to. Thx for sharing, Philippe. I'm looking forward to seeing your HTML 5 playground.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #19 on: April 06, 2010, 04:06:23 AM »

Thought I'd never get it done, due to life and other circumstances, but the second issue of Inkpattern is now online. The PDF version is coming in a few days. Unfortunately I changed so much of the original CSS that the first issue's cover page is screwed up at the moment. It'll get fixed by and by, but it's also less important. The most recent stuff is always more important.

As before, the site works best in Webkit-based browsers (Safari, Chrome etc), fairly well in Firefox (3.6 and up) and Opera 10 although there are minor niggles there, and maybe in IE but I haven't tested that. I also haven't tested for other niche browsers but if they are relatively new and relatively standards compliant it should work. Same goes for iPod/iPhone/iPad and other Webkit-based handheld browsers.

Feel free to try it out and let me know if anything looks disturbingly odd, I'll try fix it if I can. Thanks.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Introducing the new Inkpattern Magazine site
« Reply #20 on: April 06, 2010, 10:14:40 AM »

(...) maybe in IE but I haven't tested that.(...)

Feel free to try it out and let me know if anything looks disturbingly odd, I'll try fix it if I can. Thanks.
Screen capture has just been sent by airmail.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #21 on: April 06, 2010, 02:36:34 PM »

Thanks for the screen Philippe. I think I understand why that's happening, seems IE8 doesn't like inline-block. Or images with height:auto. Or... ;)

Let's hope for IE9, shall we? (I was expecting IE8 to do better, honestly, but apparently there are enough things it doesn't fully support for the site to look crappy in it. Also I haven't included any X-UA string for IE8 compatability. May have to rethink that.) But I'll reiterate: standards compliant browsers should generally render the site correctly, with variances depending on amount of HTML5/CSS3 support. Just for everyone's info.

Oh, and did you notice that you can now choose whether to have (most) articles as one- or two-column layout? It even remembers the setting. ;)
« Last Edit: April 06, 2010, 02:43:05 PM by Fred K (agentsmith) »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Introducing the new Inkpattern Magazine site
« Reply #22 on: April 06, 2010, 04:20:55 PM »

Oh, and did you notice that you can now choose whether to have (most) articles as one- or two-column layout? It even remembers the setting. ;)
Not at all (as I was a bit in a hurry I just went there with IE)
and now  :o !!!
Giant! What's the recipe?

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Introducing the new Inkpattern Magazine site
« Reply #23 on: April 06, 2010, 05:36:19 PM »

Nice Cat image Fred... though at 1.5 MB is does take a few seconds to load the page on my machine.  8)
Overall, a very nice template!

I'm viewing in IE7 and the latest FFox 3.5.8 and notice some minor bugs in both.

In IE7:
- Search-bar is crammed up against the right-side of last "N" in "INKPATTERN" (in the header) and rounded cornres are not applying.
- Under "INKPATTERN", Issue 2, April 2010 · PDF: €4.99 (section id="dateline")  and  Design, Technology + The Human Condition (section class="caps right") are stepped (not on the same horizontal plane); the baseline of the latter is about 24px lower than that of the former (even though the latter seems nested within the former).
- Right side-bar article leads - Title font size for each is increased, perhaps by 6 px or so, causing "THE 101 BEST" to break into 2 lines after "101" and the 2nd line "BEST" not having enough lead above it to clear "THE 101".
- Hover state - on "Kitten rulez, prrr" shows as white (not sure if should be grey or white).
- The collapsable Sitemap panel above the footer (and all else seems to) works OK in IE7.

In FFox 3.5.8:
- Under "INKPATTERN", Issue 2, April 2010 · PDF: €4.99 (section id="dateline") and  Design, Technology + The Human Condition (section class="caps right") are on the same horizontal plane (OK) but they are both about 80px or so below the baseline of INKPATTERN... maybe the search-bar (section id="search") is affecting it.
- Hover state - on "Kitten rulez, prrr" shows as grey (not sure if should be grey or white).

Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #24 on: April 06, 2010, 05:50:24 PM »

Thanks Doug. IE7 isn't supported though so it is what it is. I'll add a X-UA compatability string soon, which may or may not fix some things but that's about it. Not sure where you're getting the 1.5 mb for the cover image though, it's only 153 KB. ? Odd. It is optimized up the wazoo...

Firefox 3.6 doesn't show the positioning of the dateline that you see (about 80px below the nameplate), in fact it looks almost exactly the same as in Safari 4 and Chrome, just a slight difference in position towards the right edge. Wondering if it's the combination of line-height and margin that causes that. I'll have a look. Thanks.

The hover state on Kitteh Rulez is indeed a blueish grey (actually it's white with some transparency through the rgba model so systems/browsers with no rgba support will see white) so that's as it should be.
« Last Edit: April 06, 2010, 05:59:01 PM by Fred K (agentsmith) »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Introducing the new Inkpattern Magazine site
« Reply #25 on: April 06, 2010, 06:06:06 PM »

Giant! What's the recipe?

Very simple, a Simple Styleswitcher for jQuery. Two stylesheets, one for each setting. Even plays nice with Shadowbox. I had a different switcher in mind originally but it caused a conflict with Shadowbox I couldn't solve. Which reminds me, have to change every clickable image to open in shadowbox... oy.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Introducing the new Inkpattern Magazine site
« Reply #26 on: April 07, 2010, 12:19:00 PM »

Thanks for the reply Fred. It's brilliant.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Design overhaul and Web Font Awards feature
« Reply #27 on: October 21, 2010, 04:56:16 PM »

The mag has had a major overhaul, both code and designwise. If anyone wants to take a renewed look, go to http://inkpattern.com/ - I think it's beautiful. Jus a heads up though, it's fully HTML5'ed and uses a lot of CSS3 stuff so it may not work perfectly in older browsers, including IE6-8. Safari, Chrome, Firefox and Opera of newer models is fine though (except Opera which still has a number of HTML5 and CSS3 things to catch up with....)

The magazine is also featured on Web Font Awards!! - check it out at http://www.webfontawards.com/gallery/inkpattern-magazine
;)
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Design overhaul and Web Font Awards feature
« Reply #28 on: October 21, 2010, 05:57:19 PM »

Bravo Monsieur Fred.
I’ve voted thumbs up.

One thing: I have an issue (with Chrome 7 and Opera)...
section id="catalogue" is displayed behind the title <h1 class="bebas"> so it can’t be seen. ???

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Design overhaul and Web Font Awards feature
« Reply #29 on: October 21, 2010, 07:00:04 PM »

The magazine is also featured on Web Font Awards!! - check it out at http://www.webfontawards.com/gallery/inkpattern-magazine

Nice work there Fred... an excellent result.  8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU
Pages: 1 [2] 3