Archive | CSS3 RSS feed for this section

Blog Shifted

13 Sep

Dear Friends,

I got lot of support from you and I am very happy to let you know that Finally I have migrated from WordPress Hosting to own hosted Blog.

Yes, I believe WordPress is the best blogging platform available in market. So I have used wordpress again for my blog.

Here is a link for my New Blog :- http://mukundtechie.com

I request all my followers to visit my site and suggest me, What can be done to make it more interactive and pleasing to see posts.

All your feedback and suggestions are welcomed.

Thanks,

Mukund Chaudhary

New Blog : http://mukundtechie.com

 

Tips for making mobile friendly website

7 Sep

Over past few year mobile usages has seen a revolution. People not only uses mobile for communication but they use it for various purposes, Online line shopping to ticket booking and all. But Unfortunately mobile arena is not so simple for developers and designers to handle as there is lot of complexity involved in cross browser. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers.

According to IDC,Android and iOS Combine for 92.3% of All Smartphone Operating System Shipments in the First Quarter While Windows Phone Leapfrogs BlackBerry.

IDC Reports on mobile published_ichart_173696

 

 

 

 

 

 

 

 

 Image Credit : IDC – Press Release

Also Check this report.  http://www.icharts.net/chartchannel/worldwide-smartphone-os-share-2012-q1-2013-q1_m3zryyngc

Mobile device have reduced screen size,So let’s tackle these issues one at a time and create a road map for mobile web development:

Implement Mobile Stylesheets

The first step to adding mobile support to a website is including a special stylesheet to adjust the CSS for mobile devices:

One approach to including mobile stylesheets involves detecting the user agent string with a server-side language such as PHP. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain, for instance m.facebook.com. This server-side approach has several advantages: it guarantees the highest level of compatibility and also allows the website to serve special mark-up/content to mobile users.

Alternately, the easiest approach involves detecting the mobile device on the client side. One of the earliest techniques for including mobile  stylesheet’s media type, for instance:

<link rel=”stylesheet” href=”site.css” media=”screen” />
<link rel=”stylesheet” href=”mobile.css” media=”handheld” />

The first site.css targets desktops and laptops using the screen media type, while the second mobile.css targets mobile devices using handheld.

Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:

<link rel=”stylesheet” href=”mobile.css” media=”only screen and (max-device width:480px)”/>

Use Advantage of HTML 5


<input type=”tel” />
<input type=”email” />

These input types allow devices such as iPhone to display a contextual keyboard that relates to the input type. In the example above type=”tel” triggers a numeric keypad ideal for entering phone numbers, and type=”email” triggers a keypad with @ and . buttons. For complete list of HTML 5 input type click here.
SPECIAL IPHONE / IPAD ENHANCEMENTS

Take a look at Sencha Touch, jQTouch and iui. These three Javascript libraries allow you to better interface with the iPhone, and also work on similar devices such as Android. Additionally, keep an eye on the much anticipated jQuery Mobile which has just been released in alpha.

For creating special iphone-icon. Save a 57 x 57 pixel PNG somewhere on your website, then add this snippet within your <head> tag:

<link rel=”apple-touch-icon” href=”/customIcon.png”/>

Hope this post helps you to make a mobile centric site. All comments are welcome either any suggestion,feedback or any query.

Responsive Design

27 Jun

Hi All, You might have came across lots of responsive website and thought to make even your website responsive.
There are lots of benifts of having a responsive site but thats not our topic for today. We will discuss it later.
Lets start with core of any Responsive Web Design framework,i.e the media query.

responsive_web_design-570x345

What is a Media Query?

>>A media query is a CSS declaration that is used as a parameter for when to call other style declarations based on the dimensions of the current viewing device.

Ways of calling a Media Query:-

Like CSS we can call a media query in two ways. External and Internal call. Lets see an example of both.

External Call:-
<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px)” href=”css/mobile.css” />

Internal Call or CSS direct call:-

@media screen{

body{background: #ff0000;}

}

Both examples of two different ways to make CSS declarations that only are to be called when the viewing device is between 320px and 480px.

Width Parameter:-

If you’ve been following along you’ll realize that @media screen is what starts our query, and the min and max width attributes set the parameters. So with this in mind, you know how to call different style declarations for different viewing widths.Sometime a UI developer uses both device with and width.

Lets see the difference:-

The difference between these two here is that device width is going by the set width of your device, with any zoom type changes being ignored.

You can check example here to understand. Click Here

So far we have discussed about the syntax now its time to move to conditional things, the logical one:-

Logical Operator:-

Complex media queries using logical operators, including not, and, and only. The AND operator is used to combine multiple media query into a single one.

@media (min-width: 700px) and (orientation: landscape) { … }

The above media query will display only if minimum width is 700px and orientation is landscape.

We can also use comma separated logical operator like in below example:-

@media (min-width: 700px), handheld and (orientation: landscape) { … }

I hope this tutorial make sense and follow me on this blog regularly to get some more like this.

References:- https://developer.mozilla.org

%d bloggers like this: