Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
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?
PS
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
Updated
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:
Use a CSS reseter. What that means is a stylesheet containing a set of CSS for bringing all items to the same starter value (i.e. chrome has a 30px padding in list items, firefox has 35px but the css resetter tells both of them to have 30px padding - Just an example). For more info about CSS resets, have a look at this question: CSS reset - What exactly does it do?
Prefix your CSS correctly. Browsers implement properties differently, so while -webkit-transition:0.2s; worked in an early version of chrome, firefox had its -moz-transition:0.2s implementation only, until it became a standard that transition:0.2s should 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?
you will have to learn as you go, start with the simple things & make sure you have a good foundation. There are a lot advanced CSS3 animations, transitions & transformations as CSS3 is becoming more & more powerful. Check at "Can I Use" to see which browsers support your CSS. Responsive design is based on media queries (checking screen size) & using percent rather then px for example so the design can change depending on the device. Also MDN is a great tools for reference which also notes browser compatibility.
a good practice is to set padding margin to 0 and using box-sizing on first lines of your stylesheet to reset browser layout like this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
this will help you control your site layout a bit better
The second part of your question:
Write this code to make your website compatible in the head part
Modify the "1.0" part accordingly.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've read a lot about this thing. Most of users suggest media queries, but I would like to know is there any specific 100% working way that allows your site to look great(elements doesn't lose they positions) even on another resolutions/browsers with just html/css. If not, what to do then?(get back to media queries?)
I don't know much about css/html, but when I tried to open my page with another pc or phone, it looked awful - (page which i designed for my PC's resolution).
I also tried 'em', '%', 'min-width' and 'min-height' but didn't go so good.
Sorry because I ask this, even there is probably an solution out there. I just wanted clear and straight answer so I don't lose my track and get confused even more.
Thanks
Media queries are the best thing to use when it comes to fluid web design. Think of media queries as custom presets you can create for each or a range of screen sizes. It is the best way to inject fluid design into your website.
The easiest way is going to be using bootstrap(http://getbootstrap.com/). This is some free open source css code that simplifies a lot of things, including what you're trying to do
EDIT: As others have said, media queries are the most common and potentially best way. Bootstrap is just a simple way of getting your site to look good on most screen sizes.
Responsive Web Design revolves around Media Queries. It's the ability to define certain resolutions to force the page to display in a specific way for that resolution. This is how a single web page can be rendered to look native to a phone, tablet, and/or PC without having to create 3 different web pages/applications.
Ideally, you wouldn't want to write this yourself. I'd recommend one of the following libraries, then build on these libraries to fit your need:
Material Design (Google Design)
Twitter Bootstrap
Foundation
Now, if you don't want to use a library or media queries, maybe this example will help. I don't recommend not using a library, nor not using media queries though.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a web site than must be visible on any screen and any device, and I saw this site the other day.
Inspecting the page with the developer tools of google chrome and "emulating" the width and height of devices I saw that the page fits to any resolution and orientation.
Image on landscape and as an iPhone
Image on portrait as a Samsung device
I want to know how to get this without struggle too much with css.
Thanks in advance.
PS: Also I viewed the site from my phone a Samsung galaxy S3 Mini and it fits perfectly to the screen.
I am going to make this answer as helpful and to the point as I can:
You will need to spend a few hours reading all you can grab on responsive web design and development, only after that should you begin to explore the right tools to make your CSS life easier.
A lot of what you in responsive development do also depends on your application. To make things simple you should begin using HTML, JavaScript and CSS. Any libraries you use must be related directly with any of these languages.
A big rule of thumb is: always try to do responsive development with CSS, but if you cannot for a good reason, then and only then should you rely on JavaScript. If you did not learn why this is important after reading the first paragraph of my answer, then you should spend more time going over responsive web design and development (it's worth it!).
As you will find out, there are many techniques and CSS libraries for making responsive web design. A guideline I can give you is: You can learn to make your own responsive development, which in practice leads to leaner code and it will also helps you understand how more robust libraries do it (such as Bootstrap, among others).
Learn and understand media queries.
Learn about advanced CSS contepts such as mixins and how you can combine them with #1 to make your coding life easier.
Learn all you can about grids and fluid grids, then look at (today's) modern concepts such as flexbox which will help you with your individual and global layout. Make sure you can do it yourself! (it's not a big challenge, take it one small step at a time, do some tutorials).
Begin to dive into some neat CSS frameworks, such as Foundation, Bootstrap, Ionic Framework, among many others. It is imperative you take time to understand how they can help you, what they can do for you, extract only what you need (example: I only need to use the grid system), are they community driven? (it is important not to rely on obsolete tools).
Do not forget your good friend JavaScript (and the plethora of frameworks you can use with it). Be sure to compliment any behavior you cannot achieve with CSS to achieve your responsive behavior, not the other way around.
Last but definitely not least is cross browser compatibility: once you go deep enough in CSS you tend to forget to always use cross browser compatible techniques. This takes plenty of - do it yourself - research, but it is not terribly difficult, simply stick with what works for you and for your implementation.
So... only after you have done some reading, played with code and begin to find roadblocks, should you come back here and start asking as many questions as you like. That way we, the community, can assist you properly.
Good luck!
P.S.: Here is a little fun article to get you started: Holy Grail Layout
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am designing a website using bootstrap ,HTML,CSS,CSS3 and PHP as Server side language. But when i checked it on different Browser I found that it is not compatible for all browser by examining some appearance and functionality of HTML elements. I want my web page should look on every browser.
I wanted to know :
1) What are the aspects that we have to take in consideration while designing cross-browsing website?
2) How can i design a page which can give me the same output on different browser.
1) Before you use any html5 element. Just check on caniuse.com. To see if it's compatible with the browsers you want. If you are desperate to use that element, provide error callback or just alternative callback.
2) Use prefixes like -webkit- or -moz- etc for partially supported css rules on browsers(you can check on caniuse). If they do not support the rule at all, fallback to images but mind page load. You can also use cssreset library like normalize.css to standarise default styling across browsers.
Your problem is not at all PHP related. PHP runs on a server and generates (HTML) output. That output must be compatible with the browsers, but it's not specific to PHP to get it that way. Therefor I've removed PHP from your title and tags.
The remaining question:
First aspects to take into consideration, is that no two browsers are the same. Even if you have the same browser, they can run on a different machine, have a slightly different update, run on different screen sizes, etcetera.
Also, browsers have their own CSS already built in. A h1 element has a big bold font. The exact size, family and boldness might vary across browsers. Therefor, many websites will start with a CSS Reset (Thanks, #Vucko). This is basically a bunch of CSS code that you can include, which will remove all markup or at least make it the same across browsers.
But even after that, don't aim for pixel perfect. Sometimes nearly is good enough.
This especially goes for unimportant features. For instance, rounded corners and shadows are not supported by old IE browsers, or may look slightly different. Instead of mimicing those CSS features by building big HTML structures and add background images, I think you should cut your losses and accept that a shadow won't show or the corners are squared when otherwise the site works okay.
It's good to follow standards. If you follow standards, and make sure your HTML is valid, it will show nearly the same in most browsers.
There might still be differences, expecially if you use new features that are not fully supported in all browsers. Using features that are widely supported, boils down to a lot of practise, a lot of knowledge, and being able to use at least these sites:
http://validator.w3.org/ - Check if your site is valid.
http://caniuse.com/ - Good overview of browser compatibility of specific HTML/CSS features.
http://www.quirksmode.org/ - A similar site.
Especially those overviews are very helpful. You can see in a glance whether a feature is supported or not, and whether you need special CSS prefixes (like -webkit-) in your CSS to make it work for some browsers.
The answer is actually the same as for 1: Don't. Make it look good on the most important browsers, and make it work on the less important ones. If a browser is really old, don't care about it. The oldest Windows that is still supported is Vista. Vista will run IE upto version 9. So IE8- users should just upgrade their browser. If you do want to support it, only make it work and look reasonable, but don't try to make it pixel perfect. Don't try to do that in any browser, for that matter.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My website PackageNow.net is based on HTML5 and CSS3. All other browsers do not give any problems but IE8 and lower do.
Website wrong view
I tried to apply the PIE solution, and tried to apply different CSS styles attached to the website if IE is lower then 9
The website should look like this...
Website correct view
I would understand if the layout would be a little but different, but this is not normal...
Please help because some of my customers still have IE8 and below. I added a script that says that there browser is out of date, but I need to provide a website that works. otherwise i lose customers.
Sorry for my bad english, hope you understand what i try to say.
Thanks! Roy
Yes that's probably the expected behaviour (depending on what you're doing) and is perfectly normal for IE8.
in IE8 a lot of HTML5 mark-up / elements won't be understood batively by the browser and it won't know if it's supposed to display in-line or as block and you need to provide the HTML5 shim to deal with those.
Also there are very few supported CSS selector rules in IE8 and a list can be found at Selectivizr how getting support for thise. Of course you'll then need something like JQuery to provide that support
Also some of the :pseudo attributes just aren't supported and you need to write JavaScript to emulate these and add appropriate style rules too..
There are many other reasons why IE below IE9 does not render a HTML5 / CSS3 layout. There are hardly any supported CSS3 features in in IE8 (even with PIE which only does some of them). If you take a look at Browser Support Reference
you'll see what is an is not support by the browser, without a polyfill to assist..
luckily developers have made lots of other feature available in HTML5 through the use of Helpful Polyfills, so check out the list to see if you need some of these.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.