Title: Planning your Site Layout
Section: Planning your Site
File name: planning-layout.txt
Covers:Prereq knowledge: Themes, Regions in a Theme. Talk about mobile vs. desktop, planning navigation, and making a sketch or wireframe of what the site will look like. End result: Layout for mobile and layout for desktop; main navigation plan; plan for what pages and blocks are needed without using the word "block" necessarily.
Attribution
See https://userguide_new-drupal.dev.devdrupal.org/guidelines/guidelines.htm...
Written by https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
Checklist for this phase
- Does it follow the template?
- Have the comments and placeholder text been removed from the template?
- Is everything the topic was supposed to cover included, and nothing extra?
- If there are @todo notes, are they clear?
- If there are images included, do they include instructions for how to redo them in a comment? (Note: Screenshots do not need to be perfect. Just make a rough cut.)
- Is attribution provided?
Comment | File | Size | Author |
---|---|---|---|
#16 | interdiff.txt | 1.82 KB | jhodgdon |
#16 | planning-layout.txt | 3.02 KB | jhodgdon |
Comments
Comment #1
jfmacdonald CreditAttribution: jfmacdonald as a volunteer commentedComment #2
jhodgdonComment #3
jfmacdonald CreditAttribution: jfmacdonald as a volunteer commentedI do not yet have a draft but have work in progress. Since planning a website's layout is a big topic (a design is first a plan) that can be approached in various ways, I'm posting my approach for comment. While detailed wireframes can be made without consideration for a Drupal (or any other) implementation, such are not likely to lead to either the best result or the lowest development cost. Rather than a step-by-step design tutorial, I see this as a sketch of a mobil-first design process that indicates where and how Drupal can or should be considered. I will show this with an example design for at least some of the Anytown Farmers Market website.
Comment #4
michaellenahan CreditAttribution: michaellenahan at erdfisch commented@jfmacdonald - a few comments. These are rough thoughts from someone who is very much a non-themer!
My assumption is that a site builder does not want to get *too* deeply into theming, so we should follow up on the Bartik example from https://userguide_new-drupal.dev.devdrupal.org/d8guide/en/planning-chapt...
"While detailed wireframes can be made ... [they] are not likely to lead to either the best result or the lowest development cost"
I agree with this. I think we could make a few points something along these lines:
- A theme such as Bartik can be used as a starting point for your layout.
- Bartik has breakpoints so can have a different appearance on mobile and desktop. (With screenshots of how both may appear once we have content in place.)
- Note how this impacts on the main-menu navigation.
I think we should also mention that Bartik is not the only way to theme Drupal, and point the reader to https://www.drupal.org/documentation/theme if they need more information.
My two cents. Hope it helps the discussion! This section is difficult, that's probably why it hasn't been written yet :)
Comment #5
jhodgdonWhat we're looking for in this topic is something fairly basic.... The idea is that for desktop, we'd have a sidebar block showing the hours/location (I guess this would fall to the bottom for mobile?), and for both desktop and mobile, the main navigation would get you to the vendors list page, the recipes list page, and the basic contact/home pages.
Right?
We shouldn't be talking about the Bartik theme in here at all... We just want to talk about planning navigation, blocks, regions (like a footer?) and the main page area, and what the pages of the site will be. We also don't need to tell what "regions" or "themes" are, since these are covered in other (prerequisite) topics. The idea here is to start with the plan for the site (see the Guiding Scenario topic -- that defines the site requirements), and show how those requirements lead you to ideas of what the nav and blocks should be. I don't think it needs to be very long.
Comment #6
jhodgdon@jfmacdonald - do you still plan to work on this? Thanks!
Comment #7
jhodgdonI'll go ahead and unassign this for now. jfmacdonald: If you still want to work on this, and plan to finish it within two weeks, go ahead and assign it to yourself again. Thanks!
Comment #8
batigolixJennifer, Joe: you have a particular d.o. docs page or external blog post or tutorial in mind that could serve as basis for this topic??
Comment #9
jhodgdonI don't have one in mind... this is probably new documentation to write. I could probably take it on if you don't want to write it.
Comment #10
batigolixI dont want to write it, so if you can. Please.
Comment #11
jhodgdonOK, I'll do this one.
Comment #12
jhodgdonLater this week...
Comment #13
jhodgdonHow's this?
Comment #14
jhodgdonAttribution added.
Comment #15
jfmacdonald CreditAttribution: jfmacdonald commentedSorry I left this one hanging. I got way too occupied the last few months, and I'm just catching up.
Jennifer, I like what you have. Short and sweet. A few points may be worth emphasizing:
Comment #16
jhodgdonThanks for the review! Great feedback. And no problem -- with volunteer projects like this, people do what they can. :)
So, here's a second version, which I think stresses the points you suggested a bit better. I've also included a diff file showing what I changed from the version in #15. Thoughts?
Comment #17
jhodgdonComment #19
eojthebraveLooks good to me. Thanks @jhodgdon and @jfmacdonald.