RESPONSIVE DESIGN

In a world of all shapes and sizes.

Functional design for different interface capabilities.

WHAT & WHY

important phrase

We create adaptable websites to reach all audiences.

WHAT

Responsive design is the concept of one website design that adjusts to the user's environment and behavior. It is about designing a layout that changes based on the size and capabilities of the device, instead of designing separate layouts targeted at a specific device.

Content is Like Water

Website layouts must be adaptive to fit all device shapes and sizes.

Website layouts must be adaptive to fit all device purposes, whether that is screen display or printer output.

In today's world there are thousands of different device sizes and platforms through which audiences access websites and the information on those websites. Design should deliver the flexibility to produce a quality experience no matter the device size or configuration, no matter whether the information is to be viewed or printed.

WHY

Mobile internet usage is so prevalent in today's world. In 2015, Google decided to rank sites that are mobile-friendly higher than sites that are not responsive. This change has major negative implications for existing web presences.

There are millions of first and second generation websites that are not mobile friendly and risk no longer being easily found through search.

SoftScience Web Media's software engineers can fix this critical problem by retrofitting or re-designing your web presence to be mobile‐friendly so that Google finds you relevant. While we're at it we can improve your search engine footprint by applying Search Engine Optimization (SEO) best practices.

Cellphone Research Data Pie Chart

According to Pew Research Center's American Trends Panel Survey in 2015:

  • 64% of American adults owned a smart-phone (meaning some likely web usage via mobile device)
  • 10% had no other broadband service
  • 15% had limited options for online access other than cell phones
  • 7% were smart-phone dependent (meaning they rely almost exclusively on their cell phones for online access because of limited options to access other services)
  • Source: www.pewinternet.org

"10% of Americans own a smartphone but do not have any other form of high-speed internet access at home beyond their phone's data plan." – Pew Reasearch Center

BROWSERS

Website layouts must be designed to work the same on all flavors of web browser technology in use by a client's target audience. While browser standardization is improving, there are still significant portions of the potential audience that may not be using browsers which support the latest web technologies.

Good design provides for 'graceful failure' where if a technology is not supported, the browser is given instructions on how to render an acceptable alternative version of the content.

Web presences must reliably deliver the content, no matter the browser.

MOBILE FIRST vs DESKTOP DOWN

important phrase

Start big shrink smaller. Start small grow bigger.

Mobile First design or Desktop Down design is a key strategy decision for development.

When planning for responsiveness, you must again consider the purpose of the website. Who is the target audience? Will more users be accessing the site on a desktop browser, or are mobile users the primary target? These questions are crucial to the responsive design of a website.

The process of making a site responsive should be undertaken differently depending on the answers.

Desktop Down

Desktop Down

With desktop-down design a website is designed for a larger screen first, then modified for smaller devices and focusing on the mobile version last. Think of it as adding all the elements you want to display on the site then adjusting and modifying the elements to fit on smaller screens as the viewport shrinks.

With desktop first design, your large/desktop CSS styles act as the regular CSS and as the screen size gets smaller, styles get overridden by media queries that adjust the styling.

Mobile First

Mobile First

Mobile First design focuses on mobile display before even considering the desktop version. You first plan the mobile layout then add elements as the screen sizes grow, focusing on the desktop version last.

Mobile first design makes for a more reliable and optimized mobile site because the CSS styles for the desktop version are simply ignored, and don't hold up the loading time of the page for elements that are hidden but needed in full desktop version.

The small device size or mobile CSS styles act as the regular CSS and as the screen size increases additional elements are loaded as needed and the mobile styles are overridden by media queries to provide the larger layout styling.

TECHNIQUES

important phrase

It's all in how you do it.

Media queries, relative units, and flexible media are lower level techniques for implementing responsive design. Fluid grids, elastic grids, and hybrid frameworks and are higher level approaches used to make websites responsive.

Fluid Responsiveness

With fluid responsiveness, blocks of content move underneath preceding content that would normally be positioned next to each other in a wider display.

The content of the website should be a guide for picking the appropriate breakpoints (the max or min width when a style needs to change) to use in media queries. The best practice is to pick the fewest, but necessary breakpoints that create the most effective experience at that specific viewing size.

When deciding which breakpoints to use in media queries, standard device sizes for mobile phones, tablets, laptops and desktops should be kept in mind.

Elastic Responsiveness

With elastic responsiveness, blocks of content preserve their relative position with each other and shrink/expand uniformly as the display width changes.

If the position of content elements helps provide better understanding of the content, then elastic responsiveness may be a better choice. The main drawback is that shrinking elements below an easily readable size destroys understanding.

Fluid‐Elastic Hybrid Systems

A staged combination of elastic resizing followed by fluid block movement is usually the optimal choice but also more complex to implement. Some CSS frameworks provide excellent starting points to build designs that combine the best of elastic and fluid responsiveness.

Responsive Design

WHAT & WHY

important phrase

