Google Brings Material Design To Websites; Launches Material Design Lite For Web Designers


Google Material Design by Nitya tripathi

Google has been putting a lot of focus and efforts in promoting their Material Design concept. Be it apps, maps or anything; the tech giant is trying to leave no stone unturned in making Material Design ubiquitous across devices and platforms. Remember how Google materialized Google I/O 2015?

Today, taking it to the next level, Google launched Material Design Lite – a lightweight Material Design framework that brings Material Design guidelines to the web using HTML, CSS and JavaScript.

Google said “MDL is framework agnostic, and can be used with just about any front-end solution a web designer or developer might want to use. Gzipped, MDL’s code is under 27kb.”

On their launching blog, Google said that MDL is a complementary implementation of thePaper elements built with Polymer.

The Material Design Lite uses Paper elements, which allows a developer to take pieces of Material Design to use if the entire code isn’t complementary to their needs. You could, for instance, plug a MDL graph into an existing website without using other Material Design components.

If you are looking forward to use MDL, there are buttons, text-fields, tooltips and spinners available to use for your website, and of course, Google has taken care of mobile friendliness of your MDL enabled site with the availability of responsive grids and breakpoints that follow Material Design and adaptive UI guidelines. Modern web browsers like Chrome, Firefox, Opera, Microsoft Edge and Safari are best compatible for MDL.

Google also said that MDL makes it easy to add a Material Design look and feel to your website and since MDL has fewer dependencies, it becomes very easy for web designers to install and use it.

The MDL sources are written in Sass using BEM. While Google prefers you to use their pre-built CSS or theme customizer, they are also offering the Material Design Lite source code on GitHub to help you build your own version. Google also recommends to use MDL by referencing from their CDN.

Questions regarding MDL? Don’t Google it, approach their GitHub or StackOverflow forum!

If you have any question or query regarding MDL or any of its components, Google has already made available a rich set of FAQs. Moreover, you can connect with peers onGitHub or Stackoverflow to get answer to your MDL questions!

(Source and image via: getmdl.io)

Best and top web technologies resources


best and top web technologies resources
Around the web there is lots of useful information about UI Design, Front-end news and trends, but sometimes it’s too hard to find and read all of them. It’s a mess and you will go crazy!
Therefore, I have put together the best sources about news and trends in the web technologies world.

DailyJS
The Morning Brew
Treehouse Blog
net Magazine
Web Platform
HTML5 ROCKS
CSS-TRICKS
HTML5 Doctor
HTML5 Doctor
SitePoint

How to keep up to date on Front-End Technologies


new web tools, trends and workflows
The web is a rapidly evolving universe. An important part of our job as UI designer & front-end developers is keeping up to date and staying close to new tools, trends and workflows.

Hundreds of blogs and articles are there, but there is no way you can reach all of them. I think you should have a strategy to keep up to date, so I have created this recipe.

Follow these simple steps

  1. Follow cool people
  2. Find the best sources
  3. Attend conferences
  4. Get your own sources

Follow cool people

Tech leaders help you to stay on top of relevant news and trends. They are in-the-know and they work on a specific topic.
Twitter can be a great place to find people who are in-the-know.
I am listing some of best folks from the industry. some of them are from companies like (Google, Twitter, Facebook & Yahoo).

All about twitter bootstrap


What is Bootstrap?

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Bootstrap is a free, open-source web development framework that gives you all the tools you need to create your own ‘responsive’ website (i.e. a website that scales automatically to any given screen size – more on this below). Think of Bootstrap as a box of Lego blocks that can be put together to create websites. It is powerful and relatively easy to learn, even for those without any technical background.

Why Bootstrap?

Web design has changed dramatically in the last few years. The proliferation of mobile devices means that designers today need to design for phones and tablets along with standard desktops. A website needs to look good on a 5-inch phone screen, as well as a 27-inch monitor. This requires a unique set of skills; specifically, an-in depth knowledge of web technologies such as HTML5, CSS3, jQuery, and of course, Photoshop.

In response to these web development challenges, designers have come up with something called ‘responsive’ design. A responsive website has a flexible layout that can scale automatically to different screen sizes. It looks good on mobile screens as well as computer monitors. For an example of a responsive website, check out BostonGlobe.com. Try scaling the window size and observe how all elements scale automatically.

Creating responsive designs requires a lot of time and effort. Bootstrap provides you with the basic framework for creating a simple responsive website. You don’t need to code anything yourself. Just include the appropriate pre-written code from Bootstrap into your website, and you’ll be all set with your very own responsive web design!

Download  Bootstrap for all free here www.getbootstrap.com

Looking for new opportunities to work


With a creative background and +7 years of technical experience, my aim is to deliver quality web services to all kind of businesses.

My focus is on building rich websites for desktop as well as mobile platform.

Major work: I have redesigned my company main websites along with client works
www.nottinghill.biz
www.1stmediacreative.com

Some of current client work

www.vincenthouselondon.com/new (Working on this)

www.mrit-test.co.uk/website-test/reelposter/html/index1.html (Working on this)

www.nostresscms.com/html (Working on this)

www.lisasphotographart.com (Recent project World press CMS)

www.imadeitmyself.co.uk (Recent project World press CMS) www.imadeitmyself.co.uk (Recent project World press CMS)

www.thefashionsociety.co.uk  (World press CMS)

www.thecapeverdean.com (Recent project)

www.shiraz-software.com (Recent project)

www.crossdanceschool.co.uk (Recent project)

www.londonrelocationservices.com

All work listed under here is Ether designed by me or designed in my supervision
http://www.nottinghill.biz/portfolio.html