Category: Web Development

An Overview of CSS3 Media Queries

The rapid use of Smart phones and mobile devices have changed the way information is processed and made available to the web audience. The surprising growth of such devices is leapfrogging the traditional desktops, making users view a website on mobile phones and tablet devices anytime, anywhere.

When talking about such web designs that should compliment the various dimensions of different devices, it is difficult not to mention about the challenges that web designers face while creating them. CSS3 media queries are a great way to overcome such challenges and making web designs look amazing, while providing a pleasurable experience to each type of user.

As a part of CSS3 specification, these media queries determine the role of the media and control how styling should be applied to them. They allow web designers target different styles based on multiple specifications of a device such as screen size, orientation, color and so on.

This article provides you an overview of media queries that will help designers kick start their multi screen website development endeavors.

CSS3 Media Queries

CSS 2.1 supports several media types based on “media type” declarations. The following mark up clearly explains about how media types can be used to specify conditional style sheets.

<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

When placed correctly, the site will load a different stylesheet from the default sheet, when set in a print preview mode. The feature is useful but often remain underutilized because of its incapability to provide valuable contextual clues for developing a responsive website. As only 10 media types are being used by the media specifications, browsers often fail to adapt complete media specifications.

The “media” attribute plays a significant role in determining various media related element of a web page. It helps you specify media type on the basis of screen, print and more and also let you incorporate various expressions that include width, height, orientation, screen resolution etc., of the device being used. Here, we are giving you an example of a device that’s media type is screen and resolution is 720 pixels.

<link rel="stylesheet" media="screen and (min-width: 720px)" href="main.css" />

It’s the media query that determines the overall designing process. The left side highlights those properties of a design that needs to be tested, and gives an option ranging from min-max. The right is the actual value of the tested property. If the browser and the mobile having 720 pixels of screen width, the style.css will be implemented by the webmasters. This way, it can be said that media queries an indeed useful to give developers an insight about the context to develop web pages that are truly responsive.

Ways to Define Media Queries

A simple media query in HTML can be written like this:

<link rel="stylesheet" media="width" ref="abc.css" />

In the above example, we have stated that for width media query, abc.css style sheet needs to be used.

The same can also be written in import form:

@import url(abz.css) print; 

In cases where no media type is given or ‘all’ is specified, the styling would be done like this:

<link rel="stylesheet" href="abc.css" />
<link rel="stylesheet" media="all" ref="abc.css" />

One can also combine the media queries to create a complex structure:

<link rel="stylesheet" media="width, projection" href="abc.css" />

this can also be written like this:

@media width, projection { … }

Using Media Queries for Multiple and Single Style Sheets

Creating multiple style sheets to suit the requirements of different device screens and sizes can be daunting. However, if you still want to create multiple style sheets, this is how you can do so:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 800px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

To boost the productivity, it is recommended to incorporate multiple style sheets created for different browsers and screen into a common one. Here’s how you can go through it.

@media screen and (min-width: 800px) {
  .eighthundredminwidthclass {
    width: 35%;
    Float: right;
 } 
}
and
@media screen and (max-width: 800px) {
    .eighthundredmaxwidth {
    clear: both;
    font-size: 1.5em;
    }
}

You must have noticed the use of max-width in the above and min-width on the below examples. It is important to know the difference between the two. In the case of desktop, it is easy to understand. Min-width and max-width refer to the size of the browser viewport, while max-device-width and min-device-width are applied for hand held devices.

Conclusion

CSS3 media queries are the heart of a responsive web design, therefore, should be used logically. It’s about presenting an information that meets the demands of both web browsers and hand held devices.

CakePHP- What Makes it the #1 Choice for Large Scale Web App Development

The rapidly growing success and popularity of PHP development has given birth to numerous frameworks which have been effectively utilized for developing web services and solutions with a difference. CakePHP is one such PHP framework, which is open source in nature and comes loaded with a set of libraries for the web programming professionals. Today, in this post, I will be looking at some of the most remarkable features of CakePHP which have made it the first preference of developers who are looking ahead to develop large scale web applications using PHP. So, let me walk you through the must-know features of CakePHP.

1. Complete Adherence to the MVC Pattern

As one of the most critical models followed by CakePHP, MVC helps in saving data and connecting multiple queries into a single database. MVC pattern also allows you to update, delete, insert and read the model class in addition to viewing the growth of project. Since large scale websites and web applications need to have a good separation of logic from the presentation, it is the compatibility with the MVC model that makes CakePHP the right fit for developers.

2. Does NOT Require any Configuration

Since CakePHP does not include any complicated XML files, it is quite easy to get started with web development. With no configuration required for CakePHP, you just need to set up your database and head on with development of your web application or website. This saves a lot of your precious time that is otherwise invested in configuring the software using multiple steps.

3. Code Reusability is a Major Plus

As a web programmer working on the CakePHP framework will offer you the freedom of using pre-written code snippets in different web development projects. That means, instead of focusing on writing codes, you can now find time to concentrate on the creative or logical aspect of your web project. Code snippets can be easily fetched from different sources and conveniently integrated with ongoing website/app development projects.

4. A Wide Range of Built-in Features

In CakePHP, a majority of features which are required for building an outstanding website/app are already built-in. Whether it is the database access, authentication, validation or translations; everything is being impressively packed in this robust MVC compatible framework. With everything available by default, you will find more time to look into the specific requirements of your clients with a guaranteed fastest turnaround time.

5. Fully Compatible with the ORM (Object Relational Mapping) Technique

CakePHP development is completely compatible with the ORM technique. That means, all the data is being stored in the form of tables and later showcased as classes. Hence, relationship amongst different tables is being defined using these classes. Additionally, both validation and callback definitions can be easily predefined with the CakePHP framework.

6. Equipped with the CRUD (Create, Read, Update, Delete) Functionality

For easy data management, CakePHP framework has been loaded with the CRUD (Create, Read, Update, Delete) functionality. In other words, you will be able to create, read, update and delete multiple entities within the web development system. It is interesting to know that a majority of data management issues can be easily resolved by mere implementation of CRUD. With this functionality already existing in the CakePHP framework, you can go ahead with building cost-effective and effectual websites and web applications.

7. Quick Web Development is Guaranteed with CakePHP Framework

The numerous built-in features of CakePHP allow developers to build prototypes for their varied clients in a less time-consuming way. These features also create room for rapid web development, allowing you to build applications within the assigned timeframe, thereby avoiding any delays.

8. Completely Safe and Secure

With specific tools available for input validation, form tampering protection and prevention of XSS, CSRF protection and Form tampering, you can find it convenient to build safe and secured web applications for your esteemed clients.

9. Free and Flexible Licensing

Just like a majority of other PHP frameworks, even CakePHP is being widely used due to its free and flexible licensing. As an easy to install framework, CakePHP has free licensing, making it one of the best options for development of complex commercial applications.

10. Supported by an Active Community of Developers

Having chosen CakePHP framework, you can rest assured about receiving quick and accurate answers to all your queries regarding the correct usage of this widely used PHP framework. With the active and friendly community of developers ready to listen and answer your questions, using CakePHP framework would become a complete breeze.

Conclusion

So, if you are planning to build a large-scale application that is robust and well-structured, nothing can beat the CakePHP framework. Here’s hoping the aforementioned pointers would have encouraged you to use the framework right away.