Skip to content
P.E.A.C.E.Small Business Center

Free, practical business education for our community.

Search
Home

ChatGPT & AI · Lovable

Pages, Branding, Images & Mobile

Make pages clear, recognizable, readable, and usable on a small screen.

Pages and navigation

A page has its own web address, such as Services or Contact. Navigation means links that help people move between pages. Use familiar names, keep the menu consistent, and make Home reachable. A section is part of a page, such as a list of services; it does not always need a separate page. Put the information customers need most near the beginning. Avoid adding pages just to make the site seem bigger.

Layout and readable words

Layout means where text, pictures, and controls sit. Give each page one clear main heading and group related details under smaller headings. Keep paragraphs short, use everyday words, and name actions honestly: 'Request a Quote' is different from 'Book Now.' A booking button implies an appointment can be reserved. Use good contrast — enough difference between letters and background — and do not place important text over a busy photo.

Keep the business recognizable

Branding means the visual and written choices people recognize as yours. Supply the real logo rather than asking AI to imitate it. Choose a small set of colors and readable fonts, and repeat them across pages. Give exact wording when the business name or purpose statement must stay unchanged. Ask the builder to preserve the logo's shape and proportions. Do not redesign every page separately.

Use images responsibly

Use photos you own or have permission to use. Check consent before posting recognizable people, especially children. Do not use AI-created pictures as evidence of real work, staff, customers, or events. Alt text is a short written description for someone who cannot see an image; for example, 'Cleaning supplies arranged beside a mop' describes a relevant photo. Decorative pictures can have empty alt text so they do not interrupt reading. Keep originals and use appropriately sized website copies so pages load reasonably.

What mobile responsiveness means

A responsive page adjusts its arrangement to fit different screens. On a phone, columns may stack, the menu may collapse, and images should shrink without cutting off important details. Check the actual phone, not only the builder's preview. Look for sideways scrolling, clipped business names, text hidden behind a menu, and buttons too small to tap comfortably. A long heading should wrap instead of covering the next section.

Check access beyond appearance

Try the page with the keyboard: use Tab to move between links and controls and Enter to activate a link. You should see where the focus is — the item currently selected — and be able to close menus without a mouse. Form fields need visible labels, not only faint hints inside a box. A picture of a button is not a working button. Ask for accessibility checks, then verify the parts you can test yourself; specialist review may still be needed.

Example prompts to copy and adapt

Replace [BRACKETS] with approved details. Use pretend information for practice, never passwords or customer records.

  • Phone and accessibility review

    Review [PAGE] on narrow phone and desktop screens. Fix clipped text, sideways scrolling, menu overlap, and difficult-to-tap links. Preserve approved copy, logo proportions, colors, and other pages. Check keyboard navigation, visible focus, descriptive image alt text, and readable contrast. Tell me what still needs manual review. Do not publish.

A real-world example

The cleaning-service menu reads well on a computer but covers the Contact heading on a phone. Fix the phone menu and test opening, closing, and choosing each link. Do not solve it by making all the text tiny.

Steps to take

  1. Read each heading and button label aloud.
  2. Check every menu item on a real phone.
  3. Tab through the page and check the focus is visible.
  4. Exercise: write alt text for one meaningful photo, then remove any claim a photo cannot truthfully support.

Page and phone check

This checklist is optional and not saved. Copy it to keep a personal note. Do not enter sensitive information.

Go deeper in related modules

Not sure what a word means? Check Business Words Made Simple.

Official provider guides

Independent resources, not P.E.A.C.E. partners or recommendations. Check current terms before buying.