Default Site Template - Delayed Output - Mobile First?

[NooseLadder]

Hi,

Is the default site template (delayed output) a good starting place for mobile first layout design? Or would you recommend something else? How do you guys normally approach mobile first in 2020?

[rick]

Mobile first is a front-end concept. It really doesn't matter which back-end CMS you use to serve data. Obviously ProcessWire is the best solution. ? Personally, I prefer the blank profile to start most projects.

The responsive approach is in the name, mobile first. Start with whichever CSS you prefer (Bootstrap, etc.) and design from mobile upward. I find it easier to sketch the mobile interface on a whiteboard, then sketch at the additional breakpoints, noting the changes for each. A clear map up front will save you many headaches later.

It's all personal preference as to which CSS framework , profile, javascript library, etc. that you want to use.

[szabesz]

6 hours ago, NooseLadder said:

How do you guys normally approach mobile first in 2020?

 By using the best upcoming, still in the works but already pretty awesome front-end framework: https://www.gethalfmoon.com/docs/introduction/
? Anyway, I recommend Markup Regions.Docs and useful tips:

• https://processwire.com/docs/front-end/output/markup-regions/
• https://processwire.com/blog/posts/pw-3.0.70/ (Markup Region hints section)
• https://processwire.com/talk/topic/19025-friday-update/?tab=comments#comment-165581
• https://processwire.com/talk/topic/23641-markup-regions-pw-vs-data-pw-different-behavior/
• https://processwire.com/talk/topic/24031-helpful-tips-for-markup-regions-and-ids/

 

[NooseLadder]

On 9/25/2020 at 5:51 PM, rick said:

Mobile first is a front-end concept. It really doesn't matter which back-end CMS you use to serve data. Obviously ProcessWire is the best solution. ? Personally, I prefer the blank profile to start most projects.

The responsive approach is in the name, mobile first. Start with whichever CSS you prefer (Bootstrap, etc.) and design from mobile upward. I find it easier to sketch the mobile interface on a whiteboard, then sketch at the additional breakpoints, noting the changes for each. A clear map up front will save you many headaches later.

It's all personal preference as to which CSS framework , profile, javascript library, etc. that you want to use.

That's great advice thanks.

[NooseLadder]

On 9/25/2020 at 10:09 PM, szabesz said:

 By using the best upcoming, still in the works but already pretty awesome front-end framework: https://www.gethalfmoon.com/docs/introduction/
? Anyway, I recommend Markup Regions.Docs and useful tips:

• https://processwire.com/docs/front-end/output/markup-regions/
• https://processwire.com/blog/posts/pw-3.0.70/ (Markup Region hints section)
• https://processwire.com/talk/topic/19025-friday-update/?tab=comments#comment-165581
• https://processwire.com/talk/topic/23641-markup-regions-pw-vs-data-pw-different-behavior/
• https://processwire.com/talk/topic/24031-helpful-tips-for-markup-regions-and-ids/

 

Thanks for the info. I'll check it all out.

[JeevanisM]

On 9/25/2020 at 7:55 PM, NooseLadder said:

Hi,

Is the default site template (delayed output) a good starting place for mobile first layout design? Or would you recommend something else? How do you guys normally approach mobile first in 2020?

I think the delayed output has no effect in Mobile Responsive Design, it depends on the frontend tools used ( CSS  + JavaScript ). I use BootStrap for the design but there are many other CSS frameworks available and I use simple native javascript codes, again there are Vue.js , React or Angular. Pick tools suit with you ?