II.
LibraryProcess overview
Reference · livelib-process:ux-ui-design--responsive-design
specializations/ux-ui-design/responsive-design overview
Responsive Design Implementation - Comprehensive responsive design process for creating adaptive, mobile-first interfaces that work seamlessly across all devices and screen sizes, including breakpoint strategy, fluid layouts, responsive typography, touch optimization, performance testing, and cross-device validation.
Attributes
displayName
specializations/ux-ui-design/responsive-design
description
Responsive Design Implementation - Comprehensive responsive design process for creating adaptive,
mobile-first interfaces that work seamlessly across all devices and screen sizes, including breakpoint strategy,
fluid layouts, responsive typography, touch optimization, performance testing, and cross-device validation.
libraryPath
library/specializations/ux-ui-design/responsive-design.js
specialization
ux-ui-design
references
- - Responsive Web Design: https://alistapart.com/article/responsive-web-design/
- - Mobile First: https://www.lukew.com/ff/entry.asp?933
- - Responsive Images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- - CSS Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- - Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- - Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
- - Touch Target Guidelines: https://web.dev/accessible-tap-targets/
- - Core Web Vitals: https://web.dev/vitals/
example
const result = await orchestrate('specializations/ux-ui-design/responsive-design', {
projectName: 'E-Commerce Platform',
pages: ['home', 'product-listing', 'product-detail', 'checkout', 'account'],
components: ['navigation', 'hero', 'product-card', 'footer', 'forms'],
designSystem: { colors: {}, typography: {}, spacing: {} },
breakpoints: { mobile: 320, tablet: 768, desktop: 1024, wide: 1440 },
approach: 'mobile-first',
performanceTargets: { lcp: '2.5s', fid: '100ms', cls: '0.1' }
});
usesAgents
- general-purpose
Outgoing edges
lib_applies_to_domain1
- domain:web-development·DomainWeb Development
lib_belongs_to_specialization1
- specialization:ux-ui-design·Specialization
lib_covers_topic1
- topic:responsive-design·TopicResponsive Design
lib_implements_workflow2
- workflow:user-feedback-loop·WorkflowUser Feedback Loop
- workflow:product-discovery·WorkflowProduct Discovery
lib_involves_role2
- role:product-designer·RoleProduct Designer
- role:ux-researcher·RoleUX Researcher
lib_requires_skill_area2
- skill-area:design-systems·SkillAreaDesign Systems
- skill-area:interaction-design·SkillAreaInteraction Design
Incoming edges
None.