Skip to main content

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
Post a Comment

AMP Vs Responsive Web Design-Speed Vs Flexibility

WHAT IS RESPONSIVE WEB DESIGN?
Responsive web design can be achieved using CSS3 media queries. Media queries allow web pages to use different CSS styles based on a user’s browser width. So according to mobile device width, one can easily write logical CSS media queries to make them compatible with different mobile devices. Regarding AMP Vs Responsive Web Design, Responsive Web Design focused on flexibility. Moreover, we can’t forget Google to get most of the business via a search engine. Now a day, Google is the topmost search engine. Google gives a lot of importance to page speed of website to improve the user experience. The majority of people are still using websites on mobile devices as opposed to mobile applications. Obviously, there is a specific audience who uses iOS apps and Android apps for eCommerce portals and others.
Google introduce mobile-friendly feature when they show a result for any search term. So whenever your website list in Google searches result, you can see a label of Mobile Friendly. 90% of websites are mobile friendly, therefore, Google comes up with AMP concept to create mobile-friendly pages which are light weighted and loads quickly in a mobile device.
WHAT IS AMP?
AMP stands for Accelerated Mobile Pages is an open source initiative by Google. It’s a web framework designed to create fast loading mobile-friendly pages. Furthermore, It uses a wide range of optimized techniques to speed up the loading time of web page in a mobile device. In addition, you do not need to design or develop your existing website again to implement AMP. You can easily implement AMP in your existing website without changing any design. That’s the beauty of AMP concept. Responsive Web Design while AMP focused on speed.
What AMP consists of
  • AMP HTML
  • AMP JS
  • Google AMP Cache

AMP has 2 primary objectives

  • Improve user experience on mobile devices
  • distribute content more easily
WHY AMP IS FASTER
  • Lazy loading
  • Extensive use of preconnect
  • All async JavaScript
  • Inline style sheets
  • Instant loading
  • Google CDN
  • Own JS Engine
AMP is a subset of HTML and it has been criticized for the same. However, AMP is not a replacement for responsive web design. AMP is specifically designed to increase user experience by creating fast loading web pages for mobile devices.
AMP VS RESPONSIVE WEB DESIGN
AMP
  • Web framework
  • Can work with an existing website
  • Can only work with static content
  • Focused on speed

Responsive Web Design

  • CSS3 media queries
  • Replace current website
  • Can be used for any website
  • Focused on flexibility
DOES MY WEBSITE NEEDS AMP?
It depends! First of all, if you are publishing content and targeting mobile users than the answer is YES. AMP will provide a better user experience and faster loading time for your web page compare to anyone else. However, AMP is not advised to those websites having web forms and JavaScript features. You can validate AMP compatible pages using https://validator.ampproject.org/
Get in touch with me for either responsive web design or AMP implementation.

Comments

Post a Comment

Comment

Popular posts from this blog

How to Password Protect a Directory on Your Website

Password protecting a directory on your site is actually fairly easy. Webmasters typically want to protect a directory if they have information that they want to make available only to a selected number of people. This guide teaches how you can make a folder on  your website  accessible only to people with the appropriate password. If Your Web Host Has a Control Panel Before you dive into the task of manually password-protecting a directory using Apache's built-in facilities, you might want to check out your web host's control panel to see if they already provide the facility for protecting directories. In my experience, many commercial web hosts already provide an easy way for you to password-protect your directories. If such facility is already available, it's probably best to use it since it will save you time, particularly if you are not familiar with shell command lines and editing of .htaccess files. Otherwise, read on. System Requirements ...
2 comments
Read more

Apple iOS 10.2 Is Now Available: What Is Included In The Update?

Apple has released iOS 10.2 to the general public today. The last time that Apple launched an iOS update was on October 31st with iOS 10.1.1. On that same day, Apple released the developer preview of iOS 10.2. To work out the kinks, Apple iOS 10.2 went through seven beta tests before the public release. This update includes several major features and many bug fixes. You can install iOS 10.2 by connecting your device to iTunes or downloading it by going to  Settings > General > Software Update . The iOS 10.2 update is available for the following devices: iPhone 5 and later, iPad 4th generation and later and iPod touch 6th generation and later. What Is Included In The Update? iOS 10.2 has several features worth pointing out: - New TV App Apple released a new TV app that provides recommendations for new movies and TV shows in the "Watch Now" section and to discover new apps and new iTunes releases in the "Store" section. The "Up Next" ...
2 comments
Read more

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
Post a Comment
Read more