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

[Russ]

Upgrade from an existing site, so XHTML Strict not HTML5 for a change

Mobile first, responsive design, try resizing your browser.
Async JS for Twitter and Google, no EU cookie warning stuff yet, just looking at the best way to implement this.

It's mostly done with Products, plus the standard modules and CGFeedMaker, CGSimpleSmarty, CGExtensions, DownCnt and SiteMapMadeSimple

http://ajhall.shoesforindustry.net/

Caveats, only text support for IE6 and minimal mobile style support for IE7 (they get no traffic from these browsers and they are dying, so little effort expended). We had too keep the design simple so as not to detract from the varying colours and styles of the book covers. Client wanted a slightly retro old school vibe.

Because someone is bound to ask, the Javascript used for the Maps and Plans and the Coats of Arms is mostly http://www.photoswipe.com/ in modern browsers and mobile devices and http://www.shadowbox-js.com/ for IE7.

Comments and suggestions always appreciated, I know we could speed up a few things and probably get stuff a bit slicker but it was a labour of love for a friend so... enjoy

[joecannes]

nice site!

Question, How are you switching the navigation from a list to a dropdown in a mobile view? Using jquery or css?


Thanks,

JC

[Russ]

Thank you very much for your kind comments JC, it is always a standard CMSMS menu, but we add a few buttons or rather un-hide a few buttons on smaller screens and use them to open the dropdowns.

The drop down stuff itself and the un-hiding is done with JS and CSS - so a bit of both I guess. You could put the buttons into the page with JS, but we found this had a lag and there seemed no point as most modern smartphones used to access websites will have the necessary support. Actually even if they don't it is designed so the menus just show opened.

The width (em's) in responsive CSS decides when to switch.

Hope this helps? Let me know if you need anymore help.

Russ

[Russ]

Thank you to the CMSMS team for the making us "Editor Pick for best new CMS Made Simple site", we are honored and extremely pleased especially as this particular site has been a not-for-profit labour of love.

For those who don't get the newsletter you should as it has plenty of great information:

"This issue's Editor Pick for "best new CMS Made Simple site" goes to the UK design firm, shoes for industry, for the e-book site they designed for a client which can be viewed here....

This site is a fine example of how mobile-friendly, responsive design can be implemented in CMS Made Simple. This site relies on the Products module for its primary functionality ..."


Thank you again, we look forward to CMSMS 1.11 with great anticipation...

shoes for industry team & A.J. Hall

[Russ]

Also somebody asked if we used a CSS framework or template for AJ's website, the answer is no not really, but it is loosely based on Joni's splendid Golden Grid System.

This is a sort of 'em grid' based around the border-box box sizing. It is not really a grid or a framework, but if you use the Less/Sass versions from the github it is a good starting point.

The bit I really like is the zooming (in Firefox - broken in webkit) allows the site to expand down to a mobile size. Try it out, after about 3-4 'zoom-ins' in it changes to the mobile version and keeps expanding properly - neat.

[Russ]

Somebody also requested some screen shots, we've only shown the portrait ones here to save some space. Images from Responsinator

[Russ]

Images from Responsinator

[Russ]

Images from Responsinator

[Russ]

Images from Responsinator

[Russ]

Images from Responsinator

[Russ]

It's a fluid design, so we are are only going to show one big screen HDTV size 1920px. Images from Responsinator

[applejack]

I am yet to convinced of the need to add extra code for so called mobile devices as you can already generally see websites ok and with the ability to zoom in etc I don't see much advantage and especially having a client pay for all the extra work involved. This is in addition to the added complexity with retina displays.

I am interested in hearing reasons as to why I should be.

P.S. I do appreciate that this might differ as to the target market.

P.P.S. I'll bet that the girl on the phone on your website is not your receptionist... !!!!

[Russ]

Hi applejack, thank you for your interesting comments. As I'm sure your appreciate, it is not just a question of mobile devices, we feel content should try and fit its surroundings. You do not know what devices your site will be viewed on, you only know the content and how it should work. This will of course change based on how and when and where it is being used.

Designing in our view is about solving these problems and we have taken the approach outlined above. It is not the only approach and you certainly don't have to-do it if you feel it is not for you, but just maybe it is what your clients and users may expect? Ask them?

Design for 'content out' seems to us to be the only currently realistic option. A fluid responsive 'mobile first' site where the breaks in the responsive CSS come not from screen sizes but from the content. We think that when you have thought out the design, it is perhaps easier todo it this way than any other and at the moment it is maybe the best we can do?

What your clients want and what they will pay for is between you and your clients. But we have found there are plenty of good tools available like Less and that it really is not that much extra work and our clients just love it. (We are just starting work on a couple more responsive websites more which should be finished towards the end of the summer which are more graphically orientated - hopefully in CMSMS 1.11 - should be fun!)

As for retina displays, with the new MacBook Pro's you can now worry about this for desktops to! Do you feed them absolutely huge images or not? Will they be viewing on a fast network on on a 3G link? Do you try SVG, or Font based icons? Certainly HTML5 is not really equipped to deal with this yet, but it maybe in the future, it is all a matter of choices and that is what design is all about?

Does this help in anyway applejack?


p.p.s. As for our receptionist, you'd be right or would you? Try out our Skype answering machine message, unless of course someone answers the phone...

[applejack]

Hi Russ

Thanks for the reply. I think it depends on what the site is and who the target audience is. I recently did an e-commerece site selling photo prints on canvas as well as other media and I really can't see anyone buying a picture after only having looked at it on a small screen device.

It also depends on how large a site is. It is ok to do for small sites but for large sites with lots of sub menus the way to navigate becomes a bit of an issue.

And sure now with retina display Mac's coming out that becomes another issue.

P.S. I am so disappointed with the announcements or lack of from Apple yesterday as I am in the market for a new iMac and it seems like they don't care about the Pro community much these days as the update to the Mac Pro used a 2 year old chip amongst other things such as lack of usb3 and thunderbolt.

[Russ]

Hi applejack, I can only agree with you that your design will be based on clients, audience, content and of course money

However, I don't think you can assume people do not want to do stuff with your site on a 'non-desktop device' or indeed assume people will have desktops. The way we consume the web is changing, in fact may have already changed:
- Data Monday: Mind Blowing iPad Stats

I still think you can do responsive design on larger sites, true big menus can become problematic, but there are ways around this it just needs more thought. Check out Smashing Book #3+1/3: Redesign The Web for some good ideas. (No affiliation.)

Google also has some good stuff:
- Recommendation to webmasters for supporting multiple devices

But, for an alternative point of view, this may also be of interest, a bit flawed I think and maybe just for provocation, but it is worth reading all the comments:
- 5 Reasons Why Responsive Design Is Not Worth It

p.s. I agree, although I won't need a new iMac till probably next year and hopefully there might indeed be one a new iMac by then...