Building a paginated listing with only HTML and CSS for Responsive Design

Most paginated listings on the web are managed either with server side logic, javascript, or a combination of both. With the first option, the user’s browser wait on network traffic back to the server and back down again. Even if the data is as succinct as possible, a bad connection or crowded wi-fi can make your site look slow. An example of this sort of method can be seen on google search results. Each page requires a new querystring and page load. With the second option, the html for each page can be loaded into the dom on the first page load and then a script will manage displaying each separate page or section of data as the user interacts with the page’s navigation. The downside of this approach is that if script is disabled, as is so often the case on computers with high security settings, the only ways to recover are to display either a single page at a time using server side logic, or to display the entire listing without pagination at all, which can make for an enormously long page. The last option uses a combination of both, and can result in a smoother user experience, but also then suffers from the drawbacks of both. This last option can be seen in effect by scrolling to the bottom of a facebook page; the first “page” of content is loaded up first, and only by scrolling down is additional content then called down from the server and added to the page via javascript.

I think that’s enough of the bad news! You’re here to find a way to circumvent all of these headaches so that you can give even the most restrictive browsers as much access to your content and with the very best user experience possible.

Lets get started shall we?

We’ll start with a sample of how you might list results currently. For ease of reading and instruction we’ll keep the content short and sweet, and we’ll keep our pages limited to 3 results per page.

We have to make a few changes to this to make it work in pages. Let see what that looks like:

Now that we’ve got them separated into page containers there’s one thing that’s important to make note of. You may have noticed that page1 is actually listed last. It’s also important to note that the order of all pages that aren’t the first page isn’t relevant to this process, only that the page you want displayed by default, or first, is the last child of the .pages container. This is so that we can take advantage of a special kind of css selector in order to get around css’s inability to select nodes up the dom. If you intend to use my advanced method below however, it is necessary to display the pages in order with the only exception still being that the first page be listed last.

That selector is called the General Sibling selector, which is the last selector outlined here. This selector selects all elements that match the right hand selector that are siblings of the left hand selector only as long as they appear in the html after the left hand selector. In our sample, a rule for “#page3 ~ .page” would select #page2, and #page1, but “#page2 ~ .page” would only select #page1.

We’re going to use that selector to hide all pages that aren’t the first one.

This ensures that when the webpage loads, only one page of your list will display, and that it will be the first page. In order to give the user a way to change the pages, we need to create a page listing in our html.

The new .pageNav element can go anywhere on the page, but it must not be added as the last child of the .pages div so that our previous rules will continue to show and hide the correct divs. To get those links to functionally show their respective pages we need to make an additional tweak to our css:

These new rules showcase the two selectors that make this whole thing work. One we’ve already discussed. The new one is the :target selector, which applies to an element if it has an id that matches the hashtag (for lack of a better word) in the url. When one of the nav links is clicked, it appends it’s href to the url. A live demo of this in action is available here.

The key to this html/css trick is just outputting your first page last, which is easily possible in most content management systems. The rest of it is very simple. This solution is responsive, is 508 compliant, and search engine friendly.

Another benefit this method has over javascript is that it take advantage of the browser’s ability to remember the previous page’s hash tag, which means that if a user follows a link in your paginated listing, and clicks the back button, they’ll retain their active page.

To be fair to the other pagination methods above, this too comes with a drawback, although it is in my opinion a minor drawback. In order for this method to be fully encapsulated by html and css all html content for all pages must be loaded on the first page load, which can slow down the page if the content of each page is exceptionally large. In the case of most paginated listings however, that is rarely the case.

Advanced

Now that the base concepts have been outlined, I’d like to show you what I consider to be the correct and most exhaustive solution for applying this sort of method to a responsive site where we don’t want to limit the user to only the core html/css experience if they’ve allowed scripts on their browser.

NOTE: This implementation uses jQuery for ease of understanding, and portability. jQuery is, however, a very large library and might not be the most efficient way of accomplishing this from a performance perspective.

First, lets look at some easy changes to the html:

Specifically what we’ve done here is add previous and next buttons to each page. The reason these have been added here, and not with the rest of the navigation buttons is because without javascript enabled, we can’t properly style or control the behavior of them dynamically, so we need static but functional links that we’ll only render on our mobile view. Functionally, at smaller screen sizes (like smart phones), requiring the user to click on one of several small links next to other small links can be frustrating, and giving them the same pagination functionality, but restricting them to only previous and next navigation is a simple process that drastically improves user experience. For all of these changes, we’ll need to update our css:

You’ll notice several new lines, so lets break them down.

  • The first change is to our existing rules. We’ve added :not(.js) to the .cssPagination selector. This is going to enable us to maintain css control over the general layout of the elements, even if (when) we upgrade the functionality with javascript.
  • Next we’ve taken the liberty to hide the next and previous buttons by default, so that we don’t have two lines of navigation controls for the user to interact with.
  • The next 3 lines are going to work specifically with the two new classes (js and paginationActive) in order to give our script the ability to manage pagination without having to get its hands dirty mucking about with styles.
  • Last is the media query. If you’re familiar with responsive design and development you’re already familiar with what this does. For those of you who might not recognize the tag: this call “@media screen and (max-width: 480px)” tells the browser to only enable these rules when the device reading the browser has a screen, and the current resolution is 480 pixels wide or less. For more information on media queries read here.

