SlideShare une entreprise Scribd logo
1  sur  2
Télécharger pour lire hors ligne
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.

Contenu connexe

Dernier

(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)oannq
 
Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxShubham Rawat
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证kbdhl05e
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...JeylaisaManabat1
 
E J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxE J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxJackieSparrow3
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan
 

Dernier (6)

(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)
 
Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptx
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
 
E J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxE J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptx
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
 

En vedette

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)contently
 
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 2024Albert Qian
 
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 InsightsKurio // The Social Media Age(ncy)
 
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 2024Search Engine Journal
 
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 summarySpeakerHub
 
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 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 Tessa Mero
 
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 IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
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 managementMindGenius
 
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...RachelPearson36
 
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...Applitools
 
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 WorkGetSmarter
 
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...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
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 wellSaba Software
 

En vedette (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.