• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

Stop making sites with endless scrollingǃ

 3r33535. 3r3-31. Stop making sites with endless scrollingǃ 3r3403. 3r33511.  3r33535.

A brief history of scrolling

3r33511.  3r33535. To understand what scrolling is, look at the origin of the words . 3r33511.  3r33535. 3r33511.  3r33535. 3r33434. 3r33385. scroll [/b] (n.): c. 140? “roll of parchment or paper” 3r33448. 3r33511.  3r33535. 3r33511.  3r33535. Scrolls were originally used when the document became too long (for example, religious content). With so much content it became difficult to manage, it is difficult to read and rewrite. 3r33511.  3r33535. 3r33511.  3r33535. When computers came into our lives, we still needed a way to navigate large portions of content. 3r33511.  3r33535. 3r33511.  3r33535.
The evolution of scrolls in computers 3r33510. 3r33511.  3r33535.

1. Rows (and columns)

3r33511.  3r33535. After the advent of the web, designers invented /explored many ways to paginate /scroll content. Before the Internet, we scrolled lines on the screen. 3r33511.  3r33535. 3r33511.  3r33535. Horizontal scrolling made the scrolling tool not only for reading the content, but also for navigating the screen. 3r33511.  3r33535. 3r33511.  3r33535.

2. Windows (not an operating system) 3r3383. 3r33511.  3r33535. Having a scroll pushed people to create a window interface. With the help of windows, you can simultaneously view several pieces of content. 3r33511.  3r33535. 3r33511.  3r33535. In the Program Manager Windows 3.1 several “scrolls” 3r3447. 3r33448. 3r33511.  3r33535. 3r33511.  3r33535.
3. Web pages

3r33511.  3r33535. Scrolling decides the most the fundamental problem when browsing the web. However, it can cause many problems for users and can prevent them. Let's take a closer look. 3r33511.  3r33535. 3r33511.  3r33535.
Options for navigating web pages 3r33510. 3r33511.  3r33535. I will try to determine how developers and designers created an interface for navigating web pages. 3r33511.  3r33535. 3r33511.  3r33535. Let's start with some server systems pagination. 3r33511.  3r33535. 3r33511.  3r33535.

Layout of pages based on the offset

3r33511.  3r33535. The most famous pagination system. In this technique, you first need to find how many elements need to be paginated:
 3r33535. 3r33511.  3r33535.
- All posts count
SELECT COUNT (*) AS total FROM posts
3r33511.  3r33535. After that you need to count the pages. Suppose we show 10 elements on the page:
 3r33535. 3r33511.  3r33535.
    - First page items
SELECT * FROM posts LIMIT 10
3r33511.  3r33535. And if we want to go to page 3 then you need to skip the first 30 elements using the offset ( OFFSET ):
 3r33535. 3r33511.  3r33535.
    - Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30
3r33511.  3r33535. Information is sent to the client as follows: 3r33511.  3r33535. 3r33511.  3r33535.
    {3r33523. pagination: {3r33523. "items_count": 10?
"current": ? 3r32323. "total_pages": 10
}, 3r32323. "items":[]3r33535.}
3r33511.  3r33535.

Pros and cons of pagination based on bias:

3r33511.  3r33535.
  •  3r33535.
  • Good : go to any page easily.  3r33535.
  • Good : more free option for user  3r33535.
  • Poor : performance issues with  3r33535.
  • Poor : Duplicate elements may be displayed when changing data.  3r33535.
3r33511.  3r33535.

Pagination on the

pointer. 3r33511.  3r33535. Big data makes it difficult to calculate the tables, because the data is constantly arriving (think about Twitter). Thus, the developers came up with new methods for pagination: 3r33385. following signs [/b] (cursor). 3r33511.  3r33535. 3r33511.  3r33535. Each line is assigned a unique pointer. No need to cheat the entire table and know the exact number of pages: 3r3353511.  3r33535. 3r33511.  3r33535.
    - Get extra 1 item to get its cursor. 3r33535. SELECT * FROM posts ORDER BY id DESC LIMIT 11    
