Workflow Processs

Hello Everyone,

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.

Many thanks!!!

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!!! :slight_smile:

Hope this helps…

8 Likes

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!

1 Like

You’re welcome! Happy to help! :slight_smile:

@FlaminFig
That’s exactly my workflow. You have to do a little math with the font sizes, that all devices look good.

I can live with this and i do not need the extra wide screens.

Mr. F.

3 Likes

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.

4 Likes

Thank you @selcuk. Brilliant! I’m not up to the blog pages yet so I’ll do as you suggest. Perfect.

1 Like

Hi @FlaminFig .

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.

What are your experiences?

Mr. F.

@Mr_Fozzie ,

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.

1 Like

Hello Mr. Oehlschlaeger.

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.

Mr. F.

2 Likes

That’s my workflow right there.
-w

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! :slight_smile:

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! :slight_smile: This is also a far better way to present my templates to clients - less work for them to change and update things…

2 Likes

Hello @FlaminFig

This is exactly the challenge when layouts are set to auto-fit.

I’m even considering going a step further and making the 1200 layout a 1366 as displayed in Safari in response mode. Will test it.

And I’m considering changing the number of columns:
1366px: 5 columns
768px: 3 columns
320px: 1 column

That will increase the amount of work. But maybe it’s worth the effort.

Mr. F.

1 Like

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!!! :slight_smile:

2 Likes

Hello @FlaminFig

Of course not. The fact that there are once five columns and once only three, could have brought you to the solution :bulb:

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.

Mr. F.

1 Like

Hello.

After some testing and adding various Sparkle features (search, blog for example) I have to say that the experiment failed.

A layout with 1366 px is definitely too wide and makes the readability of a page enormously difficult (my opinion).

I go back again, better said stay with my previous solution with 1200 auto, 960 custom, 768 auto.

Also, the blog does not seem to be suitable for this screen width. For this screenshots in another topic.

Mr. F.

1 Like

After a lot of experiments, this is my favorite workflow:

1920: Not Present

1200: Custom Layout, change device size to 1120, 4 columns, 30 px gutter, text size 20

960: Automatically Scaled

768: Custom Layout, 2 columns, 30 px gutter, text size 20

480: Not Present

320: Custom Layout, 2 columns, 30 px gutter, text size 16, Mobile auto-scaling enabled

2 Likes