Giter Club home page Giter Club logo

garden's Introduction

How to

Install Jekyll (once off)

Run the site locally for testing

  • Open a terminal in the garden repo and run bundle exec jekyll serve
  • Open a browser to http://localhost:4000/

Related example sites

Responsive images

| Tag | size | w | Description | | --- | ----- | ----------- | | xl | > 1200px | 1200w | Extra large desktop | | lg | 992px - 1200px | 900w | Large desktop | | md | 600 | 600w | Tablet | | sm | 300 | 300w | Mobile |

Rainbow

filename w
rainbow-hero.jpg 1200
rainbow-hero-lg.jpg 900
rainbow-hero-md.jpg 600
rainbow-hero-sm.jpg 300
<img 
  src="/images/{{ page.hero_image }}"
  srcset="images/{{ page.hero_image }}-sm.jpg 300w,
    images/{{ page.hero_image }}-md.jpg 900w,
    images/{{ page.hero_image }}-lg.jpg 900w,
    images/{{ page.hero_image }}-xl.jpg 1200w"
  sizes="(max-width: 640px) 100vw,
    (max-width: 960px) 80vw,
    60vw" 
  alt="{{ page.hero_alt }}">

How to

Collections pages - background image

Collections pages are the second level pages that contain a collection of items. For example, the Gardening page contains a collection of gardening services. The visual design of these pages is to have

  • an intro section with a heading and introductory text

  • followed by a list of items in the collection

  • underneath all of this is a background image

    The background image is optional. If not specified the page will default to a plain background.

For the image to work you need to

  • add a large and small version of the image into the images folder (at a point of your choosing) both saved as .jpg files
  • add the full path to the image (minus the .jpg extension) into the front matter of the relevant collection's markdown page

For example,

To do

General design

  • check the size of the content images

  • check the meta data for images

  • 1st level image re-design to be background

  • is there a better design for content images (including a caption)

  • "scrolling" page design

    2nd level pages, rather than a background banner image allow for the content to scroll over it.

    • make this change to all the 2nd level pages
  • Should/can 3rd level pages have background images? or images placed somewhere else on the page

    Play around with the mowing bird photo placed into the content to break it up, rather than as a background

  • 3rd level header design

    • Possible to include the name of the collection into the header/navigation for the items in the collection?
  • Decide on whether or not the business name should be used in content, rather than "we"

  • Make all the "contact us" (e.g. gardening services) into links to the contact page

  • Develop an internal links style for longer pages (perhaps programatically through Jekyll)

    • About
    • Project pages
  • Consider developing a table style

Home Page

  • "View all Design" add "services"
  • change headings for gardening and design to add services

Gardening

  • Mowing

    • Ensure the numbered list is a numbered list
    • add in photo
      • Is this the best photo (format wise) for this? Duplicate of gardening
  • Weeding

    • More content for the description sandy
    • Add the arrows back into the next/prev (probably due to the absence of font awesome) Need to look for a low weight way of adding in those icons
  • Tree care

    Remove mention of the business name

  • Holiday care

    Add in a design for "note"

Design

  • Not all services content written

  • Approach

    • Typo "WOrking closely with your"
  • Process

    • write intro
    • Need to remove the references to other sites (and stealing their content)
  • Options

    • Does this get rolled into "approach"
  • Example styles

    • Should this be earlier?

Projects

  • Duck Meadows

    • Accept the suggestion
    • the before image is missing
    • remove the "refs" at the bottom of the page??
  • Narelle's

    • re-write the intro
    • superscript with m^2
    • get images from Sandy

About

- [x] rewrite - remove business name
- [x] add links to web pages
- [x] not so much "full and"
- [ ] Move "locations and services" to other places? Perhaps implement as an include

    - Contact 
    - Design and gardening services (perhaps these each need to provide some detail)

Contact

  • update page design
  • Remove "site test" section

garden's People

Contributors

djplaner avatar

Watchers

 avatar

garden's Issues

Consider https

Your current DNS account doesn't include "https" (SSL) - read more. Even if you're not doing e-commerce, these days it's the default expectation.

Google search rankings can be affected by not enabling SSL.

It appears your provider expects more money for SSL. $200 a year. Not sure if that's the case.

I need to explore this more.

Edits, to dos, and suggestions

Each of the following comments will identify suggested changes/updates to the website.

Will use the following naming scheme

  • home page - for the home page
  • category (aka first level) pages - the pages linked to from the top menu (gardening, design, projects etc)
  • item (aka second level) pages - that pages contained within each category (e.g. each individual gardening or design service; different projects)

Problems for me to fix

  • on contact (and apparently all first level pages) page logo link stays on current page - not home page

Logo link not working on sub pages

Logo in top left hand corner intended to always return to home page.

On sub pages this doesn't work.

Current thoughts

The site.url or site.baseurl variables are not being correctly used or even available

Speed test

Current speedtest revealing

  • 72 speed for mobile
  • 77 for desktop

This is in the 'warning' stage. COuld be better.

Main problems/suggestion

  • serve imaegs in next-gen formats - the rainbow-hero image is 3.7Mb
  • the rainbow image is perhaps too large for mobile devices - solution serving responsive imaegs
  • removing use of font-awesome might save measly 31kb

To Do List

  • Google Analytics
  • Content for Website
  • Logo & Colour Scheme
  • #3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.