For the past few days I have been totally digging Google’s Web Starter Kit. Yes, I have used Yeoman, Slush and other “One Stop – Best Practice” tools, but there is something about WSK that makes you want to use it as a Starter
template kit for all your projects.
I have been going through the resources and I would recommend the following way to build a new app. Please feel free to share the way you develop too.
Phase I : What’s out there?
- First, navigate to Google’s Web Fundamentals. You can find a list of resources on how to build a multi-device web site with a lot of awesome best practices.
- Next Discover Multi-Device Tools and Install them as needed.
Phase II : Design Needs
- Next, have a good understanding of the requirements.
- If your project is targeted at multi-devices, I recommend Responsive Web Design Basics
- Next, Responsive Web Design Patterns
- And finally Navigation and Action Patterns. This should give you a fair idea on RWD.
- Next, understand the UX factor for Forms and User Input. Based on these you can pick what is needed for your project.
Phase III : Development
- Once you have all the design decisions made, you are ready to begin development. Download a copy of Web Starter kit as mentioned here or you can use slush-webstarterkit to download and install dependencies for you.
- You can start off the development by picking a layout. Next, follow a good build process and build your project from time to time.
- When in doubt about the build process, you can always follow this example.
Phase IV : Debugging & Testing
- WSK provides living style guide templates out-of-the-box. As you keep changing the themes, the style guide keeps updating. So, do keep this page as a baseline while testing component level changes.
- During development, it is highly recommend that you resize the screen often and check if everything is as expected. It is even better if you can debug/test on actual devices.
- Once your development is completed, you can start looking at various types of testing.
Phase V : Optimizing and Deploying
- You can leverage the gulp tools that come out-of-the-box with Web Starter Kit to check the performance.
- Once you are happy with the performance, look and feel, you can share the dist folder.
Google has put out some really awesome resources to make the web a better place. If you think you can add more value, do check out their GitHub repo and add your contributions.
Thanks for reading! Do comment.