Archives: October 2015

Windows 10 UWP App templates for Adobe Photoshop

Microsoft has now released the UWP App Design Templates for Adobe Photoshop.

What does this mean?

Say you are a designer or a developer who wants to get their dirty on the design side [Pun Intended], can now make use of this design template and create stunning designs. It is said that, in order to build something good, you need to first have a rough design as it gives the idea of what exactly needs to be done. Even helps in order to work out the flow required between the pages. This was generally done either using Pen & Paper or on a Drawing Board. Nowadays, we have the designers who try and create these designs or rather Wireframes. But the problem was that for every  segment they have to go and create a duplicate of all the controls like Buttons, Textbox etc. As a practise, every developer tries and creates some control templates from where they can be taken and used.

Earlier, these templates were only available for Microsoft Powerpoint and Adobe Illustrator. Now Microsoft has released the template for Adobe Photoshop as well. It seems to have happened because of the feedback provided during the Build 2015 Event. For more information, please visit this link.

Download the UWP App Design Templates for Adobe Photoshop

Controls - 1

Controls – 1

Controls - 2

Controls – 2

Fonts

Fonts

Colors

Colors

Screens

Screens

 

No commentsAdd a comment

Check if Browser supports WebP

WebP is a new image format that provides lossless and lossy compression for images on the web. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

Since, WebP reduces the size of the image to almost 25%-30% which is a big deal when it comes to websites employing large images. The current trend is that almost every site is either based on responsive design or is trying to employ a similar mechanism so that it can be opened in the Mobile Browsers. If you look at the Smart Phones nowadays, they have a huge processing power, however, the internet speed is still behind and thus creates an issue when it comes to the loading of numerous images. Because of this we try things like gzip or caching or something else.

Anyways, moving on, I know you might say that still WebP is not supported. No issues, what you can do is keep copies of images in various formats like WebP as well as Jpg. This way, if the browser doesn’t support WebP you can always make use of JPG.

Here is a small script that I have got and use in my sites:

function testWebP(callback) {
    var webP = new Image();
     webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';

     webP.onload = webP.onerror = function () {
          callback(webP.height === 2);
     };
};

testWebP(function(supported) {
     // Probably add css class like 'webp' or 'no-webp'
     console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported.");
});

Now all you have to do is use this script in your site and update the image sources accordingly for some of the bigger images.

Happy Coding!

No commentsAdd a comment