Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts


how should I setup a document settings for web page design? I am using macbook pro with 2560 x 1600 px resolution (native 1680 x 1050) and every time, I've made an export, the site was blurred or too big. I've tried every combinations of res and DPI, but no config works :-/ My best try was 1680 x 1050 px, 300 DPI. @1x was ok by dimensions but blurred, @2x was too big. When I use my design in Google Chrome and zoom out to 50% (using @2x export), the result was ideal (fit the screen and no blurred). But I can't making designs like that :-(

Link to comment
Share on other sites

Welcome to the Affinity forum!

Can't specifically answer your question but I looked in the Resources category of this forum and found some Templates for web design such as this one:


There are others, click on HOME in this forum, scroll down to RESOURCES and type template in the search field at the top right.

Perhaps reviewing this template will help you to set up your own.

FYI Note: When you post a new item, there is a FOLLOW field at the top right you can click. This way you will be notified when someone posts a reply to your question.

♥  WIN 10 AD & AP  ♥  Lenovo Legion Y520 15.6" Laptop

Link to comment
Share on other sites

@DWright No, it's not really about most commonly used dimensions. Coder will use Bootstrap 4, so dimensions and responsive is not a point here.


@jer I've made same template for my own, 1140px with 12 cols (30px gutter) - Bootstrap default. But let me explain what the problem is.

I'm using this document setup


And when I export slices (slice1.png and slice1@2x.png) and load them into my "page", slice1@1x is blurred but dimensions are OK. When I will use slice@2x, it's ok, but I have to zoom out to 50% in browser to get sufficient result. Check screens:

5989762c00862_Snimekobrazovky2017-08-08v10_15_44.png.8bd2216d307bb18cc3ad4e2c32b01158.png @1x blurry, dimensions OK.

5989762b10789_Snimekobrazovky2017-08-08v10_15_18.png.dbb5100c66c4792d07bc913d52130cb0.png @2x no blurry, but wrong dimensions - have to designing in 200% (twice bigger) zoom and in browser zoom out to 50% (twice smaller).


It is really frustrating, because I send my designs to client.


Link to comment
Share on other sites

@doeboy Oh good. This isn't topic about Bootstrap. I was answering to DWright... How do you even know, that the site would be used in production? Could it be internal help desk application where some alpha bugs can simple be? I'm using Bootstrap 4 alpha for more than one year, and I can't imagine, that we will develop new application in something old as Bootstrap 3. HTML5 is a huge topic. Which part you have on your mind?

tldr; I'm working as a web developer over 10 years. Last 6 years I'm focusing on backend technologies. I know how @2x works, the meta tag "viewport" and so on. Maybe I'm missing something. But

I would like to design a web page at 100% scale (1:1), export it and load it in browser. Here is my document - Document-Setup-AD-1140.afdesign. Or is this problem caused by export setup?

Link to comment
Share on other sites


thank you for your welcome.

Setting DPI to 72 headed to that I'm actually designing at 200% zoom scale, is it OK?


Here is my HTML which I use to preview my designs:

<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	body {
		background-image: url(slice1.png);
		background-position: center top;
		background-repeat: no-repeat;
		height: 3184px;

	@media all and (-webkit-min-device-pixel-ratio : 1.5),
	all and (-o-min-device-pixel-ratio: 3/2),
	all and (min--moz-device-pixel-ratio: 1.5),
	all and (min-device-pixel-ratio: 1.5) {

	body {
		background-image: url(slice1@2x.png);
		background-size: 1680px 3200px;

Now I'm satisfied. THX.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.