I'm a very newbie to the world of UI developing. Right now I'm using HTML and CSS to develop the layout. I use Google Chrome (because it is a very good browser, and from my point of view it is the best right there) to debug my code, but I just downloaded Firefox to see how my design will look like (I was thinking pretty much nothing will change) only to be staggered when I found that my design looks terrible and all what I went through was not compatible with Firefox.
I need someone with an expertise in that field to tell me how to properly perceive such incompatibility (Some professional techniques ) between browsers and what should I do now for my current design and for the future when developing other sites?
the question might not have some genuine English as of my background, but I assure to you that I'm not demanding rather than asking politely, that's how it sounds in my region. Thank you
Since the browsers are all developed by mainly different people, there's always the possibility of running into compatibility issues.
There's two steps I can think of when it comes to preventing this kind of issues:
-webkit-transition:0.2s; worked in an early version of chrome, firefox had its
-moz-transition:0.2simplementation only, until it became a standard that
transition:0.2sshould be the accepted syntax. There's lots of tools that can help with that, like Autoprefixer, or pleeease.io
Regarding Mobile responsiveness, the key is to avoid using many fixed width elements (i.e. 1024px for the main container) or having media queries and adapting the fixed sizes to certain display sizes using media queries.
The internet's knowledgebase can help you really understand more about this, but if you just want to try it out, you can view some popular media queries on this SO question: Media Queries: How to target desktop, tablet and mobile?