<\/figure>\nThose URL’s are more likely to have the same content on them over time, since it references content based on the publication time.<\/p>\n
Depending on the publication frequency of your site, perhaps your pagination buttons could be months, weeks, or days, rather than arbitrary pages. Paginating back from a homepage of content might be like:<\/p>\n
website.com\/blog\/ \nwebsite.com\/blog\/2014\/09\/ \nwebsite.com\/blog\/2014\/08\/<\/p>\n
Then those URL’s would always have the same content on them over time.<\/p>\n
Even if you prefer using arbitrary chronological integer based pagination, wouldn’t it make sense to reverse the numbers? Instead of 1, 2, 3 going back in time, have the numbers start at the highest for how much content you have.<\/p>\n
website.com\/blog\/ \nwebsite.com\/blog\/page\/523\/ \nwebsite.com\/blog\/page\/522\/<\/p>\n
I wonder why it’s seemingly never done that way. Perhaps it involves the stress of count queries on older database systems?<\/p>\n
Indication of how many, or no?<\/h3>\n Speaking of count queries, should you indicate how much content there is to paginate through? In order to do that, you need to know how much there is, which involves some kind of count at some point.<\/p>\n
<- Page 1 of 302 -><\/p>\n
Is that useful? I might argue it is if the number could reasonably be useful. Either because you could look through it all, or because it gives you a sense of the breadth of your search, or because you might need that for use in an API, or something like that. It’s probably not particularly useful somewhere like Google where it tells you it found eleventy-gillion results and it’s really just showing off.<\/p>\n
Other than just how many, should you be able to jump along further in the pagination?<\/p>\n
[<-] [1] ... [5] [6]<\/strong> [7] … [302] [->]<\/p>\nI dunno. I’ve always kinda baulked at pagination like this because it seems overly complex and marginally useful. Not to mention harder to honor consistent positioning. It does offer a way to jump to the start or end of pagination, which I could see being useful. It’s just the longer versions that allow me to jump ahead like 4 pages (but not 6!) seem like they let a programmer little too close to the front end =).<\/p>\n
Ajax<\/h3>\n Pagination is the perfect kind of thing to do without a full page refresh, because it’s highly likely the only thing changing on the page is the stuff being paginated. But this introduces some new complexities:<\/p>\n
\nDo you append new content to the bottom of the current content area?<\/li>\n Is there a risk of so much content being added that the DOM weight slows down the page? Can you remove content at any point?<\/li>\n Do you replace all the content with new content?<\/li>\n If you do, should you scroll to the top of that new content? How do you do that across browsers?<\/li>\n Are you “losing” pageviews this way? Does that affect your business? Can you track this or do the same things that pageviews would have done for you anyway (e.g. rotate ads)?<\/li>\n Do you refer to the pagination differently, like “Load More Content”? Or is that inside baseball that only web workers care about?<\/li>\n Do you offer pagination in both directions this way?<\/li>\n Do the URL’s change?<\/li>\n Can it be approached with progressive enhancement so pagination always works no matter what?<\/li>\n<\/ul>\nWordPress.com themes are leaning this way. I checked out a number of themes and they tend to have an “Older Posts” button that brings in new stuff Ajax style.<\/p>\n <\/figure>\nIn this particular “Eighties” theme, there is no pagination at all without JavaScript. You can get to the content because there is links to the different months of content in the footer. Seems a little<\/em> half-baked of an approach to me.<\/p>\nConsistency<\/h3>\n Whatever you choose, be consistent about it across your entire site. <\/p>\n
Lawd knows I need to implement some of these things of this across my sites.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve had some disparate thoughts regarding pagination lately, so I thought I’d attempt to organize them in a post. That’s how blogging works right?<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183076"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=183076"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183076\/revisions"}],"predecessor-version":[{"id":185114,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/183076\/revisions\/185114"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=183076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=183076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=183076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}