A.J. Hall ebooks (mobile first - responsive design)

[applejack]

Hi Russ

Thanks for all the info. I wasn't including the iPad in my considerations but smaller screen devices. The iPad is large enough and scales existing sites well enough not to have to code separately for it. However I do agree that you have to take it into account for compatibility such as touch effects instead of hover etc. It would of course be a good idea to use responsive design where appropriate.

Re: Mac I just bought a refurbished Mac Book Pro quad core i7 for a £500 discount which I will put a SSD in it and replace the optical with a large 7200 rpm drive as I also read that Apple may not release new iMacs until next year.

[Russ]

We have now implemented the required EU cookie advisory on A.J. Hall's website. Basically we just followed the BBC website idea of "we assume it is all OK but here is a button and a link to further information about our use of cookies and how to disable them." We think the link to the explanation is the important bit.

Since we were already using jQuery on this site we used CookieCutter in our combined JavaScript which only adds a few KB and you can have separate config files for your different sites.

Now before you ask, I know we could have implemented blocking Twitter tracking and Google Analytics using this script, but felt it more important to educate users and show them how to set up stuff, perhaps globally, for all their browsing

[carasmo]

foresight.js handles retina -- it serves up the large image for retina devices but it checks the user's connection speed to see if they can handle it, if not it serves up the 1 megapixel image

adaptive images by matt willcox checks for retina and serves it up or creates one, I have a request in to him about adding a speed test to see if the retina device is on a fast connection.

Most of the crappy images on retina are icons and logos and anything with text in them, background image replacement works for this.

Many people are using mobile devices for web these days:
http://snaphop.com/2012-mobile-marketing-statistics/

11% for browsing. That's 8% more than ie 7
http://www.w3schools.com/browsers/browsers_explorer.asp

Responsive design is the way to go.


Edit: read that 11% incorrectly. 11% of 835 million smartphone users, 5.6 billion feature phone users, still a lot of people.

One More:

http://www.smartinsights.com/mobile-mar ... tatistics/

[Russ]

carasmo that is a good point on high res images, this will try and ensure users get the best image, given the network connection and their display, but I'd be inclined to be more worried about too big images on smaller screens. e.g. are serving the same size photo to a HDTV and a phone and just scaling it in CSS?

For this, CMSMS may have some ready-made solutions (maybe CGSmartImage) or you can find others on the web like Adaptive Images.

You could also consider SVG or custom fonts for logo and other non-photo images?

I agree, it is harder to do, but responsive seems to be best way to go at present.

[applejack]

Here is a list of different processors for adaptive images.

https://docs.google.com/spreadsheet/ccc ... 2OXc#gid=0

It also of course helps if you crunch the file size of your images anyhow. I use ImageOptim on a Mac which can reduce the file size of jpegs by 70% at times with no visible difference.

[carasmo]

Handy! Thanks. I like adaptive images a lot and use it all the time. It doesn't interfere with CMSMS and with CGSmartImage, which also has detection for devices, but I turn that option off.