Jul 29

Adaptive Web Design

Adaptive Web Design

“Adaptive web design “to mean adapt your website for specified sizes, I recommended this for existing websites. Site with lots of users and lacking the resources to start from the ground up responsively. But Im not saying this only for existing websites, It is wonderful technology to make our site to responsive.

  • media queries
  • CSS
  • javascript or jquery

Layout:

max-width: 0px = css.css
max-width: 480px = 480.css
max-width: 760px = 720.css
max-width: 980px = 960.css
max-width: 1280px = 1200.css
max-width:1600px = 1560.css
max-width:1940px = 1920.css
max-width:2540px = 2520.css

Responsive Web Design allows your websites to fit the screen, This is the time for smartphones and iPads, all browsing websites is not limited to standard computers. Now people are browsing websites through mobiles and their smartphones and tablets.

Fluid Layouts

Fluid or elastic layouts allow your site’s content to grow and shrink to fit the screen,

Not all layouts work at all sizes.

Media Queries for Responsive Websites

Media queries are takes a design from fluid to truly responsive. Continue reading

Jul 29

Responsive Vs Adaptive Web Design

Responsive Web Design

Responsive Web Design the better practise with 960 Grid system and media queries, Now a day’s all media system supported with CSS3 (media query), so we don’t need to worry about that. And for the responsive website you need to use images with resizable technology.Better for this use gird system to automatically resize your images and the overall grid to fit your browser viewport.

  • fluid grids
  • fluid images
  • media queries

Layout : fully Responsible with all screens

Adaptive Web Design

“Adaptive web design “to mean adapt your website for specified sizes, I recommended this for existing websites. Site with lots of users and lacking the resources to start from the ground up responsively. But Im not saying this only for existing websites, It is wonderful technology to make our site to responsive.

  • media queries
  • CSS
  • javascript or jquery

Layout:
max-width: 0px = css.css

max-width: 480px = 480.css

max-width: 760px = 720.css

max-width: 980px = 960.css

max-width: 1280px = 1200.css

max-width:1600px = 1560.css

max-width:1940px = 1920.css

max-width:2540px = 2520.css
To Know More about Adaptive Design with Media Queries

Jul 29

Media Queries for Adaptive to Responsive Websites

Responsive Web Design

Responsive Web Design allows your websites to fit the screen, This is the time for smartphones and iPads, all browsing websites is not limited to standard computers. Now people are browsing websites through mobiles and their smartphones and tablets.

Fluid Layouts

Fluid or elastic layouts allow your site’s content to grow and shrink to fit the screen,

Not all layouts work at all sizes.

Media Queries for Responsive Websites

Media queries are takes a design from fluid to truly responsive. we can use media query is attribute of <link .../> style sheet, also CSS3 introduced the concept of using a query’s as styles from same embedded external style sheet.

Here the simple Query used in tag

Here Query CSS tag for full Media Query website like this,


Media queries allows cascading style sheets to check for the conditions of particular media features when utilized by a device. This allows for a just one style sheet to contain multiple styles and allow for responsive layouts.Separate styles for multiple devices can be stored in just one single style sheet.The demo for the responsive design….. just resize browser with this pagesame style sheet Media queries like this,



With the release of devices such as the iPad, and a recent increase in the reputation of browsing the web on your mobile phone, 2012 is almost certainly going to see the creation of many more responsive web designs. By utilising this simple technique, it is possible to design a more compatible, more ergonomic website that will look great and function brilliantly on any device.

The prospective that media queries hold is tremendous, and with their help, web developers are now far better equipped for the future. If there was ever a good time to learn more on media queries and how to utilise them effectively, that time is now.

Jul 29

Latest Website Design Trends 2012

We are all readying to welcome the New year, we also have to welcome future designs and designs in web sites. website design encounters new designs annually and 2012 is not going to be an exemption.We cannot figure out the actual designs, we can estimate what all changes can perhaps happen in web style.

Responsive and adaptive design

This is the time for smartphones and iPads, all browsing websites is not limited to standard computers. Now people are browsing websites through mobiles and their smartphones and tablets.Because the method being used to perspective a web page is not fixed, web designers and developers are readying to create responsive website design that adapts with different types of mediums. This new website trend has begin to show up in the last few months of 2011, it will be rock all over the place in time of this world.

Fixed-Position Navigation

Another new trend in website design that fixed navigation. The primary purpose of this feature would be to interact with the customers in a better manner and increases user experience. This also have eye catching designs visual.

