Publishing (HTML/CSS markup)

How are publishing, design and development different?

Design decides how the screens look, publishing turns that look into code a browser can read, and development builds features that store and process data, like bookings and payments. On a small website, one person often handles several of these stages.

Publishing mainly uses three languages. HTML is the skeleton of the content, like headings, text and photos; CSS handles styling, like color, size and layout; and JavaScript handles movement, like opening a menu or swiping through photos.

Publishing matters to you because what customers actually see is not the design draft but the published screen. With careful publishing, the same design draft becomes a website that's easier to read and faster on a phone.

An introduction website with no booking or payment can sometimes be finished with just design and publishing. If booking or payment is included, there's an extra step of connecting the developed features to the published screens, which makes the schedule longer.

How can I tell if the publishing was done well?

Publishing quality is less about matching the design draft and more about not falling apart across different screens and situations. Even when two screens look the same, how the code is written affects search visibility and speed.

These standards aren't visible at a glance, so they're hard to check yourself, but asking the agency "what standards did you check against?" is enough. You can also enter your address into PageSpeed Insights, a free tool from Google, and review the speed results together.

Web accessibility isn't only for customers with disabilities. A screen with enough color contrast between text and background and clearly labeled buttons is also easier for customers looking at their phone in bright sunlight and for older customers who enlarge their text.

• Headings and subheadings use real heading tags, so search engines and screen readers can understand the structure
• Text and photos don't overlap at any width: phone, tablet or computer
• Photo file sizes are reduced, so pages open quickly even on slow mobile data
• Buttons are big enough to tap with a finger
• Content isn't cut off when text is enlarged in the phone's settings

How should I write photo descriptions (alt text)?

A photo description (alt text) is a short sentence that conveys what's in a photo to someone who can't see it. It's read out when the photo fails to load, and to customers who listen to your website with a screen reader.

Writing "photo" or "Image1" tells people nothing. For a cafe menu photo, describe exactly what's in the picture, like "A slice of strawberry cream cake and an Americano."

Google also says alt is the most important attribute for giving it information about an image in image search. But stuffing in keywords actually hurts, so write a natural sentence that describes the photo. For meaningless images, like decorative patterns, it's correct to leave the description empty.

How do I check the published screens?

If you only look at the published result on one device, it's easy to miss problems. Following the steps below, you can find most problems in 10–15 minutes.

When you find a problem, send a screenshot along with which device and which screen it was on. Publishing problems often happen only on certain phone models or screen widths, so knowing the device name makes fixes much faster.

It helps to keep the design draft open next to the site while you check. Small differences caused by different screen widths are natural, though, so focus on places where information is missing or the order has changed.

1. 01Open the same screen on your phone and on a different model owned by family or staff.
2. 02Turn the phone sideways and see whether the layout breaks.
3. 03Increase the text size in your phone's settings and open the page again.
4. 04On a computer, slowly shrink the browser window and watch how the blocks stack.
5. 05Turn off Wi-Fi, open the site on mobile data, and see whether photos take too long to appear.
6. 06Tap every menu, button and phone number link once.

What problems often come up during publishing?

The most common problem is boxes overflowing when the short placeholder text in the design draft is replaced with the real, longer text. If a hair salon's service names or a craft studio's class descriptions are long, the lines wrap several times on a phone and the layout shifts.

Tables with many columns, like price lists or timetables, easily spill off the side of a phone screen and get cut off. Content like this may need a different layout on phones, such as showing it as cards.

On photo-heavy pages, like a craft studio's product details, loading photos only as they come close to the screen (lazy loading) makes the first screen faster. Ask the agency how they handle speed on pages with lots of photos.

• Large original photos uploaded as-is, so the first screen loads slowly
• A popup covers the whole phone screen, making the close button hard to find
• Heavy font files make text appear late
• Information shown on computers is missing on phones

What should I ask a web agency about publishing?

Publishing isn't something you need to choose yourself, but asking about their standards tells you what quality the agency is promising.

After launch, updates to phone operating systems or browsers can occasionally change how screens look. It's good to also confirm whether maintenance covers fixing this.

Also ask whether they fit phone screens within the same website using responsive design, or build a separate mobile-only version. With a separate version, you may need to edit content in both places.

• Which devices and browsers they test on
• Whether they reduce photo file sizes and check speed
• Whether they include search and accessibility basics like alt text and heading structure
• Who updates text like prices and business hours later, and how