DDP DDE MFP MFE - Post ID 242616

User 482233 Photo


Registered User
2 posts

Can you please explain to me the difference between Desktop Down PX Based, Desktop Down EM Based, Mobile First PX Based and Mobile First EM Based?
User 103173 Photo


VP of Software Development
0 posts

Desktop Down PX Based = Designing left to right using Pixels.
Desktop Down EM Based = Designing left to right using EM's.
Mobile First PX Based = Designing right to left using Pixels.
Mobile First EM Based = Designing right to left using EM's.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 482233 Photo


Registered User
2 posts

What are EM's?
User 103173 Photo


VP of Software Development
0 posts

Jacques Terblanche wrote:
What are EM's?

http://kyleschaeffer.com/development/cs … -vs-pt-vs/
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 122279 Photo


Senior Advisor
14,566 posts

It is a scalable size unit for text. One 'em' is the size of the letter m. Ems are used for responsive design instead of px.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1875694 Photo


Registered User
1 post

I've searched for hours, probably days, for the answer to this question, and merely renaming the style of layout is entirely unhelpful. The very first decision we need to make before every other thing is decide,
'Mobile up' or 'Monitor down', I can conceptualise that. EM or PX though?, why would I choose which? What are the advantages and disadvantages with RLM. Which is easier, which is better, and why and how? file-->new from--> Can anyone help me get started?
User 187934 Photo


Senior Advisor
20,245 posts

This article will explain things.
http://alistapart.com/article/howtosizetextincss
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 434929 Photo


Ambassador
938 posts

Another interesting article is here

Read this article first
http://www.narga.net/understanding-font … rcent-rem/

Then watch this video
https://www.youtube.com/watch?v=r7LGKtnEWmk
Guys at coffeecup are awesometacular.
User 271657 Photo


Ambassador
3,816 posts

Jacques, some people prefer to start with a phone layout first (basically one column), and then rearrange that content as the screen width allows. Others like to start with the full-size site and work it down to one column.
Starting with the phone version first will get you thinking about what what's really important as far as how the content is prioritized and the site is navigated. :)
;) Here's a good responsive design overview: http://blog.teamtreehouse.com/modern-fi … web-design

As for px vs. ems (or rems), I prefer ems/rems for text, ems/rems and or percentages for layout and just use pixels for borders, horizontal rules and sometimes vertical spacing.
;) Conversion chart: http://pxtoem.com/
(Left panel displays the base pixel measurement, right panel displays the em sized based on it. 16px=1em or 10px=1em are the most common choices).
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.