Websites and banners, made understandableImages · Code · WordPress
Home / Guides
THE WEB ARTICLE INDEX

Guides

Choose a website task: prepare an image, configure WordPress, improve a page layout or create a banner. Each guide includes a procedure, a worked example and a way to check the result.

01

Resize a photo without losing useful detail

Pixel dimensions, file size and displayed size are different quantities. First decide where the image will appear, then prepare the pixels it needs, and finally tune compression.

02

A transparent background without a white halo

Transparency is alpha-channel information. The editor’s checkerboard helps reveal it, but must not become part of the exported picture.

03

Raster or vector: choose for the job

A photograph is made of pixels; vector artwork describes shapes. Choose by content rather than assuming that vector is always better.

04

Take a screenshot that helps solve the problem

A useful screenshot shows the error and its context without exposing passwords, private messages or payment details. Select the region and inspect the saved file before sharing.

05

Crop part of a photo while keeping the original

Cropping changes the frame. Resizing changes the number of pixels. Mixing them up can stretch a person or product unexpectedly.

06

Sharpen a photo without halos

Sharpening increases local contrast. It cannot reliably recover details absent from the source and does not replace correct focus.

07

Black-and-white photos: shape light, not just colour

Desaturation and deliberate monochrome editing produce different results. The important question is separation between subject and background, not merely the absence of saturation.

08

Rotate an image, layer or horizon

Rotating the canvas and transforming one layer solve different problems. First decide whether the entire document or only one object needs to change.

09

Mirror an image or a single object

Mirroring swaps sides and is not a rotation. It can help a composition, but may change the meaning of a photograph containing lettering or a recognisable location.

10

Rounded corners without another image file

For a web page, CSS often handles rounding more conveniently. Edit the actual image when it will be used outside your layout or must contain transparent corners.

11

Image borders: decide where they belong

A border can belong to the photograph or to the interface. Keep the distinction: card borders are easier to change in CSS; artistic framing belongs in an editable document.

12

Favicon: a small mark that stays legible

A tab icon must remain recognisable at 16–32 pixels. A reduced copy of a long wordmark usually becomes a blur.

13

A GIF banner with a readable story

Animation should help people read the message. One point, one transition and a calm final frame are more useful than constantly changing tiny headlines.

14

CSS animation people can disable

Motion can explain a state change: loading, expansion or a new step. Do not animate everything merely to make it noticeable.

15

Replace Flash with links, motion and ordinary HTML

Adobe ended Flash Player support on 31 December 2020. Installing an obsolete plugin is not an appropriate way to launch a modern website.

16

Wrap text around an image without breaking the page

Float is appropriate when text lines should genuinely wrap around artwork. Use Grid or Flexbox for two independent columns.

17

WordPress security starts with recovery

A security plugin cannot replace updates, access separation and a tested backup. Begin with the ability to recover from a mistake.

18

Make a WordPress post sticky and verify it

A sticky post can remain at the top of a feed, but the result depends on the theme and the query displaying posts. It is unrelated to CSS position: sticky.

19

Install a WordPress plugin without losing the site

A GitHub repository establishes that code exists, not that it is safe or that its ZIP is installable. Verify the author and package purpose first.

20

WordPress language: site, profile and theme translations

Public-page language, a user’s dashboard language and theme translations can be configured separately. One setting does not automatically translate the whole website.

21

WordPress shortcodes: identify and remove dependencies

A shortcode is a text command handled by core, a theme or a plugin. Disable its handler and a bracketed string may remain on the public page.

22

Readable articles: line length, rhythm and contrast

An attractive font cannot fix a dense wall of text. Readers need useful headings, identifiable links and comfortable line lengths.

23

A banner brief you can actually check

The original Web Article document specified a goal, dimensions, style, scenario, languages and destination. That structure still helps; its Flash requirement and list of placements are not current requirements.