Lastly we’ve added a script section, which will take over pagination when scripts are enabled (and in our case when jQuery is present):

To see this all together in action click here. To see how this setup looks without javascript enabled all you need to do is set addInjQuery at the top of the script file to false. The demo also demonstrates how the previous and next buttons respond in a responsive manner to the available screen resolution both with and without the script enabled.

NOTE: To use this script as is, I recommend using the version shown here and not the one in the demo, as it is hard-coded to a specific version of jQuery, rather than this version which is compatible with virtually any version of jQuery that you might already have on your site.

The script that was added now only works when scripts are enabled and jQuery is available. This allows the content to be enhanced progressively depending on what features are or aren’t enabled on your user’s browser and device. This ensures that no matter what device or browser your client is using they will get the best possible experience from your site in the most efficient manner possible.

To recap this method for how to paginate a listing on a web page is responsive, not dependant on javascript, not dependant on posts to the server (either synchronous or asynchronous), 508 compliant, and in most cases incredibly efficient. It is also heavily customizable to fit in any website design in any language.

That’s all for this topic. To read more by some of our other incredibly talented staff see below:

John Vine
John Vine been developing website and web applications since 2010. He grew up in Greensboro, NC and was very happy to be able to return here after graduating from Full Sail University with a bachelors in game development. John prefers the open feeling of his motorcycle which he rides right up until the cold of winter forces him back into his car. He is a Green Bay Packers fan and hopes to one day have season tickets.
By | 2017-06-16T12:34:34+00:00 March 10th, 2015|Web Development|Comments Off on Building a paginated listing with only HTML and CSS for Responsive Design

How to Plan Responsive Breakpoints

Typically people think about breakpoints in responsive designs in terms of typical screen size, and it usually works out to something like this:

  • 1024 pixels wide—Full desktop and full-size tablets.
  • 768 pixels wide—Tablets
  • 320 pixels wide—Mobile phones

These breakpoints are extremely simplified way of describing what is actually done. In reality, devices come in a very wide range of screen sizes and there are new devices coming out every day. Technically there are no common screen sizes. A website needs to work at all screen sizes, not just at the breakpoints decided upon by looking at what devices make up the largest percentage of your website traffic.

Ideally, a design should be both FLUID and RESPONSIVE so that it is optimized for all screen sizes and not just certain breakpoints. If you grab your desktop browser by the corner and drag it around to resize it, you can see how a website responds to varying screen sizes. When content is fluid, it fills up 100% width of whatever the screen size is. When content within sections is no longer appropriate for that width (the line length of text boxes getting too long to read or the items in a horizontal navigation getting too cramped to be legible, for example) then a RESPONSIVE breakpoint needs to be added so that the layout is altered in a way that makes the content work better. Therefore, the breakpoints are determined by the content and not the screen size.

Ultimately what we get by taking this approach is a website that looks good on all devices.

Our actual real best practice is to work mobile first. We typically do a desktop graphical design first so that we have all of the graphics that are required for the fullest size, but we work mobile first when planning out the content and the responsiveness of the site. If we plan out the content for the small screen of a mobile device then we have tackled the most difficult problems first, and the rest of the design becomes much easier.

 

By | 2016-11-18T14:23:17+00:00 July 8th, 2014|Web Development|Comments Off on How to Plan Responsive Breakpoints

Holyoke Gas & Electric Redesign Launched!

Beacon Technologies is very proud to announce the launch of the new Cascade site for Holyoke Gas & Electric at http://www.hged.com! This site is visually a dramatic improvement over the old.

BEFORE

homepage

Holyoke Gas & Electric Website “Before”

AFTER

Holyoke Home Page After

Holyoke Home Page “After”

