Can I create this theme layout in WP?

  • Hi,
    I’m wondering if I can make the theme layout (see link) in WP. The left column (navigation) will be fixed width and fixed position. I want to make this theme as a responsive / mobile first design.
    I spent a good amount of time searching the WP-themes, but I didn’t find any that fit my needs. So I’ll try and write my own theme.

    Main issue for me at this point is how to implement the two columns. Do I float them both to the left? Do I float them both to the right so that the content gets loaded first? Or do I make the right column 100% width with a large left padding and place the left column over that left area?

    I know how to get the menu for the mobile version and how to change menu’s at a certain breakpoint.

    Any advice or tips are welcome.

    • This topic was modified 4 years, 8 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • It should not be difficult to try each option and see which one you like best.

    Enjoy experimenting ??

    I want to design it based on the element hello theme, but do I need the shortcode where can I place them?

    The left column (navigation) will be fixed width and fixed position. I want to make this theme as a responsive / mobile first design.

    These two statements don’t go together, since mobile devices handle fixed position differently than others.
    If you are doing mobile first design, you need to draw what it will look like on mobile. Do you really want the menu or logo hidden by default on mobile? Do you want any sidebars, which are very handy places for dynamic links (like latest posts or newsletter signup or a news feed or…)?

    Thread Starter berttervoert

    (@berttervoert)

    How right you are! I forgot to add the layout image for the mobile version. You’ll find it at the bottom of this reaction.

    The logo / menu (hamburger) row sits on top of the mobile screen. Clicking on the hamburger icon unfolds the menu. The entire layout for mobile is one column, not two.

    I’ve been working on another theme for myself with a horizontal navbar on larger devices which changes in a mobile navbar below a certain width of the screen. Now I want to get into mobile first, but as you have noticed, my thinking still leans towards computer / laptop first.

    The layout for mobile:
    https://www.dropbox.com/s/4gvaypucv941qeo/mobile%20layout.png?dl=0

    Things to consider:
    – to be accessible, the order of elements needs to match (between what is shown and what the real order is); this means don’t use CSS to change the order.
    – skip to content links are good for accessibility, so keyboard users can avoid tabbing through the whole menu (this is required for themes in the WP repo)
    – sites without a sidebar can feel like a dead end (most people jump around to find exactly what they want)
    – where are you putting a search? (or other things most people put in a sidebar)
    – what do yo do if the menu is long? (scroll? wrap? on all devices?)
    – my personal opinion after reviewing hundreds of themes: don’t force the mobile menu on desktop users (use a small enough break point). “Mobile first” is just a catch phrase; it doesn’t actually make sense to do it. The design should be easy to use on all devices, not leaning one way or the other.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can I create this theme layout in WP?’ is closed to new replies.