Right from 2012, Mobile browsing has been rapidly growing as the new trend. It is going to be the same for at least a decade to come and it is an area you should be capitalizing on. When it comes to mobile sites, the issue now is picking the appropriate method for deploying websites on mobile devices. Though there are different methods for deploying mobile websites, the responsive design strategy seems very promising. Responsive design makes the site instantly mobile across multiple platforms. But one thing to keep in mind is the physical limitations as content must be developed with responsive design in mind. Designing a separate mobile website is also an option. Traditionally a site for each kind of device was built separately along with the main site.
However, with the plethora of devices on the market, it is literally impossible to build a site tailored for each device and yes, it is a very costly commitment. To address this, as developers you should be looking to build a site that adapts itself to the media size and resolution of the device in which it is rendering. When you build a responsive website, it is sure to attract audience on many platforms. LetâEUR(TM)s see what you should be doing to build a responsive website.
Most of you will be familiar with CSS. Most of the websites you build will be linked with a stylesheet. The power of stylesheets is that it can be used to build highly responsive websites. Yes techies, using stylesheets you can build websites that are media aware and do it with ease. Here is how you should be doing this.
Since the days of CSS 2.1, the style sheets have had some measure of device awareness through media types. If you have written a print stylesheet then you should be familiar with this basic media aware concept of CSS.
This is the very basic content awareness that you can incorporate into your CSS. Using this you can link two different stylesheets with the same content and based on whether the selection is screen or print the stylesheet is linked with the content. Starting to understand the potential of CSS? There is more that it has to offer.
Apart from designing neatly designed page printouts, the CSS specifications also supplied us with a bevy of acceptable media types. But most browsers and devices never really embraced the spirit of the specifications, dropping many of the media types loosely implemented. Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the media types. A media query will allow you to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. Have a look at the following snippet.
In the above snippet, the media property has two components.
1. A media type âEUR" screen and
2. The query enclosed within the parenthesis that contains a particular media feature (max-device-width) to inspect the target value.
In working, the script inspects the maximum device width and if it is less than 480px, say you are viewing it on an iPhone the m6-i-style.css is linked and on a normal device the stylesheet is ignored all together.
This is not the boundary. You can even create compound queries for linking CSS by using and for joining the parameters. Look at the example below.
Furthermore, you are not limited with implementing the media queries in the links. You can use them as a part of the @media rule or as a part of an @import directive.
The results are more or less the same for both the query types. Whenever the query of the device type is matched, the style or the CSS is linked. Based on the usage you can choose the best method. I would suggest you use the first method for linking CSS as a whole. Using the @media and @import rule will be very useful in customizing the image sizes for specific devices. And that the basics with which you can build really extra-ordinary responsive websites.
Flexible images and media queries using CSS is the way forward in constructing responsive websites that are suitable for cross platform rendering. As designers you should be looking to create attractive, elegant, light weight and responsive pages to attract audiences from all platforms, especially mobile surfers. Take it further, try out image queries and flexible images in your Windows Web Hosting account today!
