Pro SharePoint 2013 Branding and Responsive Web Development

Book description

This book aims to share with you how to leverage the power of two powerful technologies, HTML5 and SharePoint 2013, to build modern business web sites. Through the book we combine these technologies with a web design and development methodology referred to as “responsive web design” that allows a single web site to respond to differences in screen characteristics and browser capabilities.

The Need for Responsive Web Sites

The number of types of devices and browsers people are using to access the Internet just keeps growing. In addition to the rapid emergence of smart phones and tablets, web sites and applications are now being accessed from gaming consoles, televisions, ereaders, and more. You can even buy refrigerators today that can browse the web. These days, the browsers on these devices rival and sometimes even surpass the capabilities of desktop browsers; however it wasn't always this way. The browsers embedded in the early generation mobile phones required simpler technologies. Wireless Application Protocol (WAP) was designed to allow mobile phones to access the Internet over high-latency, low-bandwidth mobile connections, and the browsers included in these devices were designed to display an alternative markup language called Wireless Markup Language (WML). Web sites rendered using WML used onlybasic text-based navigation and content. Organizations that wanted to support mobile devices were required to create
an alternative web site using WML, and a precedent was born for the mobile-specific web site. As mobile networks became faster and more reliable, and the browsers in the emerging generation of smart phones became closer in parity to desktop browsers, users abandoned the low-fidelity mobile web sites, and switched to viewing the full HTML versions of organization web sites. At the time, most business web sites were being designed to meet the lowest common denominator of desktops and network speeds. Typically, this was a fairly low-resolution monitor (often 800 × 600 pixels), and dial-up Internet connections or low-bandwidth broadband provided by early DSL and cable Internet providers. As broadband became more prevalent and desktop monitors increased in resolution, web sites evolved to the use of advanced plug-ins such as Flash for rich media, and the use of heavier graphics; mobile browsers again struggled to keep up. 
The immense popularity of the Apple iPhone became the tipping point for many organizations in recognizing the need to provide a user experience tailored to the needs of mobile devices again. Some organizations started producing native applications to complement their web sites, and other organizations developed special versions of their web sites for specific smart phones (and later tablets like the iPad) by using a technique called “device detection” and redirecting users to web pages specifically designed for the devices' specific resolution and capabilities. 

Today, however, increasingly we have a problem. Mobile devices are set to exceed the number of desktops accessing the Internet in 2013. As the variety of mobile devices that access the Internet increases, the ability to create a separate web site specific to each device becomes impossible. We need a better way! Responsive web design utilizes new capabilities of HTML5, notably improvements in CSS3 to create web sites that use fluid layouts to adapt to the capabilities of a specific browser or device. In a nutshell, a single web site can now provide a user experience tailored to the specific resolution and capabilities of their device without the need to produce specific page layouts for each device.

The Importance of HTML5

HTML5 is not a single technology or specification, but rather a loose marketing term for a broad collection of open (and not so “open”) standards promoted and managed by a collection of standards bodies like the W3C and specific browser vendors. It encompasses changes to the next generation of HTML markup, enhancements to CSS, and new JavaScript APIs designed to enable a new generation of rich web sites and applications. HTML5 is now widely supported by the world's leading technology vendors including Apple, Google, and Microsoft and the leading browsers including Firefox, Internet Explorer, Safari, Opera, and Chrome. Probably one of the most dramatic recent developments has been the wholehearted pivot by Microsoft to embrace the open standards of HTML5 for the next generation Internet Explorer 10, but to also place it front and center as the technology for developing the next generation of Windows 8 UI applications. Upon release IE 10 will be the most HTML5-compliant browser, and will no doubt continue to fuel competition across browser implementations. Although many of the HTML5 standards might not be finalized for many years, this kind of innovation and the industry investment being made is being driven by a number of important factors. As an industry there is fervent recognition that web sites and applications need to work well, today and tomorrow, across the rapidly evolving capabilities of next-generation mobile devices and web-enabled consoles and appliances. Techniques such as the use of plug-ins like Adobe Flash and Microsoft Silverlight to support rich media and content presentation are not well supported on many of those devices. The refusal by Apple to support Adobe Flash, and the subsequent announcement by Adobe that they were abandoning a Flash Mobile runtime have clearly
demonstrated the need for native browser capabilities to support enhanced capabilities that work, and perform well, across many platforms and computing architectures.
And no less important, organizations are looking to reduce the cost of developing and supporting web sites and applications. They are less supportive of vendor-specific tools and technologies, and the associated human resource costs of staffing the specialized skills required to leverage them. A significant advantage of HTML5 is the potential for ubiquitous access to sites and applications from anywhere, developing using standards-based technologies that are relatively simple and easy to learn. Increasingly, JavaScript will become the de facto programming language for developing the presentation layer of distributed applications. We are all JavaScript programmers now!

Why SharePoint 2013?

Microsoft SharePoint 2013 includes new features and capabilities to support many of the principles discussed in the last section, most important, better support for HTML5. It also includes significant enhancements to the Client Object Model, the programming API for accessing SharePoint from remote applications including in-browser with JavaScript and Ajax. This makes SharePoint a powerful platform for supporting rich and peformant web sites and applications without the need to program custom web services necessary to support client-side programming. In addition to supporting the latest browser capabilities, business web sites also require a powerful server platform offering web content authoring and publishing, search, metadata, and rich media storage and streaming to satisfy business requirements. SharePoint 2013 includes significant improvements in capabilities that directly support the needs of leading-edge web sites including powerful improvements like continuous search crawling, improvements to the search keyword query language, metadata-driven site navigation, and more.

Book content

  1. Chapter 1. What’s New in SharePoint 2013 Web Content Management
  2. Chapter 2. Responsive Web Design and Development with HTML5
  3. Chapter 3. Designing a Responsive Web Site
  4. Chapter 4. Building a SharePoint HTML Master Page
  5. Chapter 5. Making Your Master Page Responsive
  6. Chapter 6. Building Site Structure and Navigation
  7. Chapter 7. Building Page Layouts and Publishing Pages
  8. Chapter 8. Publish Cross-Site Content with Catalogs
  9. Chapter 9. Integrating Search-Driven Content
  10. Chapter 10. Building Rich Interactive Forms
  11. Chapter 11. Uploading and Working with Files
  12. Chapter 12. Integrating Location-Based Features
  13. Chapter 13. Integrating Feeds and Social Media
  14. Chapter 14. Supporting Multilingual Web Sites

About Author

Oscar Medina, is a seasoned technology consultant with over 17 years of software development experience. He runs SharePointAce Consulting Group, a boutique SharePoint Consulting firm based out of Northern California. His SharePoint specific experience dates back to the SharePoint Portal Server 2001. Oscar was previously at Microsoft Consulting Services, helping fortune 1000 companies reap the benefits of the entire platform and related technologies. He has a diverse technical expertise on multiple platforms, including web development & design, n-tier app development and mobile app development on Windows Phone and the iPhone platforms. Oscar is the Founder, Senior Architect, and Creative Director of - the first mobile social app for SharePoint, which allows companies to enable their employees to stay connected with their team on the go ( You can stay in touch with him via his blog and @SharePointOscar...

Ebooks download available as