mobile first | nelsonbuildingreports.co.nz

detail · 2015-07-23 03:36:16

For some reason I thought it was about time to halt the outflowing tide in my bank account. Time for some paid work.

I’ve been somewhat quiet in the last six weeks, head down working on my latest website, the very static nelsonbuildingreports.co.nz.

It’s been designed to suit viewing on a phone primarily, although it looks OK on a desktop. There’s probably an awkward spot in the middle with a vertical iPad, 736px, that’s certainly too narrow for twin columns.

I used a free template from the range at html5up, my base is called Spectral, and modified it to suit. That probably saved me some time working out how to do new things, like the scrolly thing, the alternating images/text, and the sliding menu, etc. Spectral arrived with a huge amount of redundant CSS which I will attempt to eliminate. There’s a bit of optimisation work to do, actually a whole lot, but at least the main structure is there to fiddle around with.

I had a long hard think about how to present this new service, I think that on small screens you’ve got to be far more direct with what you say in the text, because your attention is more focused. It’s obviously verging on the narcissist end of the scale, it’s all about me, certainly has no corporate feel to it whatsoever, but I guess I am selling the personal service, showing the experience with the photos rather than telling. My friends who have seen it haven’t blinked so far, seems pretty normal in this day and age.

I put the major break point at 840px, ie, where the design changes from one column to two. It was pretty obvious that I needed the break around there because two columns started to look too narrow.

It’s all on one long page, the menu sends you elevator-style up and down, which gives it a fair page size, 3.39MB and a page load at 2.2s. There’s obviously some delays built in there as well with the js fades.

One thing for sure I learnt a whole lot about HTML5, seems that there is a heap of new stuff there which I’m only just starting to get my head around.

There may still be a few bugs there, so I would welcome your comments.

Thanks

etc · 2015-07-23 09:31:24

I’m not a big fan of templates, but have to admit your site is looking and feeling good. I would just load images lazily, we get ~5s load time here in Europe. And noscript menu version would be a plus.

bici · 2015-07-23 15:56:31

I like Templates. The more that can be made available the better. Templates can contribute to the success of Textpattern. To me they have a dual propose. 1) If they are well packaged for Textpattern (having forms pages sections , etc all properly documented) they become an invaluable way for first time users of Textpattern to get something up quickly and they get to understand how things work. and 2) A good template at a reasonable price which can be customized from a little bit to more involved customization would be most welcomed by some web developers.

Your example might have been a bit more generic. It almost seems more like a real valid current site. But perhaps you are working towards this.

PS the first image as you state is slow in loading. Also I am not sure of the value of having the title NELSON BUILDING REPORTS slide in so slowly. I think it should appear instantly.

Good work.

giz · 2015-07-23 19:47:58

Hey Graeme!

I like your site, and think your non-corporate approach is spot-on for the target market.

The centre-aligned titles bug me, particularly when they precede a single line of text copy…

If you’re looking to reduce initial page size, https://www.filamentgroup.com/lab/ajax-includes-modular-content.html combined with http://textpattern.org/plugins/1148/jdw_if_ajax can work well. In a nutshell, AjaxInclude.js allows you to load parts of the page asynchronously – mobile users can get a multi-page site, all fast loading, and larger devices get the all-in-one page.

detail · 2015-07-24 06:21:02

etc wrote #293631:

I would just load images lazily, we get ~5s load time here in Europe.

Yeah, I had a look at Lazy Load. It looks entirely useful, I certainly have to do something about all the images, there’s a fair wodge of them. I’m not too sure whether this would work on the fully responsive website due to this:

You must set image dimensions either as width and height attributes or in CSS. Otherwise plugin might not work properly.

I tried setting the image dimensions previously, just in the textpattern code, and ran into a problem of them being squashed. I will investigate, thanks for the idea.

detail · 2015-07-24 06:42:41

bici wrote #293634:

I like Templates.