We create adaptable websites to reach all audiences.

WHAT

Responsive design is the concept of one website design that adjusts to the user's environment and behavior. It is about designing a layout that changes based on the size and capabilities of the device, instead of designing separate layouts targeted at a specific device.

Content is Like Water

Website layouts must be adaptive to fit all device shapes and sizes.

Website layouts must be adaptive to fit all device purposes, whether that is screen display or printer output.

In today's world there are thousands of different device sizes and platforms through which audiences access websites and the information on those websites. Design should deliver the flexibility to produce a quality experience no matter the device size or configuration, no matter whether the information is to be viewed or printed.

WHY

Mobile internet usage is so prevalent in today's world. In 2015, Google decided to rank sites that are mobile-friendly higher than sites that are not responsive. This change has major negative implications for existing web presences.

There are millions of first and second generation websites that are not mobile friendly and risk no longer being easily found through search.

SoftScience Web Media's software engineers can fix this critical problem by retrofitting or re-designing your web presence to be mobile‐friendly so that Google finds you relevant. While we're at it we can improve your search engine footprint by applying Search Engine Optimization (SEO) best practices.

Cell Phone Research Data Pie Chart

According to Pew Research Center's American Trends Panel Survey in 2015:

  • 64% of American adults owned a smart-phone (meaning some likely web usage via mobile device)
  • 10% had no other broadband service
  • 15% had limited options for online access other than cell phones
  • 7% were smart-phone dependent (meaning they rely almost exclusively on their cell phones for online access because of limited options to access other services)
  • Source: www.pewinternet.org

"10% of Americans own a smartphone but do not have any other form of high-speed internet access at home beyond their phone's data plan." – Pew Reasearch Center

BROWSERS

Website layouts must be designed to work the same on all flavors of web browser technology in use by a client's target audience. While browser standardization is improving, there are still significant portions of the potential audience that may not be using browsers which support the latest web technologies.

Good design provides for 'graceful failure' where if a technology is not supported, the browser is given instructions on how to render an acceptable alternative version of the content.

Web presences must reliably deliver the content, no matter the browser.

Mobile phone - Desktop Down vs. Mobile First

MOBILE FIRST vs DESKTOP DOWN

important phrase

Start big shrink smaller. Start small grow bigger.

Mobile First design or Desktop Down design is a key strategy decision for development.

When planning for responsiveness, you must again consider the purpose of the website. Who is the target audience? Will more users be accessing the site on a desktop browser, or are mobile users the primary target? These questions are crucial to the responsive design of a website.

The process of making a site responsive should be undertaken differently depending on the answers.

Desktop Down

Desktop Down

With desktop-down design a website is designed for a larger screen first, then modified for smaller devices and focusing on the mobile version last. Think of it as adding all the elements you want to display on the site then adjusting and modifying the elements to fit on smaller screens as the viewport shrinks.

With desktop first design, your large/desktop CSS styles act as the regular CSS and as the screen size gets smaller, styles get overridden by media queries that adjust the styling.

Mobile First

Mobile First

Mobile First design focuses on mobile display before even considering the desktop version. You first plan the mobile layout then add elements as the screen sizes grow, focusing on the desktop version last.

Mobile first design makes for a more reliable and optimized mobile site because the CSS styles for the desktop version are simply ignored, and don't hold up the loading time of the page for elements that are hidden but needed in full desktop version.

The small device size or mobile CSS styles act as the regular CSS and as the screen size increases additional elements are loaded as needed and the mobile styles are overridden by media queries to provide the larger layout styling.

Responsive Techniques - Macbook

TECHNIQUES

important phrase

It's all in how you do it.

Media queries, relative units, and flexible media are lower level techniques for implementing responsive design. Fluid grids, elastic grids, and hybrid frameworks and are higher level approaches used to make websites responsive.

Fluid Responsiveness

With fluid responsiveness, blocks of content move underneath preceding content that would normally be positioned next to each other in a wider display.

The content of the website should be a guide for picking the appropriate breakpoints (the max or min width when a style needs to change) to use in media queries. The best practice is to pick the fewest, but necessary breakpoints that create the most effective experience at that specific viewing size.

When deciding which breakpoints to use in media queries, standard device sizes for mobile phones, tablets, laptops and desktops should be kept in mind.

Elastic Responsiveness

With elastic responsiveness, blocks of content preserve their relative position with each other and shrink/expand uniformly as the display width changes.

If the position of content elements helps provide better understanding of the content, then elastic responsiveness may be a better choice. The main drawback is that shrinking elements below an easily readable size destroys understanding.

Fluid‐Elastic Hybrid Systems

A staged combination of elastic resizing followed by fluid block movement is usually the optimal choice but also more complex to implement. Some CSS frameworks provide excellent starting points to build designs that combine the best of elastic and fluid responsiveness.

Back arrow

Go Back

Content
Development

Up Next

Next arrow

Promotion
& Analytics

Back to Top