IT things

Personal blog about technologies and programming by Andrei Morozov

Design

Adaptive web design

I think, every designer already met problem, that only on his computer design is perfect, but on other… In that post I will show you some tricks and recommendations!

Have you ever heard about CSS media rule?

CSS media rules are very useful and interesting things in design. Media is special rule, where you can write CSS rule for specific screen resolution. For example, you can write, that every screen, which equal or less than 1024 px, should have black square in the corner, but if it’s bigger, site will be standalone.

CSS media rule example:

@media(max-width: 1024px){

.square{

background-color: black;

}

More information about CSS media rule you can find here.

Writing CSS rules for specific browser

Sometimes, you could see that some browsers see your page correctly, and some no. In that case, we need to create special exception for that browsers. You can see browsers exceptions here:

/*Google Chrome (+ all Chronuim based browsers), for 28 version and higher*/
@supports (-webkit-appearance:none) {
nav.tm_navbar {

background-color: green;

}
}

/*Internet Explorer (IE), version 10 and higher*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
nav.tm_navbar {

background-color: blue;
}
}

/*Mozilla Firefox, works in each version*/
_:-moz-tree-row(hover), nav.tm_navbar {
background-color: red;
}

How to test my design?

Designer isn’t that person, who buy a lot of monitors, mobiles or tablets (I wouldn’t talk about TVs). To save your money for that devices and to make your life easier, you can use special site, which can change “HTTP_REFERER” .  And that site is quirktools.com, it has some instruments for web developers, an d Screenfly (responsive design checker). So, now you can easily test your design!

Cool browser for web developers

When I was making designs, I thought is anywhere exist special browser for us, for web developers. And then I suddenly found it, and it’s very very (and very x100000 times) good browser, from my favorite open source company Mozilla. The name of browser is “Mozilla Firefox Developer Edition”,  which you can download and check out using link here!

Conclusion

To write good design isn’t so hard, of course if you now some tricks and you have good instruments! So, good luck! Happy coding!

1 Comment

  1. Vlad

    Thank you, bro! Good article)

Leave a Reply

Theme by Anders Norén