I am in the midst of recreating my blog to take advantage of the wonderful Layout Blocks but now I’m wondering what my workflow should look like…
Every page I create in wide view, should I then create the mobile page? Or should I do the entire site first in wide view and then create the mobile view? Do I also need to make an iPad one too? Or is automatic good enough?
Any assistance you could provide would be truly appreciated! I want to make this as pain free a process as possible.
I might write up a blog post or something on this…
Automatically Scaled works a treat but the right text size needs to be worked out so that the text on the Automatically Scaled device is legible.
I’m experimenting with the following workflow…
Create my website on the 960 device
Automatically Scaled the 1200 desktop device (I find no need to work with the larger breakpoints for text legibility reasons)
Automatically Scaled the 768 Portrait
So the above takes care of my desktop and tablet.
I now introduce the 320 device and manually lay it out and also adjust the sizing of the text.
I have tried a number of varied ways but I think treating the desktop and tablet as one, and then adding mobile seems to reduce my workflow by a 3rd!!!
You are just marvellous as always! Thank you so much @FlaminFig. I need to be more efficient as I only have the evenings to work on my blog so this helps immensely. Thank you again!
If I’m going to work with more than one page of the same type (such as portfolio or blog pages), I first design it for widescreen and then edit the mobile version of that page. I also choose to auto-scaling screens between widescreen and mobile. Then I continue by duplicating this page. This way, I don’t have to set it up for mobile every time. This is my workflow.
Are you happy with the results from your new workflow? It’s what i have for my project as well.
I’m thinking of changing it to:
1200: customized
960: n/a
768: customized
480: n/a
320: customized
Well, that’s 50% more work (three layouts instead of two) but I have the security of knowing that the fonts will be a bit more consistent again and won’t be enlarged / reduced too much.
If I understand you correctly, you’re not auto-scaling at the 960 and 480 breakpoints. So, once the browser window drops below 1200, your page displays at your customized 768 layout. And once the browser window narrows to just below 768, your page displays at your customized 320 layout. Is that correct?
Wouldn’t you agree that setting your intermediate breakpoints to “auto-scaling” would be less jarring?
In the interest of saving oneself work, it seems the following workflow would be acceptable: customizing either a 960 or a 1200 for desktop, with autoscaling above and below, and then customizing 320 for phone, with autoscaling above.
You always have to find the balance between effort and functionality. At the moment I only edit 960 and 320. 1200 and 768 are automatic and 468 is not available.
The problem is the fonts with automatic adjustment: 1200 is increased by 1.25 and 768 is decreased to 0.8. So that one can still read reasonably on the tablet (768 layout) the font should become at least 14pt. This will be 22pt for the 1200 layout.
I would like to have a font size of 14pt to 16pt - without scaling. I am not dissatisfied with my workflow, but it could look a bit more elegant.
I think the 1200 layout comes into play more often than the 960, especially as PCs and laptops get bigger. For the tablet, 768 will do just fine.
The 480 layout for landscape smartphones can be neglected.
If I now only personalize 1200 and 768 and set 960 to auto, the 960 layout is generated from the 768 as this is closest to it. It is then enlarged again by a factor of 1.25. Then the font gets too big again, for my taste.
As you can see, one can discuss this very well without coming to a general solution.
I have played with a number of templates and client projects and I’ve come to the conclusion that combining desktop and tablet and manually laying out for mobile is the way to go!
I create my website on the 960 device…
auto scale 1200 (larger desktops)
auto scale 768 (tablets landscape and portrait)
custom layout the 320 device (now and again auto scaled for the bigger mobiles)
The trick is getting your 960 font styles and sizing right so it doesn’t look too big on the 1200 but doesn’t look to small on the 768, for the rest all looks great.
So in the end I’m focussing on desktop/tablet (combined) and mobile separately cutting my workflow down by a third! This is also a far better way to present my templates to clients - less work for them to change and update things…
So @Mr_Fozzie does that mean you’ll custom layout the 1366 and auto scale the 768?
I experimented with custom layout the 1200 and auto scaling the 768 and the jump is too big in keeping my text sizing under control. I had to make the 1200 text sizing overall to large to have it legible on the 768 so I’m thinking if you do likewise for the 1366 you might struggle or have enormous text sizing.
But in the end we all need to do the experimenting!!!
Of course not. The fact that there are once five columns and once only three, could have brought you to the solution
This is not possible with automatic adjustment.
But I will reduce the 1366 layout to 4 columns, that looks a bit better, I think.
I have a test running with these settings:
1366: custom
960: auto
768: custom
480: n/a
320: custom
The 960 will come from the 768 with an upscaling by 1.25. This is somewhat okay, as I think the large 1366 layout is in play more often.
Having read all posts my conclusion (after finishing some websites) is to set up all breakpoints/devices manually on all breakpoints because I was never satisfied how text scales up and down between devices - for my view on desktop screens (starting at iMac 27") body-text is 20pt or larger – on 960 body-text is 20pt as well, not larger and also on mobiles I use at least 18pt to 20pt, just because the screen is smaller does not mean eyes read different on smaller screens (sometimes autoscale to 4pt).
I also started with big devices first, just to find out that towards mobiles 320px, elements have to be moved and scaled up (text) a lot and so elements have to be rearranged accordingly very much and so the process is quite annoying sometimes. By starting from 320 the same happens the other way round and so I had to scale everything down very much towards larger devices. To start with 960 might be a solution but … - I prefer to go one way - never autoscale from large to small or small to large.
Coming from Muse (Adobe) I learned that one does not design pages/sites for devices but for resolutions and so you don’t create for iPad but for 960 or 768 - simply because of difference between vertical or horizontal view on tablets and how users have setup their device.
I wouldn’t use auto-scaling for the 320 device, period.
I have had no issues with the font sizing with my auto-scaled 768 and 1200 from the 960 device.
It is a matter of getting the sweet spot right on the 960, and if not further teak the font sizes in 960 so it looks legible on the 768, and not to big on the 1200…
