Jump to content

Recommended Posts

Hi,

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 :-(

Share this post


Link to post
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:

https://forum.affinity.serif.com/index.php?/topic/13150-web-design-template-for-affinity-designer/#comment-57762

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

Share this post


Link to post
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

5989749a5c200_Snimekobrazovky2017-08-08v10_21_12.png.5f2b25051911d5c82903ced24e38c74f.png

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.

 

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Hi MEB,

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>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Preview</title>
</head>
<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;
	}
}
</style>
<body>
</body>
</html>

Now I'm satisfied. THX.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×