FOX Models

A modeling agency site looks like an ordinary gallery until you sit down to build it. Then it turns out there are five requirements pulling in different directions:

• The photo is the product. Anything that sits on top of the image, crops it or stretches it works against the site. The framing has to be right at every width, from a phone to a large monitor.
• A board is not read, it is scanned. The client does not read descriptions but runs their eye over the faces and stops at one. The grid has to be fast, and the basic measurements within reach without opening the profile.
• Every model is their own address. A profile gets forwarded to a colleague, opened on a phone and pasted into a message, so it needs its own URL, its own title and its own preview image.
• Applying as a new face is not the same as booking. Scouting submissions come from strangers, from a phone, with two or three photos. That is not the same form, and it must not look the same.
• In the end, the content comes from a database. On the real domain, models and editorials are served by PHP from the agency's database, so the front end has to be written so it does not care where the data comes from.

The last point decided the technology. When you know in advance that the content will one day come from a database and will change more often than the code, a site that has to be rebuilt with every change works against itself.

The first screen is exactly as tall as the device screen and is split into two panels: the left half leads to the women's board, the right half to the men's. Over each panel stands one huge letter — W on the left and M on the right — and below it a small caption with an arrow. The agency name is at the top, over a soft dark gradient that keeps it readable even when the photo underneath is light.

A detail nobody notices, but one that was explicitly requested: the letter M is not an M. It is the same W turned upside down, so the two panels are symmetrical twins instead of two different characters. That is why the lift on hover had to be written so the rotation stays in place, because an ordinary translate animation would quietly cancel it and the M would flip back into a W mid-motion.

Choosing the photos for the panels is not about aesthetics but about checking on a wide screen. On the panel the image scales to the width, with no horizontal cropping, so on a 1920-pixel monitor you see the whole frame. The first image for the men's panel had a full brand logo on the clothing, which did not show at all at the three smaller widths, and it was replaced with another. For the same reason, the selection below left out magazine covers with the magazine's name printed on them and a photo with ad copy across half the frame — an agency site must not look like it is advertising someone else's brand.

Below the first screen comes a section called Featured: eight faces, four from the women's board and four from the men's, balanced and with Main Board first. There was also a quiet bug here. The order of the boards is read from a table in which Main has the value zero, and zero is a falsy value in JavaScript, so the fallback number overrode the real one and Main Board would have ended up last instead of first. The fix is to check whether the key exists at all, instead of relying on it not being empty.

The women's and men's boards are separate pages, not two states of the same page. The women's board and the men's board have the same subnavigation: Main Board, New Faces, Commercial and, set slightly apart, Contact. Every board has its own address, so a link to New Faces can be sent as a link to New Faces, not as instructions to click somewhere else.

Above the grid are a name search that works as you type and a count of the models shown that updates on the fly. Next to them is an A–Z index with Serbian letters, including Č, Ć, Đ, Š and Ž, in which letters without a single model are visibly grayed out and cannot be clicked. An index where a letter leads to an empty page is worse than no index at all, because the visitor thinks the site is broken.

The index itself hides on small boards and appears only when a board has twelve or more models. On a demo board of six faces, an alphabet with almost every letter grayed out looks like a bug; on the agency's real board, with several hundred names, the same strip is the fastest way to get to a surname. Same logic, two different behaviors, with no code changes when switching to the database.

The card shows the photo, name and city. On hover, a layer slides down over the image with the full set of details — height, measurements, shoe size, hair, eyes, the board label and a prompt to open the profile. On touch screens there is no such layer, because a phone has no hover: there the photos are clean and the details are read on the profile. The same code draws the same card on the home page, on the board and below the profile, so the display cannot drift apart between the three places.

The profile is split into a gallery on one side and details on the other: the board label, name, city, then a tidy list of measurements — height, bust, waist, hips or suit size, shoe size, hair, eyes. Below them are two actions: Booking inquiry and the agency's Instagram account.

Booking deliberately stayed as email. A click opens the mail app with the recipient filled in, a subject line with the model's name and a message body that already contains the name, city and a link to the profile, with blank lines for the project, dates and contact. A client booking a model does it from their own inbox, because the inquiry has to stay in the email thread and be forwarded to a colleague. A form on the site would pull them out of the tool they actually work in and give the agency a message with no history.

Below every profile are four faces from the same board and a link to the full board. That is the only navigation that really works on a site like this: someone who opened one profile is rarely looking for that exact face, but for a face of that type.

The buttons on the profile went through a round of revisions. The first version was outlined pills, which looked cheap on the light page, and they were replaced with thin text links with an underline and an arrow. On a fashion site, a button that shouts is the only element people remember instead of the photo. For the same reason, the mobile menu was reduced to two straight lines that cross when it opens.

The Editorials page is a wall of covers, editorials and campaigns — ELLE, Grazia, Stylist, Legend, Terranova — with the title and type of collaboration under each item. A click opens a full-page view.

The lightbox was also written for the keyboard: the arrow keys page through, Escape closes it, focus stays trapped inside the view while it is open and returns exactly to the image it started from. On a phone you swipe through, the neighboring image is preloaded so the transition does not wait, and a counter shows where you are in the sequence. A gallery that cannot be closed with a key is a gallery that some visitors leave by closing the entire browser tab.

