In this post I am going to discuss some tools fo the future development in CSS nad HTML5.In the web design we have lots of dependencies in browsers, enviroment,client special requirement, page loading time and seo and a good website should contains all these things.
When comes to user thy only look on the frontend their basis demand is user friendly with lots of smooth animation and image manipulation.Though these are the smallest things we are getting lots of trouble when put all these things together.For this we need to us some tools which reduce the project costs n time and also give the project based on their platforms.
Personally I used both Bootstrap and Foundation and realy these two are awsome.Now importance of using CSS freamwork is give your project a perfect basic structure.If you don't like Bootstrap or Foundation then you can use any other which have a good support for their customer.Now Foundation have great support fo the designer, their appointed developer are always there fo your help. You cn post your any design related query to them and they will assist you.
Minified script and optimized images are the best option for reduce page loading time.Now days image sprite is a older process to reduce page lod time try to build eps files of the icon and then generate the fronts form Icon moon or appfonts or elsewhre.Now for scripts try to use CSS3 animations don't use too musc scripts.Dont call every script on document load.
Now days console and network tab in inspect element is a wonderful gift from the browsers.They both can track you lots of things like page load time, JavaScript error, other css, HTML error or page resource errors.If you use these two things properly you can avoid both the page loading issues and 30% of JS bugs.
Designer and developer often use debugger for breakpoint in the browser which they always forgot to remove.Now in the console there is another tab is script or debugger with help your to track your scripts by using the breakpoints.You also can console.log or alert for detecting script executions but always ty o remove these option.
Modernizr is a wonderful tools for the Designers its help you detect browsers compatibility of CSS3 tags and transfer these tags into your html if your browser is unable these advance CSS3.Now you can write JavaScript for only those browser which reduce your page load as these codes only going to execute in the specific browsers of versions only.
By using modernizr you can provide maximum portability your website.
Now sometimes you are getting no issue in Windows so you passed the website nd the client check it on Mac OS which may provide some design issue.Thogh its a tester jobs but if your check from the beginning then your need work lesser in different enviroment and browser by some online website like Browser stack or something like that.
This is long process and maintainers for your website.Beically you need to reduce the resource from other server except CDN links and don't use unnecessary image .Replace the mall images with URI.Please wait for our next post for full description.
When comes to user thy only look on the frontend their basis demand is user friendly with lots of smooth animation and image manipulation.Though these are the smallest things we are getting lots of trouble when put all these things together.For this we need to us some tools which reduce the project costs n time and also give the project based on their platforms.
1.First try to use CSS framework.
Personally I used both Bootstrap and Foundation and realy these two are awsome.Now importance of using CSS freamwork is give your project a perfect basic structure.If you don't like Bootstrap or Foundation then you can use any other which have a good support for their customer.Now Foundation have great support fo the designer, their appointed developer are always there fo your help. You cn post your any design related query to them and they will assist you.
2.Reduce page loading time by optimized your scripts and use less images and replace small icons with fonts.
3.During the development always try to track your browse Console and network tab and don't use JavaScript debugger.
Designer and developer often use debugger for breakpoint in the browser which they always forgot to remove.Now in the console there is another tab is script or debugger with help your to track your scripts by using the breakpoints.You also can console.log or alert for detecting script executions but always ty o remove these option.
4.Use Modernizr
By using modernizr you can provide maximum portability your website.
5. Test your website in different enviroment and browsers.
6.Reduce http request.
Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.
1 comment:
Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. best logo designing company
Post a Comment