Browser mockup templates are layout files that wrap a website design in a browser window, with an address bar, tabs and a content area, so a client sees the design as it would appear on screen instead of as a loose image.
They sit in the presentation step of a project, after layout work is settled, and belong to the wider family of web design templates that speed up everyday design jobs. This page covers what a browser frame adds, how to size the content inside it, and which mistakes make a mockup mislead.
What a browser frame adds to a design presentation
A flat export of a homepage design shows pixels but no context. Placed inside a browser frame, the same design gains the elements that surround every real page view: the title bar, the address field, the tab strip and the scroll bar. Those elements tell a client that the work is a web page, not a poster or a print layout, and they set expectations about how much room the page really has.
A frame also fixes a common presentation problem, which is the endless canvas. Design software lets a page run to any height, and a long homepage laid out on a tall canvas looks tidy as a whole. Visitors never see it as a whole. They see a window onto it, and the frame makes that window visible.
A mockup is a presentation aid, not a prototype. A user interface prototype is a hypothesis, which Nielsen Norman Group describes this way: “A user interface prototype is a hypothesis — a candidate design solution that you consider for a specific design problem.” A browser mockup shows what the finished page should look like. It does not test whether people can complete tasks, so it works best next to wireframes and, where needed, a clickable prototype rather than in place of them.
Parts of a browser mockup template
Most templates are built from the same handful of layers. Knowing them makes any template easy to adapt.
- Window chrome. The outer frame with window controls, drawn in the style of one operating system or browser.
- Tab strip. One or more tabs, ideally with a favicon and a page title that match the project.
- Address bar. The field that shows the web address, which is the place to put the real or planned domain.
- Content area. A placeholder region, often a replaceable layer, where the page design is dropped in.
- Scroll bar and edges. Small cues that show the page continues below the visible area.
Changing the address and tab title takes seconds and has an outsized effect. A mockup that shows the client’s own domain and page name feels like their site, while a default placeholder address suggests a stock graphic. This site hosts no template files, so any template used for this step comes from a source whose own licence terms apply.
Sizing the content inside the frame
The content area should match a realistic window, not the full width of a design canvas. Pasting a very wide, very tall page into a frame and scaling it down makes text unreadably small and hides the real proportions of the layout.
For desktop views, crop the content to the visible part of the window. For small screens the logic is different, because a phone does not render a page at its own width unless the page asks it to. According to web.dev, mobile browsers render the page at a desktop screen width, “usually about 980px”, though this varies across devices and then scale the content to fit, unless the page sets a viewport. The same article notes that a page without the viewport meta tag loads very zoomed out, with text that is hard to read.
That matters for mockups because a phone-sized frame is only honest if the design inside it is built for a narrow viewport. MDN gives the standard approach: “The recommended setting is the following, which sets the viewport to match the device’s width”. When a design is shown in a narrow frame, it should be the layout that results from that setting, with its stacked columns and larger tap targets, and not a shrunken desktop page. The next step after the mockup stage is covered in the guide to responsive web design, which explains how layouts adapt between window sizes.
Showing the fold honestly
The visible region of a browser window before any scrolling is usually called the fold. In a mockup it is the part of the content area a client sees at first glance, and decisions about what sits there deserve care.
Nielsen Norman Group measured how much attention that region still gets. In an eyetracking analysis, users spent about 57% of their page-viewing time above the fold, compared with 80% in its studies as recently as 2010, so people scroll more than they used to but still look at the top of a page first. That supports a simple rule for mockups: put the page’s main message and primary action inside the framed area, and treat everything below as supporting material.
Two practical habits follow from this:
- Show the first screen as the main mockup, with the frame cropping at the window edge exactly where a browser would.
- Show the rest of a long page as a separate tall image, or as several stacked frames, so the client can read the full flow without mistaking it for one screenful.
Showing states, not just a single page
A single static frame answers only “what does the page look like?” Clients also ask how things behave, and a small set of extra frames covers most of those questions without any interactive build.
Useful variations include a navigation menu in its open state, a form with a validation message showing, and a hover or focus state on key controls. Form and control states are covered in more depth in the guides to web form design and web button design, which are worth reading before drawing state frames, since a mockup that skips the error state tends to hide the part of a form that causes the most trouble.
Keep the frame identical across these variations. Changing the chrome from one screen to the next distracts from the thing being compared. Duplicate the template file once, then swap only the content layer.
Mistakes that make a mockup mislead
A polished frame lends authority to whatever sits inside it, which is why careless details do damage. These are the problems that most often undermine a presentation:
- Unreal content. Placeholder headlines that are far shorter or longer than real copy hide layout problems. Use realistic text lengths from the actual content plan.
- Impossible images. Photos that the client does not own or cannot license set expectations the final site cannot meet. Check the licence for every image before it appears in a presentation.
- Mismatched chrome. A Windows-style frame shown to a client who works on a Mac, or a browser skin years out of date, distracts from the design. Match the frame to the audience’s environment.
- Misleading branding. Browser and operating system logos and names are trademarks of their owners. A frame that imitates one is a drawing style, and it does not mean any browser maker has reviewed or approved the work.
- Treating the mockup as the specification. A flat image cannot say how a page reflows, so the mockup should go to developers alongside written notes about behaviour.
A simple workflow for a mockup presentation
A repeatable workflow keeps mockup work fast. First, finish the page design at a realistic window width. Second, open the frame template and replace the address and tab title. Third, place the design into the content layer and crop it to the visible window. Fourth, add any extra frames for states or for narrow screens. Fifth, export the images at a size that stays sharp when a client opens them on a large monitor.
Name the files consistently, for example with the page name and the state, so that a folder of exports reads like an ordered walkthrough. When a revision comes in, edit the source design and re-export, not the exported image.
Frequently asked questions
What is a browser mockup?
A browser mockup is a picture of a website design placed inside a browser window, with address bar and tabs, so that it looks like a real page on screen.
Is a browser mockup the same as a prototype?
No. A mockup is a static presentation image. A prototype is a candidate design that people can try, and Nielsen Norman Group describes it as a hypothesis to be tested with users.
Should the design inside the frame be cropped?
Yes. Crop the content to the visible window so that the frame shows the first screen as a visitor would see it, and show the rest of the page in separate images.
Can a mockup show a phone layout?
It can, provided the design inside it is built for a narrow viewport. A scaled-down desktop page in a phone frame misrepresents how the site will behave.
Does this site provide mockup template files?
No. This site hosts no template files and offers no downloads, and it is independent of any browser maker, software vendor or template provider.