I agree with this. As someone completely self taught I found the whole menu assembly code entirely useful, it would’ve taken me and another month to figure out how to do this otherwise. As it was I just had to alter the CSS to suit the colour and spacing that I had in mind. I also learned about the elevator menu concept as well.

Actually I’m amazed at how much code is given away for free there, he’s got about 50 different templates up, he’s put in an enormous amount of work on the design of those things. Looks like a plenty of others agree they are useful, not everyone who downloaded a template will have a website up but he has to have more than 1 million downloads in all. And that’s just one guy, I suppose.

I learned about the load order as well, that’s very useful for the phone situation. And the row reversal. Maybe I could have found a tutorial on the subject if I’ve known what I needed, in my case it was handy to have it all fully working right from the start.

PS the first image as you state is slow in loading. Also I am not sure of the value of having the title NELSON BUILDING REPORTS slide in so slowly. I think it should appear instantly.

I don’t think I would have ever attempted the transitions either unless I had them all assembled, ready to tinker with. In the end I will probably just delete all the transitions, but can’t I just have a play with it all to start with? It’s a lot of fun.

I think once I’ve fully resolved the site, with all the photos sorted, I’ll do some browser caching. That won’t help initially with the speed of the loading, but sure will whenever someone loads the site again.

detail · 2015-07-24 07:48:15

giz wrote #293643:

Thanks a lot Gary, taught by the best you know. I’ve come along a bit.

The centre-aligned titles bug me, particularly when they precede a single line of text copy…

Agreed. I still have some more text to go, I need just to contemplate it for another week, get the sales pitch right, etc. It’s obviously mostly good to be your own client, but if you stare too long at something on your own you miss your blindspots.

It’s amazing how time-consuming checking the CSS for each of the different screen sizes you may come across is. I was using the Chrome Development Tools this time to simulate various screens, thought I had it all right and someone mentioned that the site wasn’t looking very good on the iPhone 6. It seemed that I had forgotten to take into account the search band at the top, and the other band at the bottom and I had less space than I had anticipated. I still really have to do a final run through in each of the most common screen sizes, if that means anything these days and tweak all those em values . . .

iPhone 6+ 414
iPhone 6 375
iPhone 5 (5c, 5s) iPhone 4 (4, 4S) 320

Apple iPad Mini with Retina 768
Apple iPad Mini 768
Apple IPad 3 & 4 768
Apple iPad 1 & 2 768

etc.

If you’re looking to reduce initial page size, https://www.filamentgroup.com/lab/ajax-includes-modular-content.html combined with http://textpattern.org/plugins/1148/jdw_if_ajax can work well. In a nutshell, AjaxInclude.js allows you to load parts of the page asynchronously – mobile users can get a multi-page site, all fast loading, and larger devices get the all-in-one page.

I’ll definitely have a look at this as well.

One thing I will do is just serve up a 420px wide thumbnail for the 420 and less size screens. That cuts out three quarters of the loading anyway, the full-size images are 840.

There are a staggering 74 requests currently, surprisingly that’s around normal these days, there has to be a way to get rid of some of those, but a lot has got to do with that social media crap down the bottom. Minify the CSS. With a bit more work I should go to make it more snappy.

A work in progress.

detail · 2015-07-24 08:12:40

I’m still on a roll about these templates.

I’m surprised at how much work you can cut out if you find an acceptable framework.

I’ve found another bunch which show what is possible. You have to pay a few bucks for these, like $4.

Check out this fully responsive website at bootstrappremium.com

It might take a while to load for some reason.

jakob · 2015-07-24 09:06:43

There are a staggering 74 requests currently, surprisingly that’s around normal these days, there has to be a way to get rid of some of those

Part of that is a consequence of the single-page design because pretty much the entire site is presented at once – so you can’t do much about the large number of image requests, except:

