SlideShare uma empresa Scribd logo
1 de 2
Baixar para ler offline
Quick Tips to Build an Effective Responsive Web Application
Responsive web design is something you’ll hear about time and again but what about web applications?
They need to be responsive too and when designing and developing apps it is essential that
responsiveness is at the heart of every decision. Building a responsive web app isn’t as daunting as it may
sound.
Below we’re discussing the key concepts in this type of design and then how you would actually develop a
responsive web app.
The Core Principles of Responsive Design
Web site developers have been working with responsive design for some time now and applying these
principles to app development isn’t a huge step. One of the key principles of responsive design is that you
can’t assume too much about the end-user. Not all mobile devices are touch screen for example and not
all screen sizes are the same. There is no way of second guessing every possible end-user situation.
Focusing on each feature individually rather than presuming will make for a better design that is genuinely
responsive to the end users’ needs.
Responsive web design deals in developing designs where the screen’s width isn’t standard. Many tools
have been created to handle these problems from relative units to responsive images. The concept is
effective but there are still technical issues you need to work on.
Responsive design is very much focused on client-end solutions. Responsive measures will be taken on the
client side including:
• Applying styles through media queries
• Loading additional content
• Using <picture> or @srcset to retrieve responsive images
Responsive Behavior
Responsive web design is essentially about layout and design but as web site developers we also need to
think about responsive behavior. This is what makes applications different from regular websites.
Responsive web design utilities fluid grids and responsive images but when we look at web applications
there is a further need for responsiveness in loading modules to respond to screen size and device
capability.
Building Responsive Web Apps
To build responsive web apps we need to keep the end-user in mind at all times and this can be done
through declarative module specification, setting conditions for loading modules and extending
modules/variants based on specific feature detection and media queries.
Responsive behavior allows for a huge amount of flexibility in how each application is designed and built.
We need to look at these ‘modules’ and how they can be related to the structure of web applications.
Implementing Application Modules
The combination of declarative application composition, module extension and responsive module loading
opens up a huge range of opportunities to implement and utilize application modules in ways to benefit
your end users.
Performance and Usability
In some instances there have been cases of responsive web design that actually decrease the performance
of a website when not implemented properly, such as through the addition of a few media queries of
JavaScript. As web site developers we should be thinking of things from the perspective of mobile first
always and load only what is necessary. Responsive web design and app design is scalable and will respond
to the device in question.
Scalability
Responsive behavior makes for a very powerful tool in many web scenarios as it can be used in a number
of different sequences. The approach is highly scalable and it can be used sparingly on static content
websites, used to compose entire context-aware applications in HTML using application modules and it all
boils down to the maximization of portability.
Future-Proof
Building applications responsively, using HTML5, guarantees a future-proof product. Your development
won’t disappear into the ether within a year or two and the number of platforms which have developed to
support HTML5 applications are growing practically on a daily basis.
Conclusion
Very few of the largest websites out there have developed a truly responsive design or indeed a truly
responsive web application. However, this doesn’t mean you shouldn’t as responsive web apps is an area
where you could profit and there is huge opportunity for development and creativity in this field.
Declarative composition for responsive apps is just one possibility and is probably the best place to begin.

Mais conteúdo relacionado

Último

February 2024 Recommendations for newsletter
February 2024 Recommendations for newsletterFebruary 2024 Recommendations for newsletter
February 2024 Recommendations for newsletter
ssuserdfec6a
 

Último (7)

HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochureHONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
 
Time Management by Akshit Jain ctld .ppt
Time Management by Akshit Jain ctld .pptTime Management by Akshit Jain ctld .ppt
Time Management by Akshit Jain ctld .ppt
 
March 2023 Recommendations for newsletter
March 2023 Recommendations for newsletterMarch 2023 Recommendations for newsletter
March 2023 Recommendations for newsletter
 
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochureHONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
 
Social Learning Theory presentation.pptx
Social Learning Theory presentation.pptxSocial Learning Theory presentation.pptx
Social Learning Theory presentation.pptx
 
2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga
 
February 2024 Recommendations for newsletter
February 2024 Recommendations for newsletterFebruary 2024 Recommendations for newsletter
February 2024 Recommendations for newsletter
 

Destaque

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 

Destaque (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 

Quick Tips to Build an Effective Responsive Web Application

  • 1. Quick Tips to Build an Effective Responsive Web Application Responsive web design is something you’ll hear about time and again but what about web applications? They need to be responsive too and when designing and developing apps it is essential that responsiveness is at the heart of every decision. Building a responsive web app isn’t as daunting as it may sound. Below we’re discussing the key concepts in this type of design and then how you would actually develop a responsive web app. The Core Principles of Responsive Design Web site developers have been working with responsive design for some time now and applying these principles to app development isn’t a huge step. One of the key principles of responsive design is that you can’t assume too much about the end-user. Not all mobile devices are touch screen for example and not all screen sizes are the same. There is no way of second guessing every possible end-user situation. Focusing on each feature individually rather than presuming will make for a better design that is genuinely responsive to the end users’ needs. Responsive web design deals in developing designs where the screen’s width isn’t standard. Many tools have been created to handle these problems from relative units to responsive images. The concept is effective but there are still technical issues you need to work on. Responsive design is very much focused on client-end solutions. Responsive measures will be taken on the client side including: • Applying styles through media queries • Loading additional content • Using <picture> or @srcset to retrieve responsive images Responsive Behavior Responsive web design is essentially about layout and design but as web site developers we also need to think about responsive behavior. This is what makes applications different from regular websites. Responsive web design utilities fluid grids and responsive images but when we look at web applications there is a further need for responsiveness in loading modules to respond to screen size and device capability. Building Responsive Web Apps To build responsive web apps we need to keep the end-user in mind at all times and this can be done through declarative module specification, setting conditions for loading modules and extending modules/variants based on specific feature detection and media queries.
  • 2. Responsive behavior allows for a huge amount of flexibility in how each application is designed and built. We need to look at these ‘modules’ and how they can be related to the structure of web applications. Implementing Application Modules The combination of declarative application composition, module extension and responsive module loading opens up a huge range of opportunities to implement and utilize application modules in ways to benefit your end users. Performance and Usability In some instances there have been cases of responsive web design that actually decrease the performance of a website when not implemented properly, such as through the addition of a few media queries of JavaScript. As web site developers we should be thinking of things from the perspective of mobile first always and load only what is necessary. Responsive web design and app design is scalable and will respond to the device in question. Scalability Responsive behavior makes for a very powerful tool in many web scenarios as it can be used in a number of different sequences. The approach is highly scalable and it can be used sparingly on static content websites, used to compose entire context-aware applications in HTML using application modules and it all boils down to the maximization of portability. Future-Proof Building applications responsively, using HTML5, guarantees a future-proof product. Your development won’t disappear into the ether within a year or two and the number of platforms which have developed to support HTML5 applications are growing practically on a daily basis. Conclusion Very few of the largest websites out there have developed a truly responsive design or indeed a truly responsive web application. However, this doesn’t mean you shouldn’t as responsive web apps is an area where you could profit and there is huge opportunity for development and creativity in this field. Declarative composition for responsive apps is just one possibility and is probably the best place to begin.