Migrating to Google AMP

 

Copy the below code to your AMP Page…

<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<title>Learning Google AMP</title>
<link rel=”canonical” href=”link to non amp page” />
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Open-source framework for publishing content”,
“datePublished”: “2015-10-07T12:02:41Z”,
“image”: [
“logo.jpg”
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<style amp-custom>
body {
background-color: #0882EF;
text-align:center;
}
h1 {
font-family: sans-serif;
color: #FFFFFF;
padding-top:300px;
}
amp-img {
border: 5px solid #FFFFFF;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
</head>
<body>
<h1 style=”color:#0677FF”>Welcome to the mobile web</h1>
<amp-img src=”image.png” width=”320″ height=”75″></amp-img>
</body>
</html>

 

Copy the below code to your Standard Page…

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Non AMP Version</title>
<link rel=”amphtml” href=”link to amp page”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style>
body {
background-color: #0882EF;
text-align: center;
}
h1 {
font-family: sans-serif;
color: #FFFFFF;
padding-top: 300px;
}
img {
border: 5px solid #FFFFFF;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<img src=”image.png” width=”848″ height=”162″ alt=”Google AMP” />
</body>
</html>

5 reasons why you should learn Responsive Website Designing

According to Wiki, Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

In other words, a responsive website would change its alignment, by using HTML & CSS to resize, shrink, hide, enlarge or move the content, according to the device on which its viewed, in order to make the site look good on any screen.

Today, having a responsive website is essential for any business because of the several advantages it offers, & hence it becomes important for the students to pursue a web designing course that teaches responsive website design too.

Lets just take a look at the 5 most important reasons why you should learn responsive website designing –

Rising mobile usage

Rising mobile usage
Its becoming increasing difficult to spot a person without a smart phone today, & almost 60% of website traffic is coming through mobile devices. Mobile phones have become the prime gadget to access the web & so it only makes sense to make a website that will look good in the mobile device in order to target those massive number of audience.

Search-Engine-Ranking

Improved search engine rankings
A website is the most important marketing tool of modern companies today, with SEO (search engine optimization) proving to be extremely helpful in the website gaining more visitors & consequently more business. In recent times, Google has started to reward those websites that are responsive with higher rankings in their search engine results, thus underlining the importance of responsive web design in its own way.

social-media-optimization

Social media optimization
Social media is the current rage & almost 75% of social media consumption now happens on mobile devices. So when you are sharing links from social media sites like Facebook, Twitter, or Google Plus to your website, it is mandatory that your site is responsive in order to make it look good to view from the mobile device. So if your company has a social media presence and want to use the power of social sharing of your website’s content, build a responsive site.

user-experience-for-startups

Better user experience
There could be many business reasons to build a responsive website, but they all boil down to the objective of providing a better user experience for your visitors. If you have a responsive site, it means no pinching and zooming, no side scrolling to view the full site that doesn’t align properly on the phone screen of your visitors. Remember that a better user experience helps in reduced bounce rates, increased brand identity and improved conversion rates

Cloud computing devices

Future Scalability
 The best thing about a responsive website is that it is made to support even those devices and screens of different dimensions that would be made in future. Consider those gadgets in pipeline like the smart watches, and Google Glass, and various new devices being built for internet viewing; a responsive web design built today will work for them too.

We have just mentioned the most important reasons, but there is lot more to justify the prominence of responsive web designing, & we hope you have understood the significance of learning a web designing course that includes responsive site creation.

If you are looking to do an Advanced web designing course in Chennai which includes responsive web designing module, click here.

Top 25 Interview Questions for Web Designing

  1. What are the new elements in HTML5?
  2. What is the difference between “container” & “container-fluid” in bootstrap?
  3. How to create multi-column layouts using CSS?
  4. What is the difference “display:none” & “visibility:hidden” in CSS?
  5. What are the new form element types in HTML5?
  6. How would you differentiate “id” and “class” selector in CSS?
  7. How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?
  8. Describe what a “reset” CSS file does and how it’s useful.
  9. What are CSS sprites, and how you would implement them on a page or site?
  10. What are vendor prefixes?
  11. What is z-index attribute and how is it used? What is the default value of z-index?
  12. What are media-queries?
  13. What are the advantages and disadvantages of using a CSS framework such as Bootstrap?
  14. How many H1 tags can you have on a single web page? Does having more than make any difference?
  15. What are the different objects used in JavaScript?
  16. What is “this” keyword in JavaScript?
  17. What is a grid system?
  18. How many different media queries are used by the Bootstrap grid system by default?
  19. What is the use of document object model?
  20. What is the difference between == and === in JavaScript?
  21. Which is the function that is called to validate data in JavaScript?
  22. How do you focus a particular part of the HTML page in JavaScript?
  23. How is everything treated in HTML Document Object Model?
  24. What are regular expressions in JavaScript used for?
  25. What are the set of plug-ins available in jQuery UI?