Width of Standard Devices Used in css Media Queries.

In last post I have discussed that how to use css media queries to write css for different screen sizes. In this post we will discuss about screen sizes of some commonly used devices. So that will help you to write media queries for each device.

Width of Most commonly used devices is as follows

Device	Width	Height
iPhone 5	320	568
iPhone 3G and 4	320	480
iPad	768	1024
Google Nexus 7	600	905
Samsung Galaxy S2	320	533

Smart phones landscape: Apply css on when screen width is greater than 321px

@media only screen and (min-width : 321px) {
/* css  */
}

Smart phones Portrait: Apply css on when screen width is Less than 320px

@media only screen  and (max-width : 320px) {
/* css  */
}

iPads landscape: In iPads we can check the orientation of the device. So we can mention orientation in the query and the css will apply when the orientation is landscape.

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* css  */
}

iPads portrait: css will apply when the orientation of device is portrait.

@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)  
and (orientation : portrait) {
/* css  */
}

For small devices

@media all and (max-width: 240px) {
 /*  css  */
}

For Standard Desktop

@media all and (min-width: 1024px) and (max-wdth:1366px) {
 /*  css  */
}

For large Screens

@media all and (min-width: 1367px) {
 /*  css  */
}

Css Media Types And css Media Queries

When there was only monitors are available then the task of web designer is very easy. But now days there are a lot of devices are available in the market. And each device has different screen size and resolution. And it is a difficult task for a web designer to make a website that will look perfect on each device.

Suppose I am making a site on my screen according to 1320 resolution and 1300px width and I found that the site look nice on my screen. But if someone open it on small screen then what happen? The entire site will collapse. There can be scrolling on page or the content will be overflowing from site. Then the site looks very bad and that will not good for a designer.

For this css has define media types and you can write different css for different screens sizes and resolution. You can define css media queries in your style sheet and write css for different screens. We will cover syntax and example of css media queries. And also cover all the media types available in css.

Types of css media

All: Used for all devices.
Aural: used for speech and sound devices.
Print: used for all printers.
Braille: Used for paged braille printers.
Handheld: used for small device or handy devices.
Projection: used for projectors.
Screen: used for computer screens.
Tv: used for television devices.
Tty: used teletypes and terminals

How to use css Media queries.

There are two ways to use css media queries.

One is make separate css file for each screen size and import file on the basis of size. In this css media query is written on the html page.

1. In the following example if anyone open website on the screen width between 650px and 899px then the mediumcss file will be included in the html page.

<link rel='stylesheet' media='screen and (min-width: 650px) 
and (max-width: 899px)' href='css/mediumcss.css' />

2. In the following example if anyone open website on a screen having width less than 649px then smallcss will be included in the page.

<link rel='stylesheet' media='screen 
and (max-width: 649px)' href='css/smallcss.css' />

3. In the following example if anyone open website on screen having width greater than 900px then largecss will be included in the page.

<link rel='stylesheet' media='screen 
and (min-width: 900px)' href='css/largecss.css' />

The second way is make a single file of css and write media queries in that css file and define css for different screen sizes.

When the browser width is less than 518px the following css will apply to the li under menubar class.

@media all and (max-width: 518px) {
     .menuBar ul l
      {
        Width:200px;
        Padding:10px;
        display:block
      }
}

When the browser width will be between 519px and 698px then the following css will apply to li under menubar class.

@media all and (min-width: 519px) and (max-width: 698px) {
     .menuBar ul l
      {
         Width:200px;
         Padding:5px;
         display:block
      }
}

Now when the browser width will be between 699px and 999px then the following css will apply to li under menubar class.

@media all and (min-width: 699px) and (max-width: 999px) {
     .menuBar ul l
      {
        Width:120px;
        Padding:5px;
        Float :left
     }
}

Until the width of browser is greater than 1000px the following css will apply to the li under menu bar

@media all and (min-width: 1000px) {
       .menuBar ul l
        {
          Width:120px;
          Padding:5px;
          float :left
          background-image:url(‘abc.png’);
        }
}

I have defined few example you can put any number of media queries in your css to make your site more attractive and size compatible. And also you can define different media types as I have used all media types. And also you can define orientation in media queries like

@media (orientation:portrait) { ... }

References: http://www.w3.org/TR/css3-mediaqueries/
So this is all about media queries in css.

All Css | css3 Selectors

To apply css on elements there are different ways to select an element. The most uses way is class or id of element. But there are many selectors available by which an element can be selected and we can apply css to that element.

List of all css selectors

