Ways to detect user device using Media Queries

1. Briefly describe how CSS media queries can be used to modify the content and size of an html document based on the size of the browser. For example, in a nut-shell how is the CSS working that Lee Brimelow uses in his tutorial?

With all the different devices being used today to access the web, media queries can tailor online content to adjust to specific media outputs.

In Lee Brimelow’s video he shows us how to create a media query using the Media Query menu in Dreamweaver CS5. A text editor such as Notepad will work just as well. In a nutshell, a media query contains the media type, along with an expression that describes a feature of the media, such as width and height. Here is the syntax:

<link href="css/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 320px)" />

In the above example, the CSS file is named phone.css. You can change the CSS file name to fit the scope of the site design. You can also adjust the resolution depending on the size of the device. In this example the phone.css style sheet is used to make the images not appear if the device is under a certain size. The syntax will be similar to what is below.

#releases .record img {
   
    display:none; 
}
   

Media queries can do a lot more than measure width. Other types of media queries include:

•    Dimensions
•    Orientation / Aspect Ratio
•    Color

Not all queries are supported on all devices. For instance, the orientation queries are not supported on the iPhone, but the width queries are.

2.What are some concerns that developers need to take into account when creating a web-based application to be viewed on variety of browsers and mobile devices?

When I first started designing web sites, I had to think about screen resolution, using web friendly fonts, resizing images to the correct web resolution, and working around browser/code incompatibility issues. Now we must think about developing for a much wider range of web-based applications for a variety of browsers and mobile devices: Here are a few points to consider:

•    Device type you want to support, along with the screen resolution, user requirements, development tools available, and device limitations such as memory and storage.
•    UI design. Mobile devices are going to require a simpler UI design due to battery life, memory, security, network bandwidth, and screen resolution constraints.


3. Give a few code snippets or brief description of other ways, besides CSS alone that we can detect the browser width and the devices that a page is viewed on. You don’t have to know how to code so that anything actually works. Just give an educated example of another solution besides, or in addition to, CSS. This may be by using JavaScript, ASP, PHP, jQuery, or HTML Meta tags, to name a few possibilities.

Other ways to detect browser width in addition to CSS include:

•    The HTML Meta tag:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

•     Jquery:

$(window).width();   // returns width of browser viewport 
$(document).width(); // returns width of HTML document

JavaScript can also be used to detect browser width by responding to CSS3 media query state changes. This can be accomplished with an if/else statement. If width is at least say 400px, else window is less than 400px for example.

Project 1

a) What do you think will be the best method for including JQuery in your web application?

jQuery has many awesome benefits. Its functionality is much cleaner making the load times for web pages faster, than web pages that use applications such as Flash. jQuery also makes it easier to play with the DOM, add effects and seamlessly execute Ajax requests, and it is free open source software. One thing is for sure; jQuery is here to stay because major corporations such as Microsoft and Google use it.

One way to include jQuery in your site design is to include the <script> element below, which will install jQuery's library into your Web page so you don't have to download it.

<script type="text"/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Another way to include the jQuery library is to use the Google CDN. Since Google hosts several open sourced libraries on its CDN, you benefit from Google's reliable infrastructure and speed. Here is one of the paths you can use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>

Some of benefits of jQuery are:

• Cross-browser compatibility
• Better user experience - don't have to download Flash player
• Easier implementation for Web Developers
• Smaller files, faster load times
• Simplifies AJAX
• Web pages will display even if JavaScript is disabled
• Large supportive helpful community of experts

b) In what instances can you imagine it being better to code your own JavaScript rather than use a code library like JQuery?

There may be some instances where you may not want to use the jQuery library. For instance, if you want a specific effect done a certain way, it may be beneficial to code it yourself. Another example may be when using the canvas element in HTML5. Knowing some JavaScript can help you better understand how the canvas element works at creating interactive websites, especially games. Even though jQuery offers a huge wealth of resources that make developing a site far less time consuming, understanding JavaScript will help you to better understand the nuts and bolts of the site design.

The more you understand about jQuery and JavaScript the better. I look forward to furthering my skills and using my knowledge to create interesting, interactive websites.