Major technology changes have been seen in last few years. Smartphone and tablets are changing the way of internet usage and taking the web everywhere. Responsive web design (RWD) is around from some years now. Initially the focus in a RWD project was just to decide the different breakpoints – like small, medium and large … Continue reading “Responsive Web Design – Viewports and device pixels ratio”
Author: Gopal Juneja
A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.
AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch
Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements. Conditional display using ng-show/ng-hide The ng-show / ng-hide directives require a boolean value to evaluate the visual … Continue reading “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”
Single page application using AngularJS
Single page application is superior in terms of performance. It decreases load time of pages by storing the functionality, once it is loaded the first time. If you need to update small parts of page, it’s faster to focus only on these views and their data rather than reloading entire page. Some of the key … Continue reading “Single page application using AngularJS”
CSS3 Animation – Hover effects on icons
On the name of animation, flash automatically pops up in the mind, but flash is no longer required to create web-based animation. There are many stunning examples of CSS3 animation. Here, I have come up with the hover effects on the icons. These icon effects can easily be used by just copy paste in the … Continue reading “CSS3 Animation – Hover effects on icons”
Some good speed and performance optimization features in HTML5
Speed and performance optimization is very important in all the web products. HTML5 has lots of new and exciting features for both mobile and desktop applications. This post is focusing on the features that help to boost the speed and performance. Link prefetching Loading time is an important factor for a web product. Prefetch feature … Continue reading “Some good speed and performance optimization features in HTML5”
Some basic techniques to increase the website performance
In this competitive world, every company (brand) is trying to prove themselves different from others, where UX people are playing a good role by evaluating the market, competitors, and users. An application with great user experience have lots of study and research behind it. But is it sufficient, that an application have great user experience? … Continue reading “Some basic techniques to increase the website performance”
Responsive web design and images – Optimized images for normal and retina display
Adaptive image is not only to fit the image in large and small devices; it’s about contextual optimized image for normal and retina display. Responsive web design (RWD) has different context, like high resolution and low resolution display, high bandwidth and low bandwidth connections, high memory and low memory devices, small and large display, portrait … Continue reading “Responsive web design and images – Optimized images for normal and retina display”
Some cool CSS selectors’ addition in selectors level 4 – The future
The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4”. Selectors have been with us since the beginning of CSS. Most awaited selector … Continue reading “Some cool CSS selectors’ addition in selectors level 4 – The future”
Performance improvement by writing efficient CSS selector
The web is moving from desktop to mobile and performance has become the key focus area in web development. All the UI Developers try to write maintainable, semantics and efficient CSS. But when UI developer becomes dogmatic about the standards, it cost the performance. I don’t mean here that; following the standards degrades the performance. … Continue reading “Performance improvement by writing efficient CSS selector”
Some HTML5 features that benefits mobile app
Native app vs HTML5 is most discussed topic in the web community. No doubt native app is leading in terms of performance, speed and user experience. The decision to go with native or HTML5 approach, can be made by evaluating the different parameters, budget and project requirement. HTML5 is gradually booming and used by many … Continue reading “Some HTML5 features that benefits mobile app”
How to create retina-ready css based icons?
As a requirement comes up to create an icon, Photoshop or Illustrator pops-up immediately in mind. Making any changes in icon like changing style, size or color open the photoshop again and do the required changes. And if the required icon need to be used in a web apps for iPhone 4s and iPad 3, … Continue reading “How to create retina-ready css based icons?”
Different ways of making images flexible in responsive web design
Responsive web design is a future-friendly tool for websites, having three principles. Media Query, Flexible Grid and Flexible Media. Flexible grid is not hard to achieve just set an container element in percentage and linearized the element in small devices, text can be resized and flow in smaller and higher resolution but when think of … Continue reading “Different ways of making images flexible in responsive web design”
What’s good in Metro UI which can be used in responsive websites
Any new trend or new product in market always starts with some positive and negative face and if it is Microsoft product, majority of people cannot turn down to give it at least one try, that’s why Microsoft dare to make the drastic UI change named as Metro UI, which is being called new design … Continue reading “What’s good in Metro UI which can be used in responsive websites”
Different media features and media types of responsive design
Media queries plays vital role in the responsive web design when the term Media Queries for responsive web design comes up, general thoughts moves around is “media = screen” or “media = print” which is generally used in the web development.
|
1 2 |
<link rel="stylesheet" media="screen" href="sans-serif.css" /> <link rel="stylesheet" media="print" href="serif.css" /> |
But there are other media type which can be used like aural, braille, … Continue reading “Different media features and media types of responsive design”
What role is played by HTML5 in responsive web design?
HTML4 or XHTML can also be used for responsive design as responsive design can be achieved using CSS3 media query. Than what role is played by HTML5 in responsive design? Why it is said in the web community that responsive design created using HTML5 and CSS3? Relation of HTML5 and CSS3 HTML5 and CSS3 are … Continue reading “What role is played by HTML5 in responsive web design?”
Difference between Native, Hybrid and Web Application
Most organizations have started mobile presence for their business which demands more and more great mobile experience on mobile devices. When developing a mobile interface, most important question would be which technology to choose. Should it be a Native app? Web app? or Hybrid app? There is no right answer or one best option for … Continue reading “Difference between Native, Hybrid and Web Application”
What, Why and How to create a future friendly responsive web design?
Web is not limited to desktop or laptop now, future of the web is much more broaden than even present. People are using internet in many devices like Mobile Phone, Tablet and I-pad. Internet usage is increasing in these devices now. The phone is no longer a tool to call or SMS only, people using … Continue reading “What, Why and How to create a future friendly responsive web design?”
Web site design approach and the older browser like IE6
IE6 is outdated but still widely used in the web developing world. We bitch about Microsoft decision to leave its browsers rotting for years and moan about the time we spend to fix the IE6 issues. Being a UI Developer I will suggest not to support IE6, because while supporting, we feel shackled to the … Continue reading “Web site design approach and the older browser like IE6”
How to use HTML5 today with full cross-browser compatibility?
HTML5 is a hot buzzword for UI Designer and Developer; many designers are hesitant to embrace this new technology because of lack of full cross-browser support and cross-browser support truly not going to happen with HTML5, that means we are hiding behind the lack of cross-browser compatibility, Why? It may be to avoid learning new … Continue reading “How to use HTML5 today with full cross-browser compatibility?”
Don’t follow the W3c Standards blindly
It’s a common process for most of the UI Developer to create an HTML page and validates it with w3c validator, if it is passed then it’s done they are creating the standards compliant web page. It’s good to adhere with the standards defined by a community whose mission is to lead the web to … Continue reading “Don’t follow the W3c Standards blindly”
Come out of web-safe font use any font for your website
Typography is one of the important weapon for the designer to use, but when it comes to web, a designer is restricted with web-safe fonts only, because a font is an operating system resource, not a browser resource. You can see any font in your browser, which is installed in your machine. But if your … Continue reading “Come out of web-safe font use any font for your website”
How to make position fixed in IE6 using CSS only
There is big debate in the web community, to support IE6 or not, even Google has stop their support on their apps for IE6, but I always love to have fun with this buggy browser and try to make it function, but not pixel perfection. Though, there are number of issues in IE6 one of … Continue reading “How to make position fixed in IE6 using CSS only”