Selectors	Example	Description
*	*	Select all the elements
.ClassName	.test{ Color:red; }	This is the most common selector used in css in this select all the elements with the class name test.
#idofElelment	#test{ Color:red; }	Element selects with the id test
Element	div{ Color:red; }	Select all the div on the page.
Element , Element,	Div,span{ Color:red; }	Select all the div and span element on the page
Element Element	Div span{ Color:red; }	Select all the span elements inside div elements on the page.
Element> Element	Div > span{ Color:red; }	Select only child span element of div. Means it will only select span element that are direct child of div. as in the example show it will select only first span because it is direct child of div
Element+ Element	Div+span{ Color:red; }	Select all span elements that will come immediately after div element.
[attribute]	[title]{ Color:red; }	Select all the elements with title attribute.
[attribute=value]	[title=abc]{ }	Select all the elements having title=”abc”
[attribute~=value]	[title~=abc]{ }	Select all the elements having word abc in title
[attribute\|=value]	[title\|=ab]{ }	Select all the elements whose title is starting with ab
:link	a : link{ }	Select all the unvisited link
:visited	a : visited { }	Select all the visited link
:active	a : active { }	Select all the active link
:hover	Div:hover{ }	Select the element on mouseover it
:focus	input:focus{ }	Select the element when element has focus
:first-letter	Span:first-letter{ }	Select the first letter of every span element on page.
:first-line	Span:first- line { }	Select the first line of every span element on page.
:first-child	Span:first- child { }	Select all span elements on page which are the first child of its parent.
:before	Span: before { content:”this is test "; }	Before is use to add some content. It will add “this is test” before every span element on the page.
:after	Span: after { content:”this is test "; }	After is use to add some content. It will add “this is test” after every span element on the page.

These all are the css 1 and css2 selectors. Now following is the list of css3 selectors

Selectors	Example	Description
element1~element2	Div~span	Select all the span elements that will come after the div element.
[attribute^=value]	div[title^="main"]	Select all div elements whose title starts with main .
[attribute$=value]	div[title$="main"]	Select all div elements whose title value ends with main .
[attribute*=value]	div[title*="main"]	Select all div elements whose title contains main.
:first-of-type	Span::first-of-type	Select every span element that is the first child of its parent
:last-of-type	Span: last-of-type	Select every span element that is the last child of its parent
:only-of-type	Span: only-of-type	Select all the span elements that is the only element of its parent. Means if the div have two child span then they will not be selected but if the div has one child span then it will be selected. Means there can be other child elements but the span should be one.
:only-child	Span :only-child	Select every the span element that is the only child of its parent. Means if the parent has only one child and that should be span.
:nth-child(n)	span:nth-child(3)	Select every span element that is the third child of their parent.
:nth-last-child(n)	span :nth-last-child (3)	Select every span element that is the third child of its parent but in this child is count from last child. Mean select the third last child span of its parent.
:nth-of-type(n)	span:nth-of-type(3)	Select every span element that is the third span element of its parent.
:nth-last-of-type(n)	span: last-of-type(3)	Select every span element that is third span element from its parent. But in this counting is start from last child. Means select last third span of its parent.
:last-child	Span: last-child	Select every span element that is the last child of its parent.
:root	:root	Select the root of the document.
:empty	div :empty	Select every div that has no children.
:target	.test:target	Select the current active link element in the element that has test class.
:enabled	Input: enabled	Select all enabled input elements on the page
:disabled	input :disabled	Select all the disabled input elements on the page.
:checked	input :checked	Select all the checked input elements on the page.
:not(selector)	:not(span)	Select all the elements on the page except span.
::selection	::selection	Select the area that is selected by use.

Standard Fonts supported by all browser

Everyone wants to make his/her website attractive. For making attractive website the font style also matters that which font you are using on your website. You want to use new fonts on your website but there is a problem with that every font is not supported by all browsers. Only some fonts are there which are supported by all browser and the list of fonts are given below which are supported by all the browsers.

Browser uses the fonts that are installed on your machine. So if a visitor of your site wants to see your site as you made he or she has to install all the fonts which you have use in your site. But css also provide a solution to this problem with font face property. Which is not a difficult task. But if you don’t want to use that property I advise you to use standard fonts that are available on all machines. Because that will not spoil your site.

List of standards fonts supported by all browsers.

In the following list each font is written in three colors. Because name of window fonts are different from Mac fonts name. So we are showing each font name in three colors one is for generic font name second one is for window font name and third one is for Mac font name.

Window Font / Mac Font / Font family

Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget,, sans-serif
Georgia1, Georgia,, serif
Courier New, Courier New,, monospace
Impact, Impact5, Charcoal6,, sans-serif
Lucida Console, Monaco5,, monospace
Lucida Sans Unicode, Lucida Grande,, sans-serif
Palatino Linotype, Book Antiqua3, Palatino,, serif
Tahoma, Geneva,, sans-serif
Times New Roman, Times New Roman, Times,, serif
Trebuchet MS1, Trebuchet MS,, sans-serif
Verdana, Verdana, Geneva,, sans-serif

What is Rss feed submission?

Rss (Rich Site Summary) and some is calling Really Simple Syndication is a format or a way to expose your content on the web or others. Many sites make their rss feed and readers who wants can subscribe the rss feed and they can also share it on web. Data in a rss Is known as feed. And it contains all the updates of a website, video, images, headings, links etc.

Importance of Rss feed and its submission

Rss feed has your all website or blog posts and link to each of them. And submitting them to a website means that website will index your all blogposts of all pages of your website. And that will rapidly increase the page rank of your website.

There are many sites where you can submit your rss feed and they will index your all pages. List of site for rss submission is also available on think lala.

The people who subscribe your rss feed means they like your blog and the wants regular updates from your blog and they really like to read your posts. So that will read your blog regularly and help to maintain the traffic on your blog or site. And also it tells the reputation of your blog. Which will help you in writing further.

How to create rss feed

Rss feed is a well structured xml file. That has some standards. Rss feed can be created manually or can via a software. There are many online rss feed creator available. If you want to create the feed manually then follow these steps.

Step 1 create an empty xml file. For this you can use simple notepad or any xml editor.

Step 2 starting the xml file with
<?xml version="1.0"?>

Step 3 Add channel tag
<rss version="2.0">
<channel>

Step 4 now its time to add information about the rss feed like title, description, language etc
<title>Test Blog Feed</title>
<link>http://thisistest.com</link>
<description>Latest seo information</description>
<language>en-us</language>

Step 5 Now you can add items to your rss feed. You can add as many items in your rss feed. Every item has a date and a link and also has description.
<item>
<title>First article</title>
<link>http://www. thisistest.in/2012/09/what-is-directory-submission.html</link>
<guide>http://www. thisistest.in/2012/09/what-is-directory-submission.html</guide>
<description>This thisistest information about directory submission<description>
</item>

Step 6 close main tag
</channel>
</rss>

Step 7 Your rss feed is ready now you can validate your rss feed. There are many online feed validate tools available
http://validator.w3.org/feed/

So it is necessary to have a rss feed for your site or blog. Because this is the only way that will tell your readers about the all the updates on your site.

List of some sites where you can submit rss feed

www.technorati.com
www.rss-verzeichnis.de/anmelden.php
www.weblogs.com/
www.feedage.com
www.rssmountain.com

What is press release?

In simple terms press release means write a message to media members or to a news group. Or to announce something in written to media or press is known as press release

Importance of press release in seo

Now the question is what is the role of press release in seo. The press release is very useful tool for seo. Because a good press release can give you a number of back links instantly. Some people says that press release is old fashion and now it is not working.

But is not right, press release plays very important role in seo. Press release is an important tool to tell other people about your company and product . And when you submit a press release the search engine index that news and if you give any link to your site in that news then your site will be get a backlink and thus more people will visit your site and site will be indexed also by search engine.

But all it depends on how you write a press release. If you write an seo friendly press release. Then this will be help to your to get traffic on your site.

Some tips for how to write a press release.

Keywords: First of all you should choose your keywords according to your product or company or website. This is very important task. Because all search is based on the keywords and the user enter keywords for search and search engine will find the result on the basis of keywords.

For this keyword research should used. You should use appropriate keywords related to your product and which are more searched by audience. There are many online keyword research tools available. You can use any of them.

The press release has the following parts.

Heading
Subheading or Summary
Body
Company Bio
Contact Information

Heading: Heading is the main part of a press release. Search engine shows the headline in the search when a search is made so be be specific about your heading. And use your primary keywords in the heading. Because search engine will first find the heading and if he will find the appropriate keyword then your news will be put in the result. And user will only click on your heading if your heading is interesting and easily understandable, So make an good and interesting headline.

Subheading or Summary: summary is second part of press release. This contains short introductions about your news. This should also contain keywords and not so long. This should be not exceed than 240 characters. Be precise.

Body: Write the detail of your news in the body phrase of your press release. The body should contain at least 300 words. And and 3-4 keyword phrases.

Company Bio : This phrase should not so long it should be almost 100 to 125 words . In this phrase you will tell about your company , What is your company , What your company does etc.

Contact Information: In this is section contact information is given mailing address ,email id etc .

Now you can submit your press release. List of some sites is given below where you can submit press release.

Press release submit site list
http://www.24-7pressrelease.com/
http://ecommwire.com/
http://www.npr.org/
http://www.directionsmag.com
http://news.thomasnet.com/

Think Lala

Labels