3r33511.  3r33535. Suppose that each message has a unique pointer (the ID in this example) for pagination. The customer will receive the following information: 3r33511.  3r33535. 3r33511.  3r33535.
    {3r33523. pagination: {3r33523. "next": 1234 //extra item's ID (cursor), null if end of data. 3r33535.}, 3r32323. "items":[]3r33535.}    
3r33511.  3r33535. And you can request the next page with the help of the pointer: 3r33511.  3r33535. 3r33511.  3r33535.
    - Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id> = 1234 ORDER BY id LIMIT 11

3r33511.  3r33535.

Pros and cons of pagination on pointers:

3r33511.  3r33535.
 3r33535.
Good
: more productive, there is no calculation of the table
 3r33535.
Good
: displaying duplicate elements is not possible if someone inserts a row in the center of the table 3r-32r.  3r33535.
Poor
: it is impossible to go to any page
 3r33535.
Poor
: restrictions for the client, the total number of pages and the current page number
are unknown.  3r33535.
3r33511.  3r33535. Consider some methods of navigation. 3r33511.  3r33535. 3r33511.  3r33535.

Next and previous

3r33511.  3r33535. 3r33385. Action [/b] : based on clicks
 3r33535. 3r33385. Technique [/b] : based on offset or following signs 3r33511.  3r33535. 3r33511.  3r33535. It is mainly used to navigate blogs. This is the oldest version of infinite scrolling. With this approach, the user may not know where the content ends. 3r33511.  3r33535. 3r33511.  3r33535. WordPress pagination
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.

Pagination

3r33511.  3r33535. 3r33385. Action [/b] : based on clicks
 3r33535. 3r33385. Technique [/b] : based on the offset
 3r33535. 3r33511.  3r33535. In my opinion, this is the most convenient type of navigation. It uses pagination based on the offset, which allows you to go to the desired page, and also with one click go to the end or the beginning. 3r33511.  3r33535. 3r33511.  3r33535. Examples of numbering
3r33448. 3r33511.  3r33535. 3r33511.  3r33535. Google uses this navigation in search results: 3r33511.  3r33535. 3r33511.  3r33535. 3r33337. 3r33511.  3r33535. 3r33511.  3r33535.

Load

more. 3r33511.  3r33535. 3r33385. Action [/b] : trigger
 3r33535. 3r33385. Technique [/b] : based on pointers, although it can be implemented on the basis of bias, but it will be inconvenient 3r33511.  3r33535. 3r33511.  3r33535. This is one of the newest pagination methods, it also uses the previous version of infinite scrolling. 3r33511.  3r33535. 3r33511.  3r33535. 3r33333. 3r33511.  3r33535. 3r33434.
Download More button
3r33448. 3r33511.  3r33535. 3r33511.  3r33535. In the example above, the user clicks the Load More button to see more content. 3r33511.  3r33535. 3r33511.  3r33535.

Infinite scrolling

3r33511.  3r33535. 3r33385. Action [/b] : based on scrolling
 3r33535. 3r33385. Technique [/b] : based on pointers, [i] although it can be implemented on the basis of bias, it will be VERY inconvenient 3r-3448. 3r33511.  3r33535. 3r33511.  3r33535. Infinite scrolling is the latest pagination technique based on pointers. 3r33511.  3r33535. 3r33511.  3r33535. 3r3013. Hugh Williams claims that 3r33398. invented endless scrolling in 2005 for Microsoft 3r3403. . 3r3404. 3r3013. 3r3402. Metafizzy
developed an open source tool to help developers realize endless scrolling. 3r3404. 3r33511.  3r33535. 3r3407. 3r33511.  3r33535. 3r33434.
Infinite scrolling allows you to scroll the page to infinity
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.
Stop making sites with endless scrolling! 3r33510. 3r33511.  3r33535. So far we have been considering how to get here. Now let's talk about why it is so bad. 3r33511.  3r33535. 3r33511.  3r33535.

Search footer

3r33511.  3r33535. The footer is the basic unit of the anatomy of a web page, just like the header. Sites provide details and links there: phone numbers, addresses, links to help and support topics. If users search for this information, they usually scroll the page down to the footer. 3r33511.  3r33535. 3r33511.  3r33535. With endless scrolling, users find it difficult to find a footer, because it’s impossible to see the end of the page. The inability to reach the footer can strain the user (which is not great). 3r33511.  3r33535. 3r33511.  3r33535. Sites with endless scrolling (for example, Twitter) solve the problem by placing the necessary information and links in the sidebar. The sidebar is a solution, but not a good one. Footer must remain footer. 3r33511.  3r33535. 3r33511.  3r33535. 3r3442. 3r33511.  3r33535. 3r33434.
Twitter footer on the right sidebar
3r33448. 3r33511.  3r33535. 3r33511.  3r33535.

Do not use endless scrolling if you do not have a timeline or a

tape. 3r33511.  3r33535. Social networking applications work with the timeline. Users tend to navigate in time, work with the past. In this case, endless scrolling simplifies navigation. Here it is good for performance, especially in mobile devices. 3r33511.  3r33535. 3r33511.  3r33535. But if you have an e-commerce site, a newsletter, a magazine or a blog, then the desire of users to navigate through elements or articles, and then endless scrolling becomes a nightmare for them. In the timeline list, people generally don’t look for a date or a unique item. In lists based on items, the user wants to find the specific item. The endless scrolling makes it almost impossible. 3r33511.  3r33535. 3r33511.  3r33535.

Give users more control of

3r33511.  3r33535. Users generally do not like a UI that they cannot control. 3r33511.  3r33535. 3r33511.  3r33535. The scrolling event does not explicitly lead to the intention to do something. People move around the page, and if they want to perform an action, they usually click or touch the screen (these are triggers). They inform the UI of their decision. But endless scrolling works without any solution. 3r33511.  3r33535. 3r33511.  3r33535. Infinite scrolling makes pages less manageable. Users may also encounter jumping glitches. 3r33511.  3r33535. 3r33511.  3r33535. Instead of scrolling endlessly, put the “Load More” button, which is a trigger. This will give the user control. (I would prefer the old style of page numbering, but we assume that we are now using pagination on pointers). 3r33511.  3r33535. 3r33511.  3r33535.

Allow users to go where they want

3r33511.  3r33535. People move through the pages, save some to bookmarks, share with friends, etc. 3r33511.  3r33535. 3r33511.  3r33535. However, the endless scrolling cannot preserve state in its essence. Users cannot share the current status. It also means that you cannot track user activity with analytics tools. 3r33511.  3r33535. 3r33511.  3r33535. If your internal pagination method is pointer-based, it’s almost impossible for users to arbitrarily navigate. If you have an e-commerce site, then let your users navigate to the right products. 3r33511.  3r33535. 3r33511.  3r33535. In addition, if there is a “Sort by” function in the list, need to show the user the pagination. If the list is in alphabetical order, do not force people to scroll through the list to the letter K, otherwise they will go crazy. 3r33511.  3r33535. 3r33511.  3r33535. It is necessary to show the user where he is. When he refreshes the page with endless scrolling, he will be thrown back to the very beginning, and he will have to scroll down again to the place where he was before. 3r33511.  3r33535. 3r33511.  3r33535.
Conclusion 3r33510. 3r33511.  3r33535. Infinite scrolling is good in some cases, but as a rule, it creates more problems than it solves. Designers should not consider endless scrolling as a silver bullet that solves all problems with pagination. Stop making sites with endless scrolling! 3r? 3519. 3r33535. 3r33535. 3r? 3516. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r? 3517. 3r33535. 3r? 3519. 3r33535. 3r33535. 3r33535. 3r33535.

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

24-10-2018, 20:11

Publication Date

Interfaces / Designing and refactoring / Web design

Category
  • Comments: 0
  • Views: 1 223
MongoDB Go Driver tutorial
What's new in GoLand 2018.3
Generator masks extensions dialplan
Using the Fish eye camera on the
Optimized event handling in Angular
Data Caching - Java Spring
Write a comment
Name:*
E-Mail:


Comments
Global Dezigns is a Website Development Company in Karachi, Providing services of
website design in karachi
. We are delivering the best partnership across Pakistan. provides a complete range of web development services including web applications, website hosting and maintenance, domain registration, on-page search engine optimization, and website integration with social media platforms such as Facebook, Twitter, LinkedIn, Google Maps, and Google Local Directory. We believe we are well placed to take our knowledge and expertise to the logical next level with the latest web standards.  
  Show/hide text
https://www.globaldezigns.com/



Yesterday, 22:45

mike tomlin

This blog is really great. The information here will surely be of some help to me. Thanks!.mastering physics

Yesterday, 17:57

raymond weber

Coinyspace is the cryptocurrency community and trading forum where members can find any contributors of crypto ecosystem like currencies, exchanges & merchants. Check Out: Bitcoin Merchants
Yesterday, 16:57

noorseo

This is a great high resolution screen which you have shared for the users. Making a website is not an easy task but managing a good website is really a hard work. As far as this website is concerned, I am very happy.https://19216801.1
Yesterday, 16:01

nushra45

i'm satisfied to deem this make recognized Very beneficial for me, as it contains lot of advice. I usually favor to buttonhole The excellent and glad i found this count number in you assertion. thanks Subliminal Hypnosis
Yesterday, 14:56

jahangirkhatri

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password