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?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jfmacdonald’s picture

Assigned: Unassigned » jfmacdonald
jhodgdon’s picture

Issue summary: View changes
jfmacdonald’s picture

Version: » 8.x-0.x-dev

I 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.

michaellenahan’s picture

@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 :)

jhodgdon’s picture

What 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.

jhodgdon’s picture

@jfmacdonald - do you still plan to work on this? Thanks!

jhodgdon’s picture

Assigned: jfmacdonald » Unassigned

I'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!

batigolix’s picture

Jennifer, 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??

jhodgdon’s picture

I 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.

batigolix’s picture

I dont want to write it, so if you can. Please.

jhodgdon’s picture

Assigned: Unassigned » jhodgdon

OK, I'll do this one.

jhodgdon’s picture

Later this week...

jhodgdon’s picture

Status: Active » Needs review
FileSize
2.49 KB

How's this?

jhodgdon’s picture

Issue summary: View changes

Attribution added.

jfmacdonald’s picture

Sorry 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:

  • While it may be tempting to plan the layout by adding draft content into an existing Drupal theme, doing so will constrain the design and may not produce the best result. Having a layout plan first will help guide subsequent theme selection or building.
  • Starting with the mobile sketch will help see what is most important.
  • A plan is just a plan and may need to be revisited after feedback from stakeholders and an assessment of implementation costs. Drupal excels in its flexibility, but some things will be easier to do than others.
jhodgdon’s picture

FileSize
3.02 KB
1.82 KB

Thanks 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?

jhodgdon’s picture

  • eojthebrave committed b34abbc on 8.x-0.x
    Issue #2541604 by jhodgdon, jfmacdonald: Write planning-layout.txt
    
eojthebrave’s picture

Status: Needs review » Fixed

Looks good to me. Thanks @jhodgdon and @jfmacdonald.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.