Responsive vs Adaptive Web Design - What about Device Channels?
5 likes12,882 views
The document discusses the distinction between responsive web design (RWD) and adaptive web design (AWD) with a focus on device channels in SharePoint 2013. It highlights features such as performance optimization, user experience tailoring, and the need for different outputs for various devices. The presentation emphasizes the importance of considering user context and design that accommodates future technology trends.
1 of 54
Downloaded 21 times
Ad
Recommended
Device channels v/s Responsive web design
Device channels v/s Responsive web designPrashanth BS The document outlines the advantages and limitations of device channels and responsive web design for optimizing website performance across different devices. Device channels allow for targeted content rendering, improved user experience, and traffic routing, while also limiting rendering size by excluding irrelevant content. It also emphasizes the importance of combining both approaches to ensure a robust and future-proof solution for various devices.
News Portal Wordpress Themes
News Portal Wordpress ThemesOscar338Stover The document describes 12 premium WordPress news and magazine themes. It provides brief descriptions of each theme, highlighting their key features such as responsive design, custom widgets, control panels and options for customization. Users can click on the provided links to see demos of each theme.
S. Responsive Web Design
S. Responsive Web Designshelly3160 The document discusses responsive web design (RWD) which uses a single code base that adapts layout and functionality based on screen size. RWD uses flexible layouts with percentages instead of pixels, flexible images that scale proportionally, and media queries to apply different CSS styles based on screen width. This allows websites to automatically adapt to phones, tablets, laptops and other devices to provide the best possible viewing and interaction experience for the user. Testing across devices is important for RWD to ensure proper functionality and performance.
Introduction flash
Introduction flashMuhammad Yusuf This document provides an introduction to the Adobe Flash CS3 interface and functionality. It describes key elements such as the stage, timeline, layers, panels, tools, frames and keyframes. It also covers topics like symbols, libraries, animation using tweening, incorporating sound, and using ActionScript code. The overall purpose is to familiarize new users with the basic building blocks and features of the Flash authoring environment.
Workshop XenDesktop4 day 1
Workshop XenDesktop4 day 1marcelvenema This document provides an agenda for a Citrix XenDesktop 4 workshop taking place over three evenings. The workshop will cover an overview of XenDesktop editions and licensing, building blocks and architecture. It will also review exam training. The document outlines the FlexCast delivery models for hosted shared desktops, pooled VDI desktops and assigned VDI desktops. It discusses various architecture considerations for the hypervisor, CPU and memory, and storage. Finally, it touches on desktop delivery, provisioning, USB devices and asks if there are any questions.
Introduction to WordPress
Introduction to WordPressMichelle Castillo Michelle Castillo is an expert in WordPress and online marketing. She has helped many businesses set up and manage their WordPress websites.
Meguro.dev でのLT資料
Meguro.dev でのLT資料yusato14 This document discusses using the Amplify Console to manage cloud services for progressive web applications. The Amplify Console allows developers to configure services like hosting, storage, authentication and notifications to build PWAs, and it handles the underlying AWS resources. It also mentions using features like Service Workers and Web Push to enable offline functionality and notifications in PWAs, which can be managed through the Amplify Console.
The six key steps to AEM architecture
The six key steps to AEM architectureAshokkumar T A The document outlines the six key steps to create a solid AEM architecture:
1. Get the overall picture right by defining where AEM fits within the broader solution and how it will integrate with other systems. AEM can serve as an umbrella system, provider system, or independent system.
2. Map features to AEM's capabilities and validate choices through proofs of concept if using additional products. Consider licensing.
3. Design a simple, flexible content structure that supports features like multilingual and allows for future growth.
4. Plan the integration approach, aiming to integrate as close to the browser as possible when exposing services from AEM.
5. Determine the deployment model in advance as it impacts design choices
Vidfy Video platform
Vidfy Video platformKapil Nawani The video platform handles the complete content lifecycle including uploading, ingestion, publishing, reporting, and data analytics. It allows for content publishing along with channel/category mapping and includes features like pre-roll/post-roll ads, MIS reporting, intelligent content serving across devices, and social sharing integration. The platform supports bulk or individual uploads, content mapping to channels, embed codes, and analytics tracking across devices.
Enhanced video experience in SharePoint 2013
Enhanced video experience in SharePoint 2013Karthick S SharePoint 2013 enhances video experiences by simplifying video uploads, improving search capabilities, and providing a streamlined video player page that displays relevant metadata. Users can easily organize videos, embed external content from platforms like YouTube, and utilize features like tagging and view counts for better engagement. The platform's improved search functionality allows for quick identification of videos, ultimately facilitating better knowledge-sharing and training within organizations.
Supplement Web Tools
Supplement Web Toolsshelly3160 Web servers like Apache and IIS play a pivotal role in delivering content to users. The speed and capacity of the server affects performance, especially for streaming content. Site builders like Dreamweaver and FrontPage can help create pages but often generate bloated code. Common web browsers that support plugins are Internet Explorer, Firefox, Safari and Chrome, though support for standards varies. Plugins add capabilities for things like sound, video, animation and presentations.
Extending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and DataSalesforce Developers The document discusses the vision for office extensibility through modern add-ins, highlighting their differences from traditional methods. It covers the development patterns for building add-ins that utilize Salesforce APIs, emphasizing decentralization and discoverability. Additionally, it outlines the advantages of using web standards, demonstrating various features and functionalities specific to office add-ins.
When You're Getting Good at an Obsolete Technology
When You're Getting Good at an Obsolete TechnologyInsum Solutions The document outlines the features and configurations of the APEX Front-End Boost, a tool designed to enhance application development with Oracle APEX, including static file handling and project setup. It details prerequisites, installation steps, and advanced options such as minifying and concatenating CSS and JavaScript for better performance. The document also provides information on error handling and customization through a config file.
2012Technology Preview
2012Technology Previewdcpsweb The document provides an overview of new features for school websites including:
1. Introduction of a new web server infrastructure using Windows 2008 R2 to allow for improved development options such as ASP.NET, PHP, and MySQL.
2. A hosting control panel will give schools dedicated access to configure their site settings.
3. Development options include continued use of Frontpage, distribution of Visual Studio Express, and content management using Wordpress or Weebly.
4. Plugin tools and an improved @DCPSWeb communication channel will provide resources and guidelines for web publishing.
5. An iTunes U site and conference in March will provide training materials and workshops on the new technologies.
Keeping Current with ColdFusion - Adobe Max 2011
Keeping Current with ColdFusion - Adobe Max 2011Rupesh Kumar This document discusses how ColdFusion has evolved to meet modern web development challenges and how the new Zeus release takes it further. It covers how ColdFusion supports rich interactive applications through AJAX, Flex, HTML5 charting, websockets and mobile support. It also looks at ColdFusion's role as an enterprise integration hub through features like Exchange, SharePoint and RESTful web services integration. The document concludes by addressing developer productivity features in ColdFusion like ORM, caching, office integration and the new ColdFusion Builder IDE.
Christy Reuter software evaluation
Christy Reuter software evaluationChristy Reuter This document compares and evaluates the software programs EasyWorship and MediaShout for use in church presentations. EasyWorship has more advanced features like video feeds, DVD clips, and web integration but is more expensive at $399. MediaShout is simpler with features like importing PowerPoints and displaying lyrics and bible verses for $199. The recommendation is for EasyWorship despite the higher price because it has useful future features, is more user friendly for training others, and allows use on multiple computers simultaneously.
CCI 2019 - Architettare componenti in SPFx, esperienze sul campo
CCI 2019 - Architettare componenti in SPFx, esperienze sul campowalk2talk srl Fabio Franzini, an independent senior consultant and Microsoft MVP, presented at the Cloud Conference Italia 2019 on architecting components in SPFx. He emphasized the importance of making SharePoint client-side web parts configurable, highlighting features like pages, headers, and groups to enhance user interaction. The talk included a demo of using various frameworks and controls, encouraging engagement through Q&A.
Daughter Themes
Daughter ThemesPaul Bearne The document explains the concept of daughter themes (child themes) in WordPress, emphasizing their importance for customizing websites without losing changes after updates. It provides a guide on how to create and install a daughter theme, including necessary coding details and installation steps. Additionally, it outlines limitations and references for further reading on the topic.
ECS19 Bert Jansen - Modernizing your existing sites
ECS19 Bert Jansen - Modernizing your existing sitesEuropean Collaboration Summit This document discusses modernizing classic SharePoint sites. It provides an overview of the capabilities of modern sites and features that can apply to most classic sites. It demonstrates tools for understanding, remediating, and modernizing classic sites, including a modernization scanner, techniques for transforming different classic page types like wiki and publishing pages, and options for in-place or cross-site modernization. The document encourages starting the modernization journey to reduce growing modernization debt.
Enhanced Video Experience in SharePoint 2013
Enhanced Video Experience in SharePoint 2013Mai Omar Desouki This document discusses the enhanced video experience in SharePoint 2013. It includes:
- An HTML5 video player that supports video playback without plugins
- A new video player page that surfaces metadata about each video
- Easy video upload through drag and drop
- Built-in thumbnail generation for videos
- New digital asset content types for audio, video, and images
- Features for tagging, rating, and viewing video usage statistics
- Support for multiple video formats and renditions
- Improved video search capabilities
Best wordpress hosting
Best wordpress hosting ken1990julius The document compares various types of web hosting options for WordPress sites, including shared, dedicated, VPS, and managed WordPress hosting. It highlights the pros and cons of each hosting type, detailing aspects such as cost, performance, security, and the level of management required. Additionally, it provides a comparison of popular managed hosting solutions, emphasizing their features and pricing.
Investigación obs. mobile commerce 2013
Investigación obs. mobile commerce 2013Social You, S.L. Este documento analiza la infraestructura tecnológica, la oferta y la demanda en el mercado móvil y su impacto en el comercio minorista. Brevemente: (1) La penetración de smartphones y tabletas está acelerando el crecimiento de las ventas minoristas online. (2) Los minoristas deben adaptar sus sitios web para operar desde dispositivos móviles y ofrecer wifi y pagos móviles. (3) Los consumidores móviles están cambiando sus hábitos y demandan comprar desde cualquier lugar.
From Design to a modern Style Guide
From Design to a modern Style GuideStefan Bauer This document discusses branding strategies for SharePoint and add-ins. It emphasizes that branding should focus on content, not just the application. It also discusses the benefits of maintaining a style guide, including design and code consistency, easier testing, and providing a shared vocabulary. The document recommends building HTML and design first before documenting styles. It suggests that responsive deliverables for clients should resemble fully-functioning systems like Twitter Bootstrap. It provides examples of style guides from various organizations and concludes by inviting questions and feedback.
Responsive Web Design and SharePoint
Responsive Web Design and SharePointStefan Bauer This document discusses responsive web design. It begins by stating that responsive design is about content and context, not devices. It then covers fluid grids and flexible layouts using media queries. Grid systems help bring order and structure to layouts. Images, videos, typography and other elements need flexible solutions to respond to different screen sizes. Frameworks provide tools for responsive design but have some potential pitfalls, so tailoring them to specific needs is important.
Responsive vs. adaptive vs. device-specific: which one is best?
Responsive vs. adaptive vs. device-specific: which one is best?Catalyst This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.
SharePoint 2013 Mobile Intranet Strategy #SEASPC
SharePoint 2013 Mobile Intranet Strategy #SEASPCJoel Oleson The document outlines a mobile strategy for SharePoint 2013, highlighting key features and considerations for device support and design. Joel Oleson, recognized as a top SharePoint influencer, discusses the importance of responsive design and mobile management strategies for organizations. It also addresses gaps in current mobile offerings and potential future developments in mobile applications for SharePoint and Office.
Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationSolTech, Inc. This document discusses responsive web design using the ZURB Foundation 5 framework. It defines responsive web design and its benefits over adaptive, mobile-first, and native app approaches. It outlines the key concepts of the Foundation grid system, responsive images and media, media queries, and customizing Foundation. It also provides resources for UI development tools and testing responsive designs.
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)Jamshaid (Jam) Hashmi The document compares adaptive web design (AWD) and responsive web design (RWD), outlining their definitions, similarities, advantages, and disadvantages. AWD uses server-side detection and specific files for different devices, resulting in faster loading times but requires separate maintenance, while RWD uses CSS to adjust presentation fluidly for all devices, typically with slower load times. The document also emphasizes the importance of analyzing traffic data to identify lost opportunities and suggests which design approach may be better suited for diverse mobile environments.
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer This document discusses methods for deploying branding assets in Office 365 and SharePoint 2013/2016. It covers the pros and cons of traditional deployment methods like copying and pasting files or using farm and sandbox solutions versus newer approaches like provider-hosted and SharePoint-hosted add-ins or PowerShell deployment. Specific assets that can be deployed are listed. The document then dives deeper into different deployment methods and provides demos of deploying fields and binary files using various techniques. It concludes with recommendations around structuring code, handling performance, and using techniques that work across SharePoint on-premises and Office 365 environments.
Web mashup
Web mashupAmbarish Hazarnis A web mashup combines data or services from multiple sources into a single application. It presents information in a new way using technologies like HTML, CSS, JavaScript, and AJAX. There are several types of mashups including business, customer, and data mashups. When creating a mashup, developers need to consider best practices around security, compatibility, performance, attribution, and legality.
More Related Content
What's hot (13)
Vidfy Video platform
Vidfy Video platformKapil Nawani The video platform handles the complete content lifecycle including uploading, ingestion, publishing, reporting, and data analytics. It allows for content publishing along with channel/category mapping and includes features like pre-roll/post-roll ads, MIS reporting, intelligent content serving across devices, and social sharing integration. The platform supports bulk or individual uploads, content mapping to channels, embed codes, and analytics tracking across devices.
Enhanced video experience in SharePoint 2013
Enhanced video experience in SharePoint 2013Karthick S SharePoint 2013 enhances video experiences by simplifying video uploads, improving search capabilities, and providing a streamlined video player page that displays relevant metadata. Users can easily organize videos, embed external content from platforms like YouTube, and utilize features like tagging and view counts for better engagement. The platform's improved search functionality allows for quick identification of videos, ultimately facilitating better knowledge-sharing and training within organizations.
Supplement Web Tools
Supplement Web Toolsshelly3160 Web servers like Apache and IIS play a pivotal role in delivering content to users. The speed and capacity of the server affects performance, especially for streaming content. Site builders like Dreamweaver and FrontPage can help create pages but often generate bloated code. Common web browsers that support plugins are Internet Explorer, Firefox, Safari and Chrome, though support for standards varies. Plugins add capabilities for things like sound, video, animation and presentations.
Extending Office with Salesforce Apps and Data
Extending Office with Salesforce Apps and DataSalesforce Developers The document discusses the vision for office extensibility through modern add-ins, highlighting their differences from traditional methods. It covers the development patterns for building add-ins that utilize Salesforce APIs, emphasizing decentralization and discoverability. Additionally, it outlines the advantages of using web standards, demonstrating various features and functionalities specific to office add-ins.
When You're Getting Good at an Obsolete Technology
When You're Getting Good at an Obsolete TechnologyInsum Solutions The document outlines the features and configurations of the APEX Front-End Boost, a tool designed to enhance application development with Oracle APEX, including static file handling and project setup. It details prerequisites, installation steps, and advanced options such as minifying and concatenating CSS and JavaScript for better performance. The document also provides information on error handling and customization through a config file.
2012Technology Preview
2012Technology Previewdcpsweb The document provides an overview of new features for school websites including:
1. Introduction of a new web server infrastructure using Windows 2008 R2 to allow for improved development options such as ASP.NET, PHP, and MySQL.
2. A hosting control panel will give schools dedicated access to configure their site settings.
3. Development options include continued use of Frontpage, distribution of Visual Studio Express, and content management using Wordpress or Weebly.
4. Plugin tools and an improved @DCPSWeb communication channel will provide resources and guidelines for web publishing.
5. An iTunes U site and conference in March will provide training materials and workshops on the new technologies.
Keeping Current with ColdFusion - Adobe Max 2011
Keeping Current with ColdFusion - Adobe Max 2011Rupesh Kumar This document discusses how ColdFusion has evolved to meet modern web development challenges and how the new Zeus release takes it further. It covers how ColdFusion supports rich interactive applications through AJAX, Flex, HTML5 charting, websockets and mobile support. It also looks at ColdFusion's role as an enterprise integration hub through features like Exchange, SharePoint and RESTful web services integration. The document concludes by addressing developer productivity features in ColdFusion like ORM, caching, office integration and the new ColdFusion Builder IDE.
Christy Reuter software evaluation
Christy Reuter software evaluationChristy Reuter This document compares and evaluates the software programs EasyWorship and MediaShout for use in church presentations. EasyWorship has more advanced features like video feeds, DVD clips, and web integration but is more expensive at $399. MediaShout is simpler with features like importing PowerPoints and displaying lyrics and bible verses for $199. The recommendation is for EasyWorship despite the higher price because it has useful future features, is more user friendly for training others, and allows use on multiple computers simultaneously.
CCI 2019 - Architettare componenti in SPFx, esperienze sul campo
CCI 2019 - Architettare componenti in SPFx, esperienze sul campowalk2talk srl Fabio Franzini, an independent senior consultant and Microsoft MVP, presented at the Cloud Conference Italia 2019 on architecting components in SPFx. He emphasized the importance of making SharePoint client-side web parts configurable, highlighting features like pages, headers, and groups to enhance user interaction. The talk included a demo of using various frameworks and controls, encouraging engagement through Q&A.
Daughter Themes
Daughter ThemesPaul Bearne The document explains the concept of daughter themes (child themes) in WordPress, emphasizing their importance for customizing websites without losing changes after updates. It provides a guide on how to create and install a daughter theme, including necessary coding details and installation steps. Additionally, it outlines limitations and references for further reading on the topic.
ECS19 Bert Jansen - Modernizing your existing sites
ECS19 Bert Jansen - Modernizing your existing sitesEuropean Collaboration Summit This document discusses modernizing classic SharePoint sites. It provides an overview of the capabilities of modern sites and features that can apply to most classic sites. It demonstrates tools for understanding, remediating, and modernizing classic sites, including a modernization scanner, techniques for transforming different classic page types like wiki and publishing pages, and options for in-place or cross-site modernization. The document encourages starting the modernization journey to reduce growing modernization debt.
Enhanced Video Experience in SharePoint 2013
Enhanced Video Experience in SharePoint 2013Mai Omar Desouki This document discusses the enhanced video experience in SharePoint 2013. It includes:
- An HTML5 video player that supports video playback without plugins
- A new video player page that surfaces metadata about each video
- Easy video upload through drag and drop
- Built-in thumbnail generation for videos
- New digital asset content types for audio, video, and images
- Features for tagging, rating, and viewing video usage statistics
- Support for multiple video formats and renditions
- Improved video search capabilities
Best wordpress hosting
Best wordpress hosting ken1990julius The document compares various types of web hosting options for WordPress sites, including shared, dedicated, VPS, and managed WordPress hosting. It highlights the pros and cons of each hosting type, detailing aspects such as cost, performance, security, and the level of management required. Additionally, it provides a comparison of popular managed hosting solutions, emphasizing their features and pricing.
Viewers also liked (9)
Investigación obs. mobile commerce 2013
Investigación obs. mobile commerce 2013Social You, S.L. Este documento analiza la infraestructura tecnológica, la oferta y la demanda en el mercado móvil y su impacto en el comercio minorista. Brevemente: (1) La penetración de smartphones y tabletas está acelerando el crecimiento de las ventas minoristas online. (2) Los minoristas deben adaptar sus sitios web para operar desde dispositivos móviles y ofrecer wifi y pagos móviles. (3) Los consumidores móviles están cambiando sus hábitos y demandan comprar desde cualquier lugar.
From Design to a modern Style Guide
From Design to a modern Style GuideStefan Bauer This document discusses branding strategies for SharePoint and add-ins. It emphasizes that branding should focus on content, not just the application. It also discusses the benefits of maintaining a style guide, including design and code consistency, easier testing, and providing a shared vocabulary. The document recommends building HTML and design first before documenting styles. It suggests that responsive deliverables for clients should resemble fully-functioning systems like Twitter Bootstrap. It provides examples of style guides from various organizations and concludes by inviting questions and feedback.
Responsive Web Design and SharePoint
Responsive Web Design and SharePointStefan Bauer This document discusses responsive web design. It begins by stating that responsive design is about content and context, not devices. It then covers fluid grids and flexible layouts using media queries. Grid systems help bring order and structure to layouts. Images, videos, typography and other elements need flexible solutions to respond to different screen sizes. Frameworks provide tools for responsive design but have some potential pitfalls, so tailoring them to specific needs is important.
Responsive vs. adaptive vs. device-specific: which one is best?
Responsive vs. adaptive vs. device-specific: which one is best?Catalyst This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.
SharePoint 2013 Mobile Intranet Strategy #SEASPC
SharePoint 2013 Mobile Intranet Strategy #SEASPCJoel Oleson The document outlines a mobile strategy for SharePoint 2013, highlighting key features and considerations for device support and design. Joel Oleson, recognized as a top SharePoint influencer, discusses the importance of responsive design and mobile management strategies for organizations. It also addresses gaps in current mobile offerings and potential future developments in mobile applications for SharePoint and Office.
Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationSolTech, Inc. This document discusses responsive web design using the ZURB Foundation 5 framework. It defines responsive web design and its benefits over adaptive, mobile-first, and native app approaches. It outlines the key concepts of the Foundation grid system, responsive images and media, media queries, and customizing Foundation. It also provides resources for UI development tools and testing responsive designs.
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)Jamshaid (Jam) Hashmi The document compares adaptive web design (AWD) and responsive web design (RWD), outlining their definitions, similarities, advantages, and disadvantages. AWD uses server-side detection and specific files for different devices, resulting in faster loading times but requires separate maintenance, while RWD uses CSS to adjust presentation fluidly for all devices, typically with slower load times. The document also emphasizes the importance of analyzing traffic data to identify lost opportunities and suggests which design approach may be better suited for diverse mobile environments.
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer This document discusses methods for deploying branding assets in Office 365 and SharePoint 2013/2016. It covers the pros and cons of traditional deployment methods like copying and pasting files or using farm and sandbox solutions versus newer approaches like provider-hosted and SharePoint-hosted add-ins or PowerShell deployment. Specific assets that can be deployed are listed. The document then dives deeper into different deployment methods and provides demos of deploying fields and binary files using various techniques. It concludes with recommendations around structuring code, handling performance, and using techniques that work across SharePoint on-premises and Office 365 environments.
Web mashup
Web mashupAmbarish Hazarnis A web mashup combines data or services from multiple sources into a single application. It presents information in a new way using technologies like HTML, CSS, JavaScript, and AJAX. There are several types of mashups including business, customer, and data mashups. When creating a mashup, developers need to consider best practices around security, compatibility, performance, attribution, and legality.
Ad
Similar to Responsive vs Adaptive Web Design - What about Device Channels? (20)
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 Fabio Franzini This document discusses techniques for developing mobile apps for SharePoint 2013 and Office 365. It covers the mobile browsing experience in SharePoint 2013 including the contemporary view and device channels. It also discusses publishing infrastructure, image renditions, and using Bootstrap to create responsive designs for SharePoint. The document demonstrates some of these techniques and provides recommendations on when to use device channels versus responsive design.
Responsive SharePoint
Responsive SharePointKevin DeRudder This document discusses making SharePoint websites accessible on mobile devices. It explains that responsive design using HTML5, CSS3, and media queries allows a single website to automatically adapt to different screen sizes and devices. It also describes using device channels in SharePoint 2013 to deliver different content for specific devices, but notes limitations. The document demonstrates creating responsive designs with media queries and recommends responsive design over separate mobile pages.
Reshaping SharePoint for Evolving Internet Devices
Reshaping SharePoint for Evolving Internet DevicesEric Overfield The document discusses the challenges of designing SharePoint interfaces for diverse devices and emphasizes the need for responsive web design and progressive enhancement. It outlines differences in device capabilities and offers solutions for SharePoint branding across mobile and desktop platforms. The author, Eric Overfield, advocates for future-proofing designs while addressing specific needs related to SharePoint 2010 and 2013.
Branding SharePoint for Evolving Internet Devices
Branding SharePoint for Evolving Internet DevicesEric Overfield The document discusses how organizations need to prepare their SharePoint intranets for the increasing use of mobile devices. It examines options for making SharePoint accessible across different devices, including device-specific interfaces, responsive web design, and the new device channels feature in SharePoint 2013. The author advocates for using responsive design to create a single interface that adapts to different screens through CSS. He also suggests using device channels in SharePoint 2013 to handle special device cases.
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointEric Overfield This document presents an overview of mobile strategies related to SharePoint, focusing on mobile views, device channels, and responsive web design. It outlines the changes introduced in SharePoint 2013, such as contemporary views and tailored device interfaces, while also discussing challenges with mobile compatibility. The author emphasizes the importance of adapting to diverse devices and preparing for future developments in mobile technology.
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileEric Overfield This document discusses mobile strategies for SharePoint 2013. It begins by reviewing statistics showing the rise of mobile usage and need for responsive websites. SharePoint 2013 introduces new mobile views (Classic, Contemporary, Full Screen) and device channels to provide tailored interfaces for specific devices. Other mobile features include push notifications, mobile alerts, and developing responsive mobile apps. The document argues that responsive web design, which uses fluid grids and media queries, provides the best approach to build a single website that adapts to any device screen size. SharePoint 2013 supports this through turning off mobile views and using CSS3 media queries in master pages.
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileEric Overfield The document, presented by Eric Overfield, explores mobile strategies and features in SharePoint 2013, including out-of-the-box mobile views, push notifications, and responsive web design. It details various mobile interfaces such as classic, contemporary, and full-screen views, as well as device channels tailored for specific devices. The document emphasizes the importance of adapting to mobile users and provides resources for further implementation of responsive design in SharePoint.
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebEric Overfield The document discusses the evolution of SharePoint branding and responsive design in relation to diverse devices accessing the web. It highlights the importance of adapting web interfaces for various screen sizes and functionalities, emphasizing progressive enhancement and mobile-first strategies. Key insights include the potential of SharePoint 2013's device channels and the challenges of maintaining responsive design across devices.
Cross Device UI Designing
Cross Device UI DesigningDeepu S Nath The document discusses responsive web design and cross-device UI design. It covers flexible grid-based layouts, flexible images and media, and use of media queries. Grid layouts are made flexible using relative units like percentages and ems instead of pixels. Images are made flexible by setting max-width to 100% so they scale with their containers. Media queries allow delivering different CSS based on screen width, enabling adaptive designs.
Making the Web Work on Mobile
Making the Web Work on MobileGrgur Grisogono This document discusses how the emergence of new mobile devices has changed the way people access the web, making it effectively a new medium. It argues that past media like television and the desktop web initially mimicked older forms before developing native experiences, and the same will be true of the mobile web. To build good mobile experiences, developers should tailor content to each device rather than repurposing desktop designs, and should take advantage of all available tools including server-side device detection to understand capabilities and limitations. Embracing the diversity of new devices will allow the web to reach its full potential.
Making the web work on mobile: DeviceAtlas
Making the web work on mobile: DeviceAtlasMartin Clancy The presentation by Ronan Cremin at bdconf 2012 discusses the importance of adapting web design for a mobile-first approach, emphasizing that the mobile web represents a new medium distinct from traditional desktop environments. It outlines the need for tailoring experiences to the unique features and limitations of various devices, warning against merely repurposing desktop content for mobile use. With the evolution of devices, there is a call to leverage all available tools, including device detection, to create optimal user experiences as the landscape of web interaction continues to evolve.
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEric Overfield The document discusses enhancing SharePoint through responsive web design (RWD), emphasizing its importance in adapting to various devices. It covers key concepts such as fluid grids, progressive enhancement, and mobile-first strategies while providing practical steps for implementing RWD in SharePoint 2010 and 2013. Additionally, it outlines the benefits and challenges associated with responsive design and device channels in SharePoint environments.
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra The document discusses responsive web design (RWD), which is an approach to building websites that dynamically adapt their layout to different screen sizes and devices. It covers the key features of RWD, including flexible grids, images, and using CSS3 media queries to detect screen sizes and orientations. The benefits of RWD are also summarized, such as improved performance, saving time and money. Popular RWD frameworks like Foundation and Bootstrap are also mentioned.
Share point 2013 Building Websites
Share point 2013 Building WebsitesSuhas R Satish The document provides a comprehensive overview of SharePoint 2013's Design Manager, explaining the processes for creating master pages, page layouts, and using design packages for importing and exporting site designs. It covers the use of snippets for adding SharePoint functionality, device channels for rendering content on various devices, and includes guidance on branding management. The document also references tools and sample resources for efficient SharePoint design practices.
Mobility: Development Strategies in SharePoint 2013
Mobility: Development Strategies in SharePoint 2013 Perficient, Inc. The document discusses mobility development strategies in SharePoint 2013, highlighting the importance of mobile-friendly features and options available since SharePoint 2010. It details new features like device channels, mobile panels, and enhancements designed to improve the authoring experience and address limitations in mobile content targeting. The document emphasizes a responsive design approach utilizing frameworks like jQuery Mobile and Twitter Bootstrap to enhance user experience.
The Future of Responsive Design Standards
The Future of Responsive Design StandardsBrian Fegan The document discusses future standards for responsive design that will better adapt to users' needs and environments. It proposes evolving HTML, CSS, and JavaScript to utilize new browser APIs that detect things like connection speed, location, ambient light, and other environmental factors to optimize content delivery and layout. This would allow sites to serve high resolution video only to fast connections, increase text size for distant users, and adapt layouts and fonts based on a user's detected region, among other things.
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson This document serves as a beginner's guide to responsive design for SharePoint, detailing the benefits and implementation techniques for creating a responsive user interface. It covers key concepts like media queries, fluid grids, and design management in SharePoint to adapt sites for various devices. Additionally, it discusses the importance of performance and tools for testing and development in the context of responsive design.
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia The document discusses pushing the boundaries of user experience with Drupal. It talks about using responsive design and progressive enhancement to build websites that automatically adapt to different screen sizes like desktop, tablet, and mobile. Responsive design uses CSS media queries and a fluid, data-driven approach to layouts. This allows a single website to effectively serve users on any device. The document recommends using responsive frameworks like Omega or Mojo themes for Drupal, and discusses building custom "UX modules" to enhance the user experience for different devices.
Responsive Design for SharePoint
Responsive Design for SharePointCathy Dew The document presents a comprehensive overview of responsive design principles in the context of SharePoint branding, led by speaker Cathy Dew. It covers essential topics such as flexible grids, responsive images, media queries, and the challenges faced when implementing responsive designs in SharePoint 2013. The document also provides insights on when to create responsive designs and includes examples of successful implementations.
Tuenti Mobile Development
Tuenti Mobile DevelopmentTuenti The document outlines Tuenti's mobile development strategy, focusing on delivering the same content across desktop and mobile platforms through native applications and a mobile website. It highlights the challenges faced in supporting a wide range of devices and browsers, emphasizing performance analysis, user tracking, and redesigning navigation for a uniform experience. Future plans include integrating device APIs for enhanced functionality in mobile applications.
Ad
More from Stefan Bauer (9)
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxStefan Bauer The document presents a detailed overview of creating SASS-based web parts in SharePoint Framework (SPFx) by Stefan Bauer, covering topics such as SASS concepts, web part development, and CSS management. It highlights the benefits of SASS, discusses various features like mixins, nesting, and autoprefixing, and emphasizes automation in the SASS compilation process within SPFx. Additionally, the document touches on the use of TypeScript, modular CSS, and theming in web design for SharePoint applications.
Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Stefan Bauer This document provides an overview of using SASS in SharePoint Framework (SPFx) web parts. It discusses compiling SASS to CSS, autoprefixing CSS, and TypeScript class compilation. SASS allows for variables, nesting, mixins and other features that make CSS more modular and reusable. In SPFx, SASS files are compiled to CSS and TypeScript, with class names postfixed to avoid conflicts. Global selectors can avoid class name renaming. Theming is supported through Office UI Fabric color variables.
SPS Brussels 2016 - From design to a modern style guide branding strategies...
SPS Brussels 2016 - From design to a modern style guide branding strategies...Stefan Bauer The document outlines a presentation from SharePoint Saturday Belgium 2016, focusing on branding strategies for SharePoint and add-ins. It discusses the importance of branding, the challenges of frameworks, and the benefits of style guides in maintaining design consistency. The agenda included topics such as custom CSS and the design of systems of components rather than individual pages.
SPS Barcelona 2016 - Branding Strategies for SharePoint and Add-ins - From De...
SPS Barcelona 2016 - Branding Strategies for SharePoint and Add-ins - From De...Stefan Bauer The document discusses branding strategies for SharePoint and add-ins, focusing on the importance of a modern style guide to enhance internal brand awareness and employee engagement. It highlights the benefits of maintaining a style guide, such as design consistency and improved workflow, while addressing potential challenges with web design frameworks. Overall, it underscores the need for tailored design systems that facilitate better collaboration among designers, developers, and project stakeholders.
SharePoint Saturday Stockholm - Branding Strategies for SharePoint and Add-in...
SharePoint Saturday Stockholm - Branding Strategies for SharePoint and Add-in...Stefan Bauer The document discusses branding strategies for SharePoint and add-ins, highlighting the importance of design and modern style guides. It emphasizes the need for responsive systems tailored to client needs rather than static templates, and outlines potential issues with existing frameworks. Additionally, it presents examples and benefits of maintaining a comprehensive style guide.
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyStefan Bauer The webinar by Stefan Bauer focuses on using Sass to enhance SharePoint branding and streamline development processes. Key topics include creating modular, maintainable CSS with Sass features like variables, nesting, and mixins, as well as addressing the evolution of SharePoint in relation to cloud solutions and responsive design. The session also covers modern practices in CSS organization and the importance of building cohesive design systems.
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer The document discusses the importance of using Sass for effective SharePoint branding and CSS management, outlining its advantages such as better maintainability and modularity. It introduces Sass features, including mixins, variables, and grid layouts, while contrasting it with traditional CSS methods. Additionally, it emphasizes the need for responsive design and creating systems of components to enhance user experience in SharePoint environments.
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer The document discusses techniques to enhance SharePoint branding using Sass, emphasizing the organization of CSS to prevent complexity and improve maintainability. It explains tools and methods like Sass variables, nesting, and mixins for efficient styling and introduces responsive design principles. The presentation also highlights modern development practices, including the use of Yeoman for local development and integrating systems of components in design.
SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!
SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!Stefan Bauer The document discusses the use of Sass to enhance SharePoint CSS branding by providing methods to modularize and maintain CSS effectively. It covers benefits like reusable components, structure, and integration with responsive design principles. Additionally, it highlights how Sass compares to traditional CSS in terms of complexity and organization.
Recently uploaded (20)
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's SeatSafe Software Finding a specific car online can be a time-consuming task, especially when checking multiple dealer websites. A few years ago, I faced this exact problem while searching for a particular vehicle in New Zealand. The local classified platform, Trade Me (similar to eBay), wasn’t yielding any results, so I expanded my search to second-hand dealer sites—only to realise that periodically checking each one was going to be tedious. That’s when I noticed something interesting: many of these websites used the same platform to manage their inventories. Recognising this, I reverse-engineered the platform’s structure and built an FME workspace that automated the search process for me. By integrating API calls and setting up periodic checks, I received real-time email alerts when matching cars were listed. In this presentation, I’ll walk through how I used FME to save hours of manual searching by creating a custom car-finding automation system. While FME can’t buy a car for you—yet—it can certainly help you find the one you’re after!
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdfAmirStern2 מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד..
מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft developmentshyamraj55 CurieTech AI in Action – Accelerate MuleSoft Development
Overview:
This presentation demonstrates how CurieTech AI’s purpose-built agents empower MuleSoft developers to create integration workflows faster, more accurately, and with less manual effort
linkedin.com
+12
curietech.ai
+12
meetups.mulesoft.com
+12
.
Key Highlights:
Dedicated AI agents for every stage: Coding, Testing (MUnit), Documentation, Code Review, and Migration
curietech.ai
+7
curietech.ai
+7
medium.com
+7
DataWeave automation: Generate mappings from tables or samples—95%+ complete within minutes
linkedin.com
+7
curietech.ai
+7
medium.com
+7
Integration flow generation: Auto-create Mule flows based on specifications—speeds up boilerplate development
curietech.ai
+1
medium.com
+1
Efficient code reviews: Gain intelligent feedback on flows, patterns, and error handling
youtube.com
+8
curietech.ai
+8
curietech.ai
+8
Test & documentation automation: Auto-generate MUnit test cases, sample data, and detailed docs from code
curietech.ai
+5
curietech.ai
+5
medium.com
+5
Why Now?
Achieve 10× productivity gains, slashing development time from hours to minutes
curietech.ai
+3
curietech.ai
+3
medium.com
+3
Maintain high accuracy with code quality matching or exceeding manual efforts
curietech.ai
+2
curietech.ai
+2
curietech.ai
+2
Ideal for developers, architects, and teams wanting to scale MuleSoft projects with AI efficiency
Conclusion:
CurieTech AI transforms MuleSoft development into an AI-accelerated workflow—letting you focus on innovation, not repetition.
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash Coordinated Disclosure for ML - What's Different and What's the Same
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore 👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀
CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed.
In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdfPriyanka Aash Cracking the Code - Unveiling Synergies Between Open Source Security and AI
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdfPriyanka Aash 10 Key Challenges for AI within the EU Data Protection Framework
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/mpu-a-transformative-solution-for-next-gen-ai-at-the-edge-a-presentation-from-fotonation/
Petronel Bigioi, CEO of FotoNation, presents the “MPU+: A Transformative Solution for Next-Gen AI at the Edge” tutorial at the May 2025 Embedded Vision Summit.
In this talk, Bigioi introduces MPU+, a novel programmable, customizable low-power platform for real-time, localized intelligence at the edge. The platform includes an AI-augmented image signal processor that enables leading image and video quality.
In addition, it integrates ultra-low-power object and motion detection capabilities to enable always-on computer vision. A programmable neural processor provides flexibility to efficiently implement new neural networks. And additional specialized engines facilitate image stabilization and audio enhancements.
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdfAlyona Owens Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around.
Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly.
But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves:
Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink).
Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully).
On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future.
So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes ProbableSaikat Basu Imagine combining the "brains" of Artificial Intelligence (AI) with the "super muscles" of Quantum Computing. That's Quantum AI!
It's a new field that uses the mind-bending rules of quantum physics to make AI even more powerful.
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019 A presentation at Internetware 2025.
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic Threat Model Library Launch at OWASP Barcelona 2025
https://owasp.org/www-project-threat-model-library/
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash Oh, the Possibilities - Balancing Innovation and Risk with Generative AI
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark DöringSafe Software Harness the full potential of AI with FME: From creating high-quality training data to optimizing models and utilizing results, FME supports every step of your AI workflow. Seamlessly integrate a wide range of models, including those for data enhancement, forecasting, image and object recognition, and large language models. Customize AI models to meet your exact needs with FME’s powerful tools for training, optimization, and seamless integration
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdfyosra Saidani Salesforce Summer '25 Release Frenchgathering.pptx.pdf
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance
Responsive vs Adaptive Web Design - What about Device Channels?
- 1. Responsive Web Design vs Adap1ve Web Design What about Device Channels? Stefan Bauer @S>Bauer
- 2. Stefan Bauer Box consul1ng GmbH -‐ Informa1on Architect 1995 – Websurfer 1997 – Webdeveloper / Designer (php / MySql) 2005 – SharePoint 2003 – Branding / Design / Development Twi.er: hTp://twiTer.com/s>bauer Blog: hTp://www.n8d.at/blog
- 11. Responsive Web Design vs Adap1ve Web Design 3.300.000 vs 425.000
- 15. Media Query @media print { … } @media handheld and (min-‐width: 20em), screen and (min-‐width: 20em) { … }
- 16. Birth of Responsive Web Design Date of Birth: 25.5.2010 LocaMon: Responsive Web Design @ A list apart
- 17. Mobile browsing is expected to outpace desktop-‐based access within three to five years. Two of the three dominant video game consoles have web browsers. Responsive Web Design @ A list apart – 25.5.2010
- 18. Original Web Design RWD opMmized Web Design Responsive Web Design @ A list apart – 25.5.2010
- 31. ?
- 32. Device Channels in SharePoint 2013 • Unterschiedliche Darstellungen für unterschiedliche Device • Ausblenden und Einblenden von unterschiedlichen Assets (Bilder, Videos) • Performance Op1mierung • Compa1bility(IE 7.0, IE 8.0) • Accessibility • Maßgeschneiderte User Experience
- 33. Device Channels in SharePoint 2013 • Different layout for different devices • Show hide different assets (Images, Video) • Performance Op1miza1on • Compa1bility (IE 7.0, IE 8.0) • Accessibility • Tailor-‐made User Experience
- 35. Why Device Channels ? Desktop != Phone != Tablet
- 36. Device Channels in SharePoint 2013 Device Channel • Output for different device classes • Op1miza1on by features – Touch – Bandwidth – ... • Fallback for older browser • Accessibility Responsive Web Design • Output for different screen resolu1ons only • Limited op1miza1on through JS – Modernizer – .. • Limited fallback for older browser
- 39. Common User Agent Mozilla/5.0 (compaMble; MSIE 9.0; Windows NT 6.1; Trident/5.0) Mozilla/4.0 (compaMble; MSIE 8.0; Windows NT 6.0; Trident/4.0) Mozilla/4.0 (compaMble; MSIE 7.0; Windows NT 6.0) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/ 19.0.1084.46 Safari/536.5 Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/ 19.0.1084.46 Safari/536.5 Mozilla/5.0 (Windows NT 6.1; rv:11.0) Gecko/20100101 Firefox/11.0 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/ 19.0.1084.46 Safari/536.5 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/ 6.0.5 Safari/536.30.1 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3 Mozilla/5.0 (iPod; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3 Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
- 40. Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3 Device Channel Configura1on -‐ Phones
- 41. Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3 Device Channel Configura1on -‐ Phones WRONG
- 42. Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3 Device Channel Configura1on -‐ Phones List of User Agents -‐ http://user-agent-string.info/list-of-ua
- 43. Device Channel Panel Snippet <div data-‐name="DeviceChannelPanel"> <!-‐-‐CS: Start Device Channel Panel Snippet-‐-‐> <!-‐-‐SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-‐-‐> <!-‐-‐MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="MyPhoneChannel, MyTabletChannel">-‐-‐> <!-‐-‐PS: Start of READ-‐ONLY PREVIEW (do not modify)-‐-‐><!-‐-‐PE: End of READ-‐ ONLY PREVIEW-‐-‐> <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> You should replace this div with content that renders based on your Device Channel Panel Properties. </div> <!-‐-‐PS: Start of READ-‐ONLY PREVIEW (do not modify)-‐-‐><!-‐-‐PE: End of READ-‐ ONLY PREVIEW-‐-‐> <!-‐-‐ME:</Publishing:DeviceChannelPanel>-‐-‐> <!-‐-‐CE: End Device Channel Panel Snippet-‐-‐> </div>
- 44. Device Channel Panel Snippet • Allows hiding specific element for defined device channels • Can be added to ar1cle page layout • Reduce amount of master pages
- 45. Limita1ons of Device Channels • Works with Publishing Site only • 10 device channels per site collec1on • 150 inclusion rules per device channel • Works with Office 365 public facing web site
- 46. Think about the USER and the CONTEXT the DEVICE will be used
- 49. Device Channels -‐ Summary • Begin planning soon • User Experience and NOT Device Experience – RWD + Device Channels • Performance op1miza1on – Image Rendi1on, Condi1onal loading, … • Reach op1miza1on • Future-‐Friendly Design – Progressive Enhancements
- 50. Why device channels ?
- 54. This presenta1on was held at the ShareCamp Vienna, September, 7th 2013 Thanks to @magrom, @ThorstenHans, @cglessner, @atwork for making this event possible Special thanks to @Brad_Frost for some awesome slides and some I was allowed to borrow. You rock !!! Thank you @S>Bauer