image representing the current explore topic

Responsive Guidelines

What does responsive mean?

Responsive design is a way in which we can keep our site accessible regardless of what device a user visits on. When a user visits the site on a high res desktop computer they get the full experience, while a user visiting on an older phone gets a slightly different experience formatted for thier device. In most cases both users are still able to access all of the same information/features available on the site. To achieve this the web team has put a lot of effort into making every plugin, template, and js application capable of resizing and shifting to fit a myriad of browser sizes and capabilities through the use of breakpoints.

 

Breakpoints

A breakpoint is a width at which different css features are activated, this is the thing that makes reformatting the site for each device possible. We currently have five breakpoints: Desktop Only, Laptop, Tablet, Mobile, Retina, and Print which cover nearly every size we could ever need. We approach things from a desktop first point of view due to the size of our datasets and because our user base is primarily on a laptop or desktop computer.
 

Breakpoint Sizes

Breakpoint SCSS Mixin Active when
Desktop
n/a
@include DesktopOnly { // My Styles }  > 1000px
Laptop
$sizeLaptop
@include Laptop { // My Styles } < 1000px
> 770px
Tablet
$sizeTablet
@include Tablet { // My Styles } < 770px
> 430px
Mobile
$sizeMobile
@include Mobile { // My Styles } < 430px
Retina
n/a
@include Retina { // My Styles } > 192dpi
Print @include Print { // My Styles } In print mode

 

Creating Responsive Friendly Content

When creating responsive friendly content it's a good idea to keep your image sizes, table widths, and link destinations in mind.

 

Images

We've all heard that images are worth a thousand words, but they're worth far fewer when a user can't see the image or tell what it is. It is for this reason that it is important to pick images for your pages carefully. Images should be taller than they are wide or adhere to a max width of 420px to accomodate mobile users. Additionally they should not contain link text or small unreadable text, keep in mind the text will scale with the image and may become unreadable on especially large or small devices. Images should be a reasonable size, a large 4000x4000 image is going to take a while to load regardless of the device being used and should probably be constrained to no more than one to four megabytes. Lastly, and this may seem obvious, it should be easy to tell what an image is. Odd images with unclear visuals can confuse users and hurt thier ability to understand the content.

 

Images should:

  • Be taller than they are wide or a max of 420px

  • Not contain small text (text may be unreadable on smaller/bigger devices)

  • Contrained to a reasonable size (1 - 4mb)

  • Have a clear subject

 

Tables

Since our content contains quite a few tables we should ensure that the content is available to any user that hits the page, this means, again, accomadating mobile users. Our data tables tend to be wide, containing upwords of nine to ten columns which is going to force a mobile user to scroll left and right to access the table's content. Much like images taller is better than wide, more rows is better than more columns. Additionally, tables should not contain large or unclear images, these can make browsing them on mobile devices difficult.

 

Tables should:

  • Be limited to three/four columns when possible

  • Not contain large images

 

Links

Links should be clearly defined, self describing, and clearly labeled. Users searching for our data on Google, Bing, Duck Duck Go, or somewhere else expect to find our sites as well as specific pages related to their search. Each of these search engines uses links when determining how related a page is to the user's search criteria, this means we need to keep our links clear and self describing. A link should never read: "go here to read about transcriptomics" or "Download Data", neither of these links makes sense on thier own, especially to a search engine crawler! Good links read like: "More on Understanding Transcriptomics." or "Download RNA Seq Data", both links explain themselves without additional reading and will improve our search engine results. Lastly if you're linking to an external site, see if there isn't a mobile friendly option, it'll help our search engine rankings and keep our users happy.

 

Links shoud:

  • Lead to responsive content

  • Have clear, self describing labels

  • Never be never be blank images