Landing page

Sunny Sky's Animal Rescue

Someone who wants to adopt, someone who wants to volunteer, someone who wants to donate and someone checking the hours all arrive at once, and the Sunny Sky's Animal Rescue homepage made every one of them scroll to find out what they could do. I redesigned and built it in 2026 without being asked. Their story, photographs, links and details are theirs; the structure, the design and the code are mine. Press Show notes on the live page to see what changed in each section and why.

Open the live site Back to landing pages
Client
Sunny Sky's Animal Rescue, a 501(c)(3) in Graham, Washington (unsolicited concept, not commissioned)
My role
Design and front-end development
Year
2026
Format
One-page site
First screen of the Sunny Sky's concept: a photograph of a dog on a hay bale at sunset, the headline "Saying yes to the animals who need us most.", Meet adoptable pets and Donate buttons, and a line saying visits are by appointment only.
The first screen. Their own photograph and their own tagline. The appointment-only rule sits directly under the buttons, because the most common wasted trip is somebody driving out expecting to walk in.
  • Help in one tapAdopt, volunteer, donate and call are all reachable from the first screen
  • Nothing inventedTheir story, photographs, links and tax ID, with every sample pet card labeled as a sample
  • Scattered answers collectedThe questions spread across their site and flyers put in one accordion

About the project

A rescue homepage has four different visitors arriving at once: someone who wants to adopt, someone who wants to volunteer, someone who wants to give money, and someone checking whether they can visit today. On the existing site all four have to scroll the whole page to find out what they can do. So this version puts a strip of four actions immediately under the hero, and gives each one a real section further down.

The rest is about removing wasted trips and wasted emails. Visits are by appointment only and applications have to be approved first, so that rule appears in the hero, again at the top of the adoption steps, and again in the footer. The questions that are currently spread across their site and their flyers are collected into one accordion. Adoption fees are printed on the page.

This was not commissioned and I am not affiliated with Sunny Sky's. Everything factual on the page is theirs: the 2021 fire and the sanctuary they are building in Graham, their PayPal and wishlist links, their drop-off locations, their tax ID and the children's book one of their adopters wrote. The adoptable pets are sample cards showing the layout, labeled as samples on every card, because their real animals live on Petfinder.

Section by section

The page, top to bottom.

  1. Sunny Sky's hero: a photograph of a dog standing on a hay bale at sunset, the label A 501(c)(3) rescue in northwest Washington, the headline "Saying yes to the animals who need us most.", a paragraph, Meet adoptable pets and Donate buttons, and a note that visits are by appointment only. Below, a strip of four cards reading Adopt a pet, Volunteer, Donate and Call us.
    Header and heroTheir photograph, their tagline, and the two things most visitors came to do. The line under the buttons is the one that saves everyone time: by appointment only, no walk-ins, and where the meetings happen. The strip below gives the other two audiences somewhere to go immediately.
  2. Sunny Sky's story section: a photograph of a volunteer kneeling with a black dog, captioned Graham, Washington, our sanctuary still under construction, next to the heading "Rebuilding a home for animals who've lost theirs.", two paragraphs about the 2021 fire and the new sanctuary, and a Read our full story button.
    Our storyThe 2021 fire, the years displaced, and the sanctuary they are building now. It was hard to find on the original site, so it moves to a section near the top with their own photograph and a link to the full version.
  3. Sunny Sky's adopt section: the heading "Meet your new best friend", three numbered steps Apply first, Get approved and Meet and adopt, a line of adoption fees, filter chips reading All, Dogs, Cats and Seniors, six pet cards each with a photograph, a badge and a sample listing label, a note that the cards are samples and the real animals are on Petfinder, and four buttons.
    AdoptTheir adoption process as three numbered steps, with the approved-first and no-walk-ins rule in step one where it cannot be missed. Adoption fees are listed. The pet cards are filterable and every one carries a sample listing label, with a line underneath pointing to Petfinder for the real animals.
  4. Sunny Sky's volunteer section: a dark navy block with the heading "Love animals? We need you.", a paragraph, a Volunteer application button, a note that volunteers must be 18 or over with the address, and six areas listed as Kennel care cats and dogs, Farm animal care, Event organization, Repairs and maintenance, Application processing and Fundraising.
    VolunteerA rescue this size runs on volunteers, so it gets a full section. The six areas are the specific ones they need help with, taken from their own volunteer material, and the age requirement and the address are stated up front.
  5. Sunny Sky's donate section: the heading "Every dollar helps us say yes" with three cards, Give online with a PayPal button, Drop off donations listing two locations with a directions link, and Shop our wishlists linking to Amazon, Walmart and Chewy. Underneath, the 501(c)(3) status, tax ID and an email for donation receipts.
    Support the rescueEvery way of giving in one place: online through their PayPal, in person at their two drop-off points, or through their wishlists at three retailers. The 501(c)(3) line with the tax ID sits underneath, because donors going through an employer match need it and currently have to ask.
  6. Sunny Sky's book section: a light blue book cover mockup reading BLUE, A Story of a Dog's Best Friend and a True Heart, by Allan Mullen, with a strip across the bottom reading cover art not reproduced, next to the heading "Read BLUE, and help our animals." and a Find BLUE on Amazon button.
    The BLUE bookOne of their adopters wrote a children's book and gives them a share of the proceeds. The cover is a stand-in that says so, because the artwork belongs to the author and was not mine to recreate.
  7. Sunny Sky's FAQ: six collapsed questions reading Can I come visit and meet the animals, What does adopting cost, Where are you located, How do I apply, Can I volunteer and what are the requirements, and Are my donations tax deductible.
    Good to knowSix questions in an accordion. Every answer already existed somewhere on their site or their flyers; the work was collecting them. Visiting, cost, location, applying, volunteering and whether donations are deductible.
  8. Sunny Sky's events banner: a teal block reading "Come meet us at an adoption event" with a See upcoming events button. Below it a navy footer with adopt, get involved and contact columns, the 501(c)(3) line and the appointment-only note.
    Events and footerThey run adoption events and pop-ups through the year, and those live on their events page and Facebook, so a short banner points at both. The footer repeats the appointment rule one last time.