Images rendered by JavaScript fade in softly when they arrive, instead of popping in and pushing everything below them. The static images on the first screen have no such delay — the hero photo is what gets measured as the largest element on the page and has to be there immediately, so it loads with priority and without a single effect in the way.

The site is written in plain HTML, CSS and JavaScript. No build step, no framework, not a single library. All of the custom code is three files — styles, behavior and data — about seventy kilobytes in total before compression, and the server sends them compressed. The only external thing the page pulls in is the font.

The content lives in a single data file: seventeen models, twelve on the women's board and five on the men's, and ten editorial items. The fields in that file were deliberately written to match the columns that PHP will return from the agency's database on the real domain — one model is one row in a table, editorials are another table. Moving from demo data to the database is therefore a swap of the source, not a rewrite of the site.

That is also the main practical difference from the 3D version. That one was a Next.js project that had to be rebuilt on the server with every content change, installing dependencies and assembling all the static pages. Here the changed file is copied to the server and that is the whole job. Deployment is direct, with a backup of every file before it changes, no middleman and no step that might one day fail because of someone else's change in some package.

There is also a safety net in case JavaScript fails. In the head, a marker saying that scripts are running is set on the document right away, and the reveal on scroll depends on that marker. If after loading it turns out that the site header was not rendered, the marker is removed and everything that was waiting to appear becomes visible at once. A site without scripts is not pretty, but it is readable — and a site that silently stays blank is a lost visitor.

Responsiveness was checked from narrow phones to very wide monitors. Horizontal overflow is clipped at the document level, so the page does not wobble left and right even at 320 pixels, and long URLs and email addresses in the footer wrap instead of pushing the layout past the edge. The content has a maximum width, because a grid of faces stretched across an entire very wide screen is no longer a grid but a strip.

First: visitors on phones got stuck on the old version and had to clear their cache manually to see changes. The cause was not in the code but in the server configuration — styles and scripts were sent with an instruction to be kept for thirty days without being revalidated at all. That directive only makes sense for files with a content hash in the name; here the name was the same every time, so for a month the browser kept showing what it had stored, no matter what changed on the server.

The fix had two parts. Styles, scripts and HTML are now always revalidated with the server; if nothing has changed, the server replies with a short “unchanged” and does not send the content again. Images are still cached for seven days, but without the ban on revalidation. On top of that, the URL of the styles and scripts was changed once, because a rule change does not apply retroactively to what the phone has already stored — only a new URL unsticks a cache like that.

That fix came with two surprises worth more than the fix itself. First: as soon as you add your own header to one part of the configuration, the inherited security headers quietly disappear from that part, so they have to be added back into every such block — otherwise fixing the cache costs you the protection, and nobody notices. Second: the file the server actually reads was not a link to the file being edited but a separate file with its own content, so the first changes had no effect at all and it looked as if the server was ignoring the configuration.

The second bug was worse, because it looked like a bug in the code: whichever model you clicked, the same person opened — the first one on the list. Locally everything worked; on the live site it did not. The cause was a line in the configuration that redirects old URLs with an extension to clean ones: it redirected correctly, but in doing so it dropped the part of the URL that says which model is meant. So the page received an empty value and showed the first one in the list. The same thing affected the prefilled booking inquiry. The fix is one addition to that line that passes the query string along.

Both bugs are worth recording for the same reason: neither is visible in the site's code, and neither would have been found by testing on a local machine. They only show up when the site is opened the way a visitor opens it.

Everything search needs is already in place. Every page has its own title, description and canonical URL; the home page carries data about the agency and the site, the boards carry the list of models as a collection, the profiles carry person data and a breadcrumb trail, the editorials carry a gallery. The URLs are clean — /women, /men, /editorials, /contact — and old URLs with an extension are permanently redirected to them.

Along with that comes a move that looks like an oversight until it is explained: the site is closed to indexing, and the canonical URL points to the agency's domain. On our subdomain it should not be in search, because it would show up as one more result for the agency's name and split the signals between two addresses. It is one line that comes off on the day of the move to the real domain, and then everything listed above starts working for the agency instead of just sitting there.

On the Contact and Apply page there is also a part that is not about technology but about protecting the industry: scouting is always free, the agency never asks for payment to join a board and never makes contact through unofficial accounts. Fake scouts on social media are a real problem in this business, and the only thing a website can do about it is state clearly what genuine contact looks like. To be open about the limits of this build: the application form validates the fields, accepts two to four photos by drag and drop and shows a confirmation, while actually sending and receiving the photos gets wired up at the move to the real domain, to the same server layer that will then also serve the model data.

What the agency gets in the end. A site that opens instantly because there is nothing to execute; a profile for every model with a URL that can be sent to a client; a board that can be filtered and searched instead of scrolled to the bottom; one file that its database plugs into, so adding a model does not mean calling us; and a design that does not compete with the photos. No subscription, no dependencies going stale and no build step that one day stops working.

And the part this case study exists for in the first place. The 3D version is stronger on the first screen; this one is better for the work done every day. When the content of a site is someone else's face, the best technical decision is usually the one nobody notices.