large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/what-do-you-know-about-viewport-height-in-2017-4f25be5b05f?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Konstantin Shirshov <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EwiJjZXyYYHD5j8SP66bQA.gif"></p>
<p>The first major change of the most popular screen resolution was in February 2012. According to the StatCounter report, at the same time 1024x768px resolution was replaced by 1366x768px. Still, this is the most popular screen resolution.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/854/1*lfLdUqyr8yvSb5DhXEA1vA.png"></p>
<p><em>The most popular physical height of the screen hasn’t been changed for 8 years. However, there have been many updates in operating systems and browsers interfaces within this time.</em></p>
<h3>Why is it important?</h3>
<p>Web page start screen has a special value. Main interface elements as well as messages should immediately get into the visible area of user’s viewport. This will help you to avoid high bounce rate. It’s also important to make sure the page looks perfect with the most popular screen height.</p>
<p>Let me answer the following questions:</p>
<ol>
<li>What is the appropriate viewport height for any user to see all the important interface elements?</li>
<li>What is the best viewport height for perfect design; convenient height for interface visual perception?</li>
</ol>
<h3>Audience Profile</h3>
<p>I work in <a href="http://aviasales.ru/?marker=124397">Aviasales</a>, one of the largest Russian travel metasearch engines. I am going to use the main product as well as marketing promo project statistics.</p>
<ul>
<li>#1 in Russia and CIS with more than 10 mln visitors per month</li>
<li>The majority of users are 25–34 y.o.</li>
<li>The customers are mostly interested in travelling, technology, social networks, real estate and cinema</li>
</ul>
<h3>Tools</h3>
<p>I used the <a href="https://metrica.yandex.com">Yandex.Metrica</a> to download the statistics above. With the help of the received data, I made calculations in <a href="https://spreadsheets.google.com">Google Spreadsheets</a> using <a href="https://developers.google.com/chart/">Google Charts</a> for visualization.</p>
<h3>Terms and Conditions</h3>
<p>The key parameter is the number of customers visits. Yandex.Metrica gives the data of visiting the site by 1 user. The user’s activity is reflected in page views, external link transitions, file downloads and calling special functions.</p>
<ul>
<li>Devices: desktop and mobile</li>
<li>Focus: window height</li>
<li>In addition: Exclude invalid data from the sample. Desktop — from 0 to 480px, mobile — from 0 to 360px. One of the main reasons for having inaccurate data is the initial loading of iframe-banners plus robot visits.</li>
</ul>
<h3><a href="http://shirshov.pro/other/about-viewport-height/">Detailed report→</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OFu7OUMjgSq27SPUl6eskQ.gif"></p>
<p>Design of desktop interface with the visible area height of 638px, but with the perfect design for 974px. Design for the mobile interface with the visible area height of 452px, but with the perfect design for 559px.</p>
<p>If you want to share your interesting ideas for research, please put your comment under the article or just text me. My <a href="https://www.facebook.com/shirshov.pro">Facebook</a>, <a href="https://www.linkedin.com/in/shirshov/">LinkedIn</a>, <a href="https://dribbble.com/bestaward">Dribbble</a>.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4f25be5b05f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/what-do-you-know-about-viewport-height-in-2017-4f25be5b05f">What do you know about viewport height in 2017?</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


What do you know about viewport height in 2017?

What do you know about viewport height in 2017?

Top Stories