Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
mobile first paperconservation.co.nz
Here is my latest website production, paperconservation.co.nz. It’s obviously simple, just the one page, but it is the first website that I’ve designed that starts specifically for the small screen, and also works for the desktop.
There’s been plenty of learning here for someone self taught in web design and coding, getting the coloured boxes sorted for a start, and also the small screen stuff. Here’s a clue for the colours, you have to have three levels of containers to get that look.
Obviously there has been a major design shift needed with 50% of web page views now on them small screens — you don’t have much territory to play with, so: simplify, and you can’t have major bandwidth requirements, ie, no big slow loading slideshows.
I managed to use 480px wide thumbnails for the cell phone screen, and some clarity through the use of colour which links each section visually together. I guess I could have had each coloured section unfolding but there’s not all that much information there. If people are interested I’m thinking they will scroll.
My major plugin was the ever useful adi_mobile. There’s just two screen sizes, up to 480px, which covers all phones up to the iPhone 6+, and anything bigger than that whether a tablet, laptop or desktop.
One of the most useful things when designing the site was the new Google developer tools in Chrome, don’t know how long they have been around but it helps to simulate what you will see on just about any screen. And easily test changing the CSS and seeing how it will look on that particular screen in real time.
Offline
Re: mobile first paperconservation.co.nz
Finally sorted that little problem with the CSS, lucky I have a backup and could revert to a stable version.
Offline
#3 2015-06-03 04:52:09
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: mobile first paperconservation.co.nz
Only two brief comments before I go to sleep:
You should set a max-width acording to the main image width.
On a small screen, maybe smaller than 480px, it would be better with only one column, so that the titles are above the parragraphs.
Offline
Re: mobile first paperconservation.co.nz
GugUser wrote #291264:
You should set a max-width according to the main image width.
Yeah, thanks. I had that, then reverted to an earlier CSS style sheet. Makes good sense.
On a small screen, maybe smaller than 480px, it would be better with only one column, so that the titles are above the paragraphs.
It actually has a slightly different configuration smaller than 480px on a mobile, in one column as you suggested, and the text comes off her face.
Offline
Re: mobile first paperconservation.co.nz
Nice and simple site!
On a small screen, maybe smaller than 480px, it would be better with only one column
It actually has a slightly different configuration smaller than 480px on a mobile
Yes, I wondered about that too. Why is it that it shows using the google devtools phone view but not when resizing the browser normally? I thought initially that you’re serving different css to mobiles using adi_mobile but it looks like you do have the same css for both with a normal media-query section in the css.
It certainly looks better when the layout stacks.
TXP Builders – finely-crafted code, design and txp
Offline
Re: mobile first paperconservation.co.nz
jakob wrote #291268:
It certainly looks better when the layout stacks.
I still have that to do on my list along with a few other things that bug me. I’ve actually created this all on my laptop while I’ve been travelling around New Zealand. Back home tomorrow to a couple of decent screens and some solitude so I can concentrate.
There’s an issue with those horrible Facebook icons not showing correctly at the bottom on a phone.
And Safari destroys Google fonts, ie, the Oswald H1. And the div widths that otherwise appears normal in Chrome.
And I’m going to add some image texture to those vast areas of colour in the left hand column.
Yeah, I guess you can say that these things are never finished.
Offline
Re: mobile first paperconservation.co.nz
Regarding the main photo, heading, slogan and introduction at the top, which can draw people in or make them leave. Looks good at widescreen where the heading and slogan don’t overlap her face but, imho, looks poor narrower than that. For example, at 768 wide, the centred introduction looks very tacky. The rest of it looks good but I agree with GugUser about single column on narrower screens. Hope that helps, I’m just an amateur myself.
Offline