HTML5 & CSS3

These are the latest versions of HTML and CSS, respectively, Its takes our website to next level. HTML5 allows you to add some awesome features to our website design and give a distinctive advantage over competitors. An HTML5 websites to be more flexible and will load quickly. CSS3 also have awesome features like box-shadow, border-radius, transitions, etc., with using CSS3, we can make a creatively attractive web style easily.

Single page designs

single page websites are one of the latest trends in website design. To increase user experience

Single page design is more appropriate for smaller websites, where most of the information can be accessed from the Home page itself.

Magazine layouts

Infotainment internet sites can look great in magazine layout web design. Many web developers are going towards the magazine layout, where content is set up out on a single webpage in an grouped style. It gives the visitor an opportunity to discover as fascinated. This structure will attract anyone who loves examining a magazine or newspaper, without having to switch internet sites.

Focus on Simplicity

Ultimately the goal of any website is to get your visitors from point A to B as quickly as possible. The most of popular design trends stemming from minimalism. This idea got great success.

Jul 29

Ways to Make Money with Your Website / ads / internet

In Money Making with Website have different way to make money. To increase your website traffic or CRT (click through rate) will help you make more money, AdSense is a good way to monetize your traffic, also it is easy to implement in money making.

PPC Advertising Networks

PPC (pay per click) is an online advertising depend on general website traffic, where advertisers pay the publisher when the ad is clicked. PPC ads will display an advertisement when a keyword suits an advertiser’s in keyword list, or when a articles site shows related contents. Such advertisements are called sponsored ads.

Flat Rate PPC

Flat Rate PPC is where the advertiser recognize upon a set fixed money that will be paid for each click, The advertiser has a rate that determines the money per click, These various amounts are often relevant to the articles on websites, with articles that usually appeals to more useful readers having an improved CPC than articles that appeals to less useful visitors.

Bid-based PPC

Bid-based PPC is where the advertiser symptoms a deal that allows them to contend against other promoters in a personal retail put by a publisher or, more generally, an advertising network. Each advertiser shows the coordinator of the most that he or she is willing to pay for a given ad area, usually using on the internet resources to do so. The retail performs out in an computerized design each time a visitor activates the ad spot. Advertisers pay for each click they receive, with the actual amount paid based on the amount bid.
List of popular PPC advertising networks:

CPM Advertising Networks

CPM advertising systems work very much as PPC systems, except that you get compensated according to the variety of impressions (i.e., web page views) that the ads shown on your website will generate.can also refer to advertisements in Email advertisingAn impact identifies the example when an offer downloaded by a person when looking at a website. Just one website may contain several advertising and in such cases a individual pageview would outcome lead to one impact for each offer shown to that person. In order to depend the opinions provided as perfectly as possible and prevent scams, an ad hosting server may leave out certain non-qualifying actions such as page-refreshes or other person actions from keeping track of as opinions. When advertising rates are described as CPM or CPI, this is the amount paid for every million determining opinions provided.CPM paid differ with the networks, the position of the ad. Higher the CPM amount (because they have accessibility more advertisers). put the ad to the top of the site (header) for first downloading, this the greater the CPM. The larger the size (in conditions of pixels), the greater the CPM.You can get $5 per 500 impressions (more in some special cases).CPM well work in higher page view website like online forums, Blog, TV magazinesList of popular CPM advertising networks:

Direct Banner Advertising

You can sell your advertising space directly to the advertisers. you can determine your own for the spaces, if have any middleman just cut out the middleman commissions with determined with your own rate.

Text Link Ads

Make more money by selling text based ads. You can get and sell text links through Text link marketplaces networks, it also makes ‘Back Links’ for the website in SEO, so many people likes for promote for web search engine rank. so only its still popular.List of popular Text Link Ads Networks:

RSS Feed Ads

RSS technology is Quick adoption with internet users, it have billions of user. RSS feed has CPM based advertising on your feeds. Ads can be paid in two ways: by click, or by impression.List of popular Text Link Ads Networks:

Jul 26

.htaccess – Gzip and Expires and a Cache-Control to your website site for faster loading

To speed up my site and save bandwidth, I use .htaccess file to gzip my text based files and optimize cache HTTP headers.

Turn on compression

mod_gzip is an external expansion method for Apache that allows you to quickly constrict your information before you send them to the users browsers.

If your in linex hosting and it has mod_gzip module enabled, the easy way to compress is to add the following code to your .htaccess file:

