Áras an Uachtaráin
Web Design Case Studies
Introduction - A Responsive and Mobile Site Research into the area of modern website design throws up two common themes. First, site developers are grappling with the fact that an increasingly large proportion of site traffic comes from mobile devices (smartphones, tablet computers etc). Second, in order to ensure a consistent user experience, developers have not turned to designing seperate apps for each device, rather, they have devised a development method which ensures that the site works seamlessly across all platforms. It may look different on an iPhone to a PC, but the vital information will be effectively conveyed and, most importantly, the user experience will be an enjoyable one. This development method is called responsive design. Essentially, it means that the site is built to adapt to the device that’s accessing it. Information is prioritised depending on the screen size (see below right). Why do this? On many sites, user traffic from mobile devices is between 30-50%. Sales of PCs and laptops are down this year for the first time ever, while sales of smartphones and tablets continue to thrive. Simply put, more and more people are using the internet on their mobile devices rather than a desktop machine. This document examines some excellent examples of responsive design. Holistic Approach - Social Media Mobile web users are also accessing social media platforms from their devices. The ubiquity of social media is a commonly discussed topic, but nevertheless, its power as a communications tool for politicians is immense. This document will examine the benefits others have gained from employing a holistic approach to site design and social media development.
President.ie Homepage
Case Study #1 10 Downing Street
The homepage is clean and links to other government websites. The header plays on the recognisability of the black door at 10 Downing Street.
The homepage then prioritises the latest news from the Prime Minister’s office, with an emphasis on top policy objectives. Social media widgets are also featured prominently.
Further down the homepage, more general information is featured, including a profile of the current Prime Minister, information on his coalition and the history of 10 Downing St and its many inhabitants. Again, the design here is clean, with a simple black/white/ purple colour combination.
The layout for news stories is strikingly simple and is consistent regardless of the content. The lefthand column is left bare, apart from the featured image placed beside the story. The screenshot to the right shows the PM’s video message at the start of Ramadan. The PM and many world leaders and heads of state publish regular, sometimes weekly, videos on various topics. These videos can form part of a communications theme for a given period of time.
Left: A typical news story from the PM’s office. Photos are heavily featured. Above: A blog is regularly updated with articles on current policy priorities and historical pieces on Downing Street’s past.
Left: The PM’s cabinet are pictured and profiled, giving the site user a more personal connection with their primary representatives. Above: Like the White House and other State residences, site users can take an interactive tour of 10 Downing Street. This feature lends itself to ideals of openess and transparency, as well as being fun.
Case Study #2 The White House
The White House homepage is more ornate than that of 10 Downing Street. The WH logo was re-developed when President Obama took office. The top of the homepage is dominated by a video designed to promote the President’s top legislative priority. Directly underneath it is a search bar and a list of the most recent news items on the site.
Video content plays a key role in every communications strategy developed by Obama and his White House. The video gallery is updated regularly each week with videos that explain policy priorities, recap events and the President’s weekly address.
Below: The video gallery. All press briefings are taped and uploaded.
Below: The President’s weekly address comes with an explanation of what he’s discussing.
The importance of photos to Obama’s online presence cannot be overstated. Recognising that photos receive the highest rate of interaction from internet users, Obama and his White House have always tried to communicate in a particularly visual manner. The WH has a full-time photographer, Pete Souza, who uploads numerous photos on a daily basis. It is estimated that Souza and his staff take up to 20,000 photos per week.
These photos, some of the most viewed and shared of the Obama Presidency, tell his story better than most speeches or articles ever could. And they’re the most popular content his site generates.
The WH page for statements and press releases.
The WH page for the President’s public schedule.
The WH encourages citizens to interact with the site by starting petitions or adding their name to an alreadyexisting one. If a petition accrues the requisite number of signatures, an offical WH response is mandatory.
Like Downing Street, the White House website also features an interactive tour for site users.
The White House also offers users the opportunity to download apps for their mobile devices.
The following series of screen shots demonstrate how the White House uses the site to promote the President’s priorities. In this instance, the Presiden’ts climate change plan is explained through a series of colourful infographics that can be shared on social media. President Higgins’s priorities, such as the Being Young and Irish initative, could be given similar treatment.
Obama 2012 The Obama 2012 campaign redesigned the 2008 site. The 2008 site had been the driving force in raising over $500million dollars online. For 2012, the Obama web team recognised the ever-increasing number of internet users who were accessing the web from mobile devices. Therefore, they could not afford to build a site that only looked and functioned well when accessed from a desktop browser. It had to work seamlessly across all devices. So, they to turned to responsive design. Whether the user was accessing the site from a PC or a smartphone, the most important content was always prominent and intuitively laid out.
Obama 2012 The various iterations of the Obama 2012 homepage, all coded with responsive design in mind, providing a seamless browsing experience for the user regardless of the the device they’re using. Studies conducted during the election campaign demonstrated that explicit calls to action on the homepage were an effective way of getting users to interact with content. Notice also the consistent emphasis on photographs and striking visuals such as contrasting but compatible fonts.
Organizing for Action Once the campaign ended, barackobama.com reverted to a simpler format. Instead of featuring numerous calls to action on a busy homepage, it now focuses on one policy issue at a time. This format would be easier to maintain while still retaining the traits of his campaign site.
The Élysée site has an interesting and useful feature at the top of its homepage - the President’s calendar takes priority over all other content.
Social Media Case Studies
Facebook Some 2.25million Irish now use the site, or 48.7pc of Ireland’s population. 70% of Irish users return to the site on a daily basis. The White House Once again, the White House is the most impressive example of an organ of Government engaging with citizens via social media. Over 1.8 million fans receive daily updates from the White House on Facebook. The White House page is updated daily with a diverse range of content including photos, videos, infographics and links to web pages.
Custom Landing Pages The White House Facebook page also features custom-made tabs (accessed by clicking icons under the cover photo) which act as mini sites. There’s a tab with the latest videos from the WH, a tab geared entirely towards encouraging citizens to engage with the WH and its campaigns and a tab with the latest news on the President’s activites. These custom-made tabs are inexpensive and lend a Facebook page a more professional look. They also direct page users towards specific content, offering an opportunity to clearly demonstrate the communications priority of the page at any given time.
Great content Again recognising the viral nature of excellent of striking images, much of the content posted on the WH Facebook page is based around photos. Often the photos have been edited to include messages, turning them into posters to be liked and shared by page users. This technique is widely mirrored across all successful political and corporate pages.
Barack Obama - The Most Followed Political Page in the World Distinct from the official WH page, Barack Obama’s Facebook page is the most followed and most influential political page on Facebook with over 36million fans. Around 50% of its fans are from outside the United States, making it a global political hub on social media. It’s important to note that the page’s popularity does not stem from Obama’s international popularity alone. It is probably the most professionally maintained page on Facebook and is updated daily with fantastically viral content, be it photos, infographics, videos or articles. This page alone demonstrates the effectiveness of engaging with Facebook as a means to communicate a political message.
Obama’s Page Content The kinds of content posted on Obama’s page are similar to that on the WH page. However, the tone of it is often more personal and lighthearted, as demonstrated by the example below. Personal milestones such as family birthdays and wedding anniversaries are commemorated. This is greatly appreciated by the page’s fans and goes some way to explaining Obama’s consitently high liekability rating in public polls.
The Áras and the President on Facebook The most recent and only update on the Áras page was May 24, 2012. The page currently has 551 fans and over 4,000 people have ‘checked in’, meaning they have notified their friends that they were at the Áras via Facebook. The potential for growth on this page is enormous, provided it is updated regularly with content relating to the President’s public engagements. The White House page is the benchmark in this regard. The most recent update on the Michael D Higgins page was October 29, 2011. The page has close to 14,000 fans and this could increase significantly if it were to be updates regularly, in the manner of Obama’s page.
600,000 Irish users of Twitter. 1,000,000 tweets come from Irish users every day. Barack Obama Obama’s Twitter account is the fourth most followed in the world, coming behind Lady Gaga, Katy Perry and Justin Bieber. Much like his Facebook success, Obama’s large following on Twitter has been built up because the account offers interesting and diverse content on a regular basis.
Twitter Content that Connects In the 2012 Presidential campaign, Obama’s digital team had a simple motto: ‘Don’t Be Lame’. This informed their content development and saw them create some of the most shared content ever. Bottom right: As Clin Eastwood spoke at the Republican National Convention, addressing an empty chair in which Obama was meant to be sitting, Obama’s team tweeted a photo of the President sitting in his chair at the cabinet table with the succinct line ‘This seat’s taken’. It was widely shared. Bottom left: The most re-tweeted tweet in the relatively short history of Twitter. It set records and inspired news articles, capturing the mood of his supporters on the night of his re-election.
President Higgins on Twitter President Higgins already has a strong following on Twitter. However, it was last updated on November 11, 2011. With over 20,000 followers, the potential to further grow this account is clear.
Further Examples - UK Prime Minister Another regularly updated account with an exceptionally strong following. The design of the profile page mirrors that of the Downing Street site, demonstrating consistent thinking and cohesive branding across all online platforms.
The United Nations
Oxfam International