You can optimise the images if you haven’t already (e.g. using ImageOptim /FileOptimizer – more infos and alternatives)
Serve them from a separate subdomain to allow them to load parallel to the rest of the requests (as discussed here and here, or
use lazy loading, either for images or page chunks as suggested above.

Server-side caching of txp output won’t help for the images, only the generated page source. What you could do to reduce the number of http requests is:

Add the few cases of svg icons directly into your css as described here. If you are not using many of the icons in the fontawesome icon set, you might want to make your own smaller icon font using „fontello“:http://fontello.com You can add your own separate svg-icons to that font as custom icons too, and then serve all icons through the font.
You have both mint and google analytics as tracking. Are both necessary?
Several of the javascript scripts (the standalone jquery plugin functions) could be concatenated into a single file and then minimised together. As this is a single-page site, there’s no use case for keeping them separate in order to only load certain scripts in particular sections of the site.
If you don’t need all the bells and whistles of the sharethis widget, make the bits you need yourself with txp. As you note, the latter is responsible for between a quarter and third of the page requests.

page templates

Although I practically never use them, I do see that website templates can be a big help either in getting started or as a springboard for a customised own version. The most successful of them offer lots of alternatives for getting started but that also has a downside: in many cases a lot of extra data is provided to cover all the proposed bases and feature sets, even though most sites only ever use a fraction of the possibilities. That makes it easier for web designers to get going, but the resulting sites are often bloated as a result. I’ve seen several templates that continue to load all manner of plugins, css and images despite those facilities not being used in the site.

detail · 2015-07-27 07:15:48

jakob wrote #293656:

Thanks for your help J, all very useful.

You can optimise the images if you haven’t already (e.g. using ImageOptim /FileOptimizer – more infos and alternatives)

That’s cut down on the size of images by about 11% each.

I also have used adi_mobile to serve the thumbnail (420 × 297px) instead of the full size image (840 × 594px) for small screens, ie, less than 420px wide. The iPhone6+ is 414px. My main image, 34.jpg, is 182k, 34t.jpg is 26k, ie, only 15% of the size. That’s probably the biggest single thing I could do for the mobile side of things.

Serve them from a separate subdomain to allow them to load parallel to the rest of the requests (as discussed here and here, or

I’m onto this. Just popping the images onto the subdomain, more than 50% of the load, maybe with the CSS and JS on another.

use lazy loading, either for images or page chunks as suggested above.

I’m a slow learner so it’s taking some time to get my head around.

Add the few cases of svg icons directly into your css as described here. If you are not using many of the icons in the fontawesome icon set, you might want to make your own smaller icon font using fontello You can add your own separate svg-icons to that font as custom icons too, and then serve all icons through the font.

Cutting down to the 4 icons I use rather than the 400 or whatever would be sensible. A handy trick.

You have both mint and google analytics as tracking. Are both necessary?

Mint is much more useful for me. Will ditch Google analytics I guess.

Several of the javascript scripts (the standalone jquery plugin functions) could be concatenated into a single file and then minimised together. As this is a single-page site, there’s no use case for keeping them separate in order to only load certain scripts in particular sections of the site.

Ha, the things you learn. Obvious once you know you can do that.

If you don’t need all the bells and whistles of the sharethis widget, make the bits you need yourself with txp. As you note, the latter is responsible for between a quarter and third of the page requests.

Yeah, maybe should just chuck that. It’s pure vanity after all.

You are right about the crap thats to be found in the CSS etc with the template.

font-awesome.min.css: 87% is not used by the current page.
css.php: 68% is not used by the current page.
bar.063710b50056a153b27845a5970365c7.css: 68% is not used by the current page.
buttons.4d4008011051a133a045fe92d3143ad4.css: 95% is not used by the current page.

Time for a spring clean, before minifying.

Haven’t so much time on it at present but should be able to crack it out in the next week.

Thanks again.

g

Textpattern CMS

Textpattern CMS support forum

#1 2015-07-23 03:36:16