or, DEFLATE method

Add an Expires and a Cache-Control Header

Website designs are getting rich and fast, which means more scripts, CSS, images, and Flash in the site. A first-time visitor to your web page makes HTTP requests, but by using the Expires header you make those elements cacheable. This prevents unnecessary HTTP requests and Bandwidth. Expires headers are most often used with images, but they should be used on all elements including JS, CSS, and Flash elements.

To set your Expires headers add these lines to your .htaccess:

To set Cache-Control headers add these lines to your .htaccess:

If you can’t change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top

Turn off ETags

By removing the ETag, you disable caches and browsers from being able to validate information, so they are forced to depend on your Cache-Control and Comes to an end headlines.
Entity meta data (ETags) are a process to check for a modern edition of a cached file.

Add these lines to .htaccess:

Remove Last-Modified header

If you remove the Last-Modified and ETag, you will completely get rid of If-Modified-Since and If-None-Match needs and their 304 Not Customized responses, so a page file will remain cached without verifying for up-dates until the Comes to an end Expires header indicates new content is updated.

Add these lines to .htaccess:

Jul 26

Speeding Up Your Web Site and Reduce Loading Time

Simple Steps to Decrease Website Loading Time

Minimize HTTP Requests

Most of this time is taken for downloading all the components in the page : images, CSS, scripts, Flash, etc. Reducing the number of components to Reduce number of Requests in page.

Combined files

This is the a way to reduce the number of HTTP requests by combining all stylesheets, scripts

So this:

Becomes this:

Image maps

Combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests.

Use CSS Background Position:

Put Stylesheets at the Top

Placing stylesheets in the TOP allows the page to load progressively.Front-end developers care about performance and page want to load progressively, that is, we want the browser to display whatever content it has as soon as possible.In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.In our case the HTML web page is the progress indicator! When the page loads progressively logo, than body elements from top to bottem. all are visual reviews for the users who is waiting for the site. This helps the overall user experience.The problem with placing CSS near the bottom of the page is that it discourages progressive loading in browsers. These browsers reduces progressive rendering and it to redraw elements of the page. The user is trapped looking at a empty white web page.Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

Put Scripts at the Bottom

The issue due to scripts is that they makes parallel download. That browsers download elements in parallel. If you provide your images from several hostnames, you can get more than two downloads available to happen in similar. While a script is loading, however, the browser won’t begin any other downloads available, even on different hostnames.In some circumstances it’s not simple to switch scripts to the end. If, for example, the script uses document.write to place aspect of the page’s content, it can’t be shifted lower in the site. There might also be scoping concerns. In many situations, there are tips on how to workaround these situations.An substitute recommendation that often comes up is to use postponed programs. The DEFER credit indicates that the program does not contain papers.write, and is an idea to surfers that they can proceed making. Unfortunately, Chrome doesn’t assistance the DEFER credit. In Online Internet explorer, the program may be postponed, but not as much as preferred. If a program can be postponed, it can also be shifted to the end of the site. That will make your websites fill more quickly.

Make JavaScript and CSS External

Should JavaScript and CSS be contained in external files is generally better.Using external files usually creates more quick loading because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML files get downloadable every time the pages is loaded. This reduces the number of HTTP requests that are required, but improves the size of the HTML papers. On the other hand, if the JavaScript and CSS are in external cached by the browser.

Avoid Redirects
Types of Redirects:
  • 300 Multiple Choices (based on content-Type)
  • 301 Moved permanently
  • 302 Moved Temporarily
  • 303
  • 304 Not Modified
  • 305 Use Proxy
  • 306 (no longer used)

The browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers. The body of the response is typically empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be.

There are other ways to automatically redirect users to a different URL. The meta refresh tag included in the head of an HTML document redirects the after the number of seconds specified in the content attribute:

JavaScript and Jquiry also used to perform redirects

Avoid Empty Image src
Preload Images

By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.By preloading elements you can take benefits of reducing time of loading in browser. The preloaded files you will need in future. This way when the person trips the next web page, you could have most of the elements already in the storage cache and your web page will fill much more quickly for the person.

Preload Using CSS :

Preload Using Jquiry :

.htaccess – gzip and cache your site for faster loading and bandwidth saving

To speed up my site and save bandwidth, I use .htaccess file to gzip my text based files and optimize cache HTTP headers.

  • Turn on compression
  • Add an Expires and A Cache-Control Header
  • Turn off ETags
  • Remove Last-Modified header