A second document at /process shows how the redesign was made: the brief, the reading order, the wireframe beside the finished build, the changes and the component system. The finished page runs live inside the document.

  • Two columns side by side: a gray wireframe of the page structure, and the finished page in full color running at 1240 pixels.
    The wireframe on the left and the finished page on the right, running live in the document at 1240 pixels.
  • A component system panel showing nine color swatches with their roles and hex values, a table of eight measured contrast ratios, and a type scale in six sizes set in Poppins and Figtree.
    The swatches and the contrast table are read out of the page stylesheet when the document is built. Navy on their yellow measures 9.09 to 1, so the button people use most is one of the strongest pairs on the page, while white on the teal measures 2.63.
  • A tablet frame and a phone frame showing the live page at 768 and 390 pixels, beside a table listing the three breakpoints at 1000, 900 and 600 pixels and what changes at each one.
    Both frames show the live page at its own width. The table lists the three breakpoints in the stylesheet.

On a phone

The page on a phone. Rescue traffic comes off Facebook, so most of it arrives here.

  • Sunny Sky's on a phone: the headline over the sunset photograph, two full-width buttons and the appointment-only note.
    The two buttons go full width and the appointment rule stays directly under them.
  • Sunny Sky's on a phone: the two figures, then the four action cards stacked, Adopt a pet, Volunteer, Donate and Call us, each with an icon and a line of description.
    The four actions stack into a tappable list at phone width.
  • Sunny Sky's on a phone: two adoptable pet cards, Daisy and Milo, each with a photograph, a badge, a sample listing label and a short description.
    Pet cards go one per row, and the sample listing label stays on every photograph.
  • Sunny Sky's on a phone: the donate heading and the Give online and Drop off donations cards stacked with their buttons.
    Giving options stack with their buttons intact, so no one has to pinch to find PayPal.

What went into it

Design

  • Their yellow and their logo stayed. The yellow is used for actions only, so every button on the page means the same thing.
  • Their own photographs carry the page. A rescue has better pictures than any stock library.
  • Four actions immediately under the hero, because a rescue homepage has four different visitors arriving at once and making all of them scroll costs the rescue money.
  • The appointment-only rule appears three times: in the hero, in the first adoption step and in the footer. Repetition here saves somebody a drive.
  • Every sample pet card is labeled as a sample, and the book cover says the artwork was not reproduced. Nothing on the page pretends to be something it is not.

Build

  • One HTML file, about 561 KB. Most of that is their photographs embedded directly in the file.
  • Hand-written CSS and JavaScript, no framework and no build step.
  • The pet cards filter on a data attribute, and the FAQ uses native details elements so it works before the JavaScript runs.
  • Reveal on scroll and four counting figures run on IntersectionObserver, and both switch off for anyone who prefers reduced motion.
  • Three breakpoints, 1000, 900 and 600 pixels. The layout stays fluid below 600, which matters because rescue traffic includes a lot of old phones.
  • The annotation layer is part of the file: a Show notes button reveals a note on every section explaining what changed. It is off by default. Deployed on Netlify.

Tools used

  • HTML & CSS
  • JavaScript
  • SVG
  • Google Fonts
  • Netlify
Live site Back to landing pages