It also incorporates the following fantastic functionally:

  • Responsive Design— The new site is a lovely, colorful responsive design, that looks great in the largest monitor and the smallest phone
  • Audience-based site maps—When a visitor clicks on one of the audience based icons in the site footer (like “Residential”), they are directed to an audience-based site map (http://www.hged.com/site-map/residential.aspx), displaying the pages that the client has tagged as relevant to that audience within the CMS.
  • Emergency Notifications—Two different messaging options to alert customers. One is for severe emergencies and pops up in an ajax window on every page of the site and the other is a banner message that doesn’t require visitor interaction but appears on every page of the site. There’s even a very cool animation effect for the emergency message when it is in effect.
  • Google Translate—Easy to access Google translate widget in the footer of every page of the site
  • Weather feed—Weather related info for the Holyoke area displayed from a 3rd party tool in the site footer. Note the effort devoted to make it match the site design perfectly!
  • Call to Action buttons—Editable buttons that display on the home and optionally on any interior page under the left navigation.
  • Contact Information—Editable contact information that can be displayed on any internal page under the left column navigation (http://www.hged.com/customers/start-stop-move/default.aspx)
  • Optional right column area—All internal pages can display an optional right column that includes widgets for content, images, videos or external links (http://hged.com/about/history/default.aspx)
  • Internal animated banner images— Can be incorporated on any internal page on the site (http://www.hged.com/telecom/default.aspx)
  • Department-specific design—One department at HGE required an alternate, but similar, design for marketing purposes and it can be seen here: http://www.hged.com/telecom/default.aspx
  • Google Map integration—Client can enter location details into Cascade to display an interactive Google map (http://www.hged.com/about/contact-us/delivery-instructions.aspx)
  • Custom “calculators”—These two pages are custom .NET forms that allow the visitor to calculate their own energy costs– http://www.hged.com/customers/save-energy-money/energy-efficiency/carbon-foorprint-calculator.aspx and http://www.hged.com/customers/services/gas-service/gas-conversion/default.aspx
  •  Spectate integration—Any internal page can display a Spectate-based online form as created and maintained by the client (http://www.hged.com/about/contact-us/default.aspx)
  • Web and social media tracking– The site makes extensive use of web and social media tracking tools so that the client can be well informed of all client interaction with the site.

The client is just thrilled with the beautiful site– “Everyone here at HG&E is so very excited about this project! The design is amazing, the CMS is great, I have had very positive feedback from all our employees!”  Congrats to the entire Beacon team for a job well done!

 

 

By | 2016-11-21T18:18:11+00:00 December 16th, 2013|Beacon News|Comments Off on Holyoke Gas & Electric Redesign Launched!

Is Flat Design For You?

As technology and the familiarity with it grows, designers and developers are now more than ever trying to enhance the website design world. Inevitably, this leads to countless passing trends that come and go much like any design industry. Which leaves us begging the question, how do we know what is more than just a trend and does it fit our website needs?

Flat design has been a fairly controversial topic since the beginning. Industry leaders such as Microsoft, Apple, and Google have all jumped on board lending us to believe there may be something more to this. So how can flat design benefit your site?

Flat Design Is Responsive Friendly

writer-responsive-blog-theme

Image credit to: www.wpexplorer.com/writer-blog-wordpress-theme

More and more we are finding people are using smartphones as a replacement for their computers. In 2012, more tablets and smartphones were purchased than computers. Because of this, responsive websites have now become a necessity. With the simplistic nature of flat design sizing elements down to fit a mobile device or tablet becomes that much easier. By using a lot of white space and large buttons flat design becomes very flexible when considering responsive website.

 

Flat Design Is Content Friendly

The mystery of, “What is more important? Content? Or Design?” has been solved. The answer is neither. Both equally important. Design attracts your users, but your content keeps them on your site. So why would you not leverage your design to showcase your content? Flat design’s clean and minimal layouts provide an environment that allows your content to stand out. Content communicated in a simple and clear manner is more easily digested by the user.

 

 Flat Design is User Friendly

Although minimal, flat design has a high level of focus on aesthetics generally utilizing bright colors and large imagery. This coupled with the elimination of borders and shadows entices the user’s eye to flow across your site with ease. Flat design strips down to the most basic form of design that can be appreciated by anyone.

The goal for any website design is to carry the message of your business across to the user. Your design should always highlight the content and focus on the user’s experience. Here at Beacon, we are constantly researching design trends and movements to ensure that our client’s websites are ahead of their time and solidified as legitimate marketing tools.

 

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Web Development|Comments Off on Is Flat Design For You?

Considering Drawer Style Site Navigation

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Mashable mega drop down navigation

University of Wyoming drawer based navigation

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

By | 2016-05-27T10:13:29+00:00 April 22nd, 2013|Web Development, Creative Design|2 Comments

The Responsive Universal Menu Icon

Responsive website design will take over the internet, it’s inevitable. It’s a beautiful answer to the question of how to make content on the internet appropriate for a wide array of devices and screen sizes. With each new design and development approach comes a whole new set of standards.

Often the best way to deal with the menu in responsive design is to either stack it, creating an array of buttons or hide it in a drawer. Hiding the menu always seemed like it would compromise usability to me, but I’ve now accepted it as a reasonable way to deal with the main navigation of a site when it gets down to being displayed on a small screen size. Consider this, the menu isn’t always needed for navigation, especially with the type of casual browsing someone may be doing from a mobile phone (while bored, waiting in line, at Starbucks).

Now that this technique is becoming standard, a universal icon is emerging to represent that menu that you instantly recognize. I present to you:

This seems to be the icon that is being most commonly used so far and seems to be quickly becoming a universally recognized symbol for a flyout navigation.

A few other options exist, however.

A menu in a standard type of drop down like shown above is not a bad option. But I think because that type of drop down is often used for many other areas (like contact forms) it isn’t immediately recognized as a main navigation and may confuse some users.

The grid icon is also sometimes seen and it’s commonly used to represent the menu in apps because they often utilize and icon based grid navigation. But for websites with text link navigations this symbol doesn’t directly relate.

I think it’s interesting how design is responding to responsive websites and creating graphics to suit it’s needs. Time will tell if the three line icon will become a true standard or if more innovative ways of showing navigations will arise.

By | 2016-11-22T09:48:16+00:00 November 1st, 2012|Web Development|2 Comments
Load More Posts