logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-21-2017, 10:41 AM   #1
gore.m
 
Join Date: Mar 2010
Posts: 53
Default Screen resolution / starting width for responsive design?

Hi,

I was working on my new web design on my notebook with 1600×900. After I done all responsive css tweaks etc, I found out that it is not enough… my design doenst look good on users most used sceen resolution 1366×768, everything looks “too big”… images, spacing/negative space, typography etc.

So have I made a mistake in an starting point? Should I use 1366×768 as my screen resolution and to define max width, because of image sizes? Or design in max width size? Im confused 🙂

Which is your screen resolution / starting width or workflow for responsive theme design?
Thanks you
gore.m is offline   Reply With Quote
Old 08-23-2017, 05:37 PM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

Hi Gore

You're thinking of Responsive Design like one used to think when we worked with fixed width designs. In modern web design we no longer think of most common resolutions. The reason being there are just way too many to consider. That's the whole point of Responsive Design to make your web pages work no matter what screen size its being viewed on. To make then resolution independent.

I appreciate that this can be quite awkward to get your head around especially if you're coming from a print or graphics background where you always have a fixed size to work with.

In terms of approach there are two ways you can work. Deal with the desktop size first and then adjust your design as the screen size comes down or the more common approach these days is what's known as mobile first. This is exactly what it says on the tin. Consider your mobile size first. The phone in portrait then landscape then tablets etc. Don't think in terms of resolution though just start out making your design work at a typical phone size and then just adjust your design with CSS media queries as you have more screen real estate to work with. This typically means adjusting your navigation, perhaps adding a side bar etc but that's to massively simplify things.

Hope that helps you. Just try your best to get away from thinking in terms of resolution as this will just give you a head ache.

Let us know how you get on.

Thanks

Richard
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 08-25-2017, 04:09 PM   #3
gore.m
 
Join Date: Mar 2010
Posts: 53
Default

Thanks you for your reply!

Quote:
Originally Posted by Ricky55 View Post
You're thinking of Responsive Design like one used to think when we worked with fixed width designs....

Deal with the desktop size first and then adjust your design as the screen size comes down or the more common approach ...
Yes, you are right!

My problem are a questions:

1) Should my project has max width - say 1500px and than stop resize?

2) If yes, how can I find (or is there) safe/optimal "starting width" for desktop to start design in Photoshop?

3) Or should I start (in Photoshop) with my intended max width and than go down?

I found out, that most recommended is 1024px or 1200px or 1440px.

But is there an reason/sense to use those resolutions as "Photoshop starting width"? I couldnt find an answer.

I think Im missing an glue between responsive design and images width... and between responsive design and design proportions that are changing during resizing vs Photoshop.
gore.m is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:40 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com