Oxford Web Blog http://oxford-web.co.uk http://oxford-web.co.uk en-us6018 August 2017 04:18:35 How Mobile Devices are Shaping Websites & Software - Part 4 http://oxford-web.co.uk/blog/how-mobile-devices-are-shaping-websites-software-part-4 Part 3 talked about the successes and failures of Windows 8 as a case study. Now we will focus on the ways in which designers optimize for mobile.

At Oxford Web we aim to design websites that will stand the test of the future, where sites can be easily viewed on screens of any type and in any situation.

What is involved in "optimizing for mobile"? What makes the perfect usability experience on all devices? Sadly, there is no straightforward answer, but hopefully this article should make the problem clearer. There are four main types of website design: Fixed, Fluid, Adaptive, Responsive. Each comes with its benefits and deficiencies when it comes to viewing on multiple devices, as described below:

Static Website Diagram

Fixed (a.k.a. Static) width websites have been falling out of favour with increasing numbers of designers for years, but is this justified?
Benefits - The designer is given maximum control - no matter what screen the webpage is built on, it is relatively easy (and therefore low-cost) to display everything as intended in an identical fashion.
Deficiencies - Fixed width websites are built for viewing on desktop screens. If the full site is fed to mobile devices, the user will need to zoom and sideways scroll, marring the browsing experience. Also, if the user has a particularly large computer screen (which have generally been getting bigger over time) there will be copious amounts of 'white space' either side of the design. A way around this would be to build a separate mobile site or app, but creating and supporting this can take up a lot of developer time, and therefore is a costly option. Apps may not give you full site functionality

 

Fluid website diagram

Fluid width sites were possible to produce years before adaptive and responsive design
Benefits - These sites are able to expand and contract, allowing you the ability to remove any 'white space' on either side of a desktop screen
Deficiencies - These sites tend to fail on smaller screens, especially when there are lots of columns or a horizontal menu. As the columns menu items are squeezed into smaller spaces, the text will wrap more and become virtually unreadable. This is normally overcome by adding a minimum screen width, but this will inevitably mean some scrolling is needed on smaller devices

Adaptive website diagram

Adaptive sites are a way to quickly produce modern sites on a relatively small budget. Twitter's Bootstrap 'framework' and the lightweight Skeleton 'boilerplate' can be used as a base over which adaptive sites can be built.
Benefits - You will be able to produce a modern-looking site which will look great on any size screen. Most adaptive sites are based on a 960 pixel grid, that can re-arrange its components as the viewing window is made smaller to aid usability. Carousels can be shrunk for tablets and omitted altogether (or replaced with a small image) for mobile viewing. If you want to, you can have a swish looking drop-down menu for mobile to maximize screen space and minimize scrolling!
Deficiencies - It is slightly more difficult to ensure sites display uniformly across different browsers and more costly than a standard fixed website. If badly implemented, adaptive designs can slow page load times which can be a problem on mobile

Responsive website diagram

Responsive websites are the most difficult kinds of site to produce, but when carefully prepared will give users the ultimate browsing experience! This type of site is 100% future-proof
Benefits - You can insure that: text will always be displayed in a legible format with a suitable line length and font size, that every aspect of the website will be at the optimum size and position for every possible screen-size, unwanted items can be omitted in mobile view and that no white space will display unless you want it to and the overall design of the whole site looks immaculate and well balanced in any screen size
Deficiencies - These sites take time to perfect and can therefore be costly to produce. Again, if implemented incorrectly, page load times on mobile can be affected

We're always happy to give you personalized advice on the best way to design your website. Just drop us a line on 01865 596 144.

]]>
2016-01-23 15:36:43
How Mobile Devices are Shaping Websites and Software - Part 3 http://oxford-web.co.uk/blog/how-mobile-devices-are-shaping-websites-and-software-part-3-1 In part 3 of this article we will focus on a case study which illustrates how difficult it is to predict what the next trend in popular technology will be by discussing the achievements and failures of what is possibly the most contentious operating system of all time - Microsoft's Windows 8.

In part 1 of this article, we alluded to the fact that the usage patterns of mobile devices are very different to those of desktop usage, so why make an OS that runs on both pc's and mobile devices? Critics of Windows 8, of which there are an abundance, claim that there was no benefit. They dismiss Windows 8 as the by-product of a panicked reaction by Microsoft to falling pc sales and profits.

When the software was first released, one of the first negative observations mentioned was that Windows 8 machines did not boot to the familiar desktop screen but to the touchscreen-friendly and contemporary looking 'start' screen called 'Metro'. Users were at first left with no explanation as to how to navigate this digital Mondrian painting: Steven Sinofsky, the lead decision-maker for Windows 8, mistakenly believed the radically new operating system was intuitive enough for new customers to use without explanation.

Only after months of condemnation and Sinofsky's departure from Microsoft was the option to boot to desktop made available in Windows 8.1 (a.k.a. Windows Blue) along with other legacy options loyal Microsoft customers were missing such as the start button and a beginners help tutorial to make Metro understandable. Conversely, more recently, some users who managed to navigate the original edition of Windows 8 have been angered by being forced to upgrade to 8.1. Suffice to say, substantial damage has been done to Windows 8's reputation and many people still find the transitional mechanism between Metro and the desktop clunky, especially on a pc.

Market figures point towards Windows 8 being a flop. Although license sales in the first six months equalled those of Windows 7, this was mainly due to an ultra-cheap introductory offer. Once the offer ended, license sales reduced rapidly. The rate of decline in pc sales wasn't dented by the new operating system, despite the heavy promotion, and some say it may have sped it up.

It is worth noting though, that tablet sales running on Windows 8 and Windows RT have done quite well, taking 7.5% of global sales. Although this is small compared to the 48.2% share for iPads and Android with 43.4%, it is still a reasonably respectable figure, considering the difficulties of competing with price and a lack of apps. Microsoft have also given no option for a mini-tablet, the current consumer favourite, although other manufacturers have now introduced mini-tablets running on Windows RT or Windows 8.1, such as the Dell Venue 8 Pro.

And finally, perhaps it's possible that Windows 8 could be paving the way for things to come: its design is revolutionary and it could take a few years for people to get accustomed to the change. Hybrid laptops/touchscreens such as Microsoft's  'Surface Pro 3' are becoming more affordable, compact and ergonomic and it's possible these may help Windows 8 win through in the end - it'll just be a case of waiting to see which route consumers take.

In the final part of this article we will explain the different methods of web design and find out what it means to make your website 'future proof'. We will also discuss the rapid growth of the app market.

]]>
2015-10-13 10:33:12
How Mobile Devices are Shaping Websites and Software - Part 2 http://oxford-web.co.uk/blog/how-mobile-devices-are-shaping-websites-and-software-part-2 In 'Part 1' of this article we talked about how mobile devices have changed the way we use and access information on the web. Here we will discuss the historical shifts in popular technology trends.

The problem (and the thrill) for technology companies trying to keep pace with the speed of innovation is that the fundamental drives and habits of consumers alter as new 'disruptive technologies' become available. As it is very, very hard to predict what the next habits of mainstream society will be, large companies need to gamble, or risk losing out to smaller, innovative businesses - of course, the bigger they are, the further they have to fall!

desktop computer and various other devices

An example of a major, historical technological shift was IBM's misjudgement of the importance of the pc. In the early 1980's, the company was the leader in the IT market - in both software and in hardware. They then approached 19 year-old college drop-out, Bill Gates who was a co-founder of Microsoft, to provide them with an operating system; the way history progressed could have been very different, had they not allowed the young Gates to maintain property rights of his product. Nobody at IBM expected the pc market to grow as it did. The company regarded pc's as an exciting gadget, not the direction of the future. Their choice to instead focus on mainframe computers (powerful commercial computers for various large-scale applications) preordained their near demise - they failed to profit as desktop computers increased in popularity and in 1993, IBM created a media storm when it reported massive financial losses. The reasons behind this were cited as a combination of increased competition and a changing market.

Another of the largest technological revolutions to date revolves around Microsoft's rival, Apple. In 1997 the company was on the verge of bankruptcy, but was ironically saved when Microsoft invested $150 million in the company. Microsoft's thinking behind the move was partially to prevent accusations of monopolizing the pc market but also to continue its promise of developing Mac versions of its software. Of course Apple then created its own innovative market opportunity by focusing on mobile devices: creating the i-phone and the i-pad. This takes us to our present day situation, where Microsoft has been left behind for not adapting to the mobile trend in time. In a startling change of fortunes, Apple is now the world's most valuable company.

As awareness of the nature and increasing frequency of disruptive technologies increases, companies realize that to stay relevant they need to predict future trends. As part of their search for direction, Microsoft have made an attempt to bridge the gap between various mobile devices and pcs/laptops and to consequentially win back pc users: the new "touch-first" operating system which could run on any platform: Windows 8. As you're almost certainly aware, there was a fair amount of media criticism when this OS first hit the shelves... Part 3 of our article will analyize the positives and negatives of Microsoft's latest operating system Windows 8.

]]>
2015-07-30 09:46:12
How Mobile Devices are Shaping Websites and Software - Part 1 http://oxford-web.co.uk/blog/how-mobile-devices-are-shaping-websites-and-software-part-1 The dramatic rise in the use of mobile devices is evident all around us: business people on benches in the park scrolling through the latest news articles on their lunch break, new parents using price comparison apps to ensure the weekly nappy spend is within budget, and of course for every street gathering of children or teens, at least one is guaranteed to be checking their phone. Here in Oxford during tourist season, phone cameras have greatly eclipsed regular digital cameras as the method of choice for documenting a rainy summer abroad.

According to a study by Cisco, the growth of internet traffic on mobile devices is predicted to grow by 66% each year until 2017, at which point total mobile internet traffic is anticipated to exceed fixed (or "non-mobile") traffic. Sales of tablets are predicted to overtake PC sales in the next couple of years and more apps are being produced to make viewing online content on mobile devices quicker and easier. The way we view the internet continues to rapidly evolve.

Mobile Technology

To keep up with the changing way we view the web, most new websites are optimized for tablet and mobile. Existing sites are redesigned and relaunched with mobile-friendly interfaces, and even the kind of information they display - the very purpose of these websites is evolving in order to stay relevant. But how? And do you need to alter your website?

As mentioned before, apps are increasing in number. Popular business networking site LinkedIn was initially designed as an online CV and employer database with embellished functionality. Now it has five mobile apps to carry out different functions to help tailor site experience to various user categories. For example, the 'Recruiter App' was produced to connect job seekers with recruiters. LinkedIn also bought newsreader service app 'Pulse' last year, hoping to increase regular site usage with informative industry and business articles. However, there needed to be an underlying reason for such an expensive takeover and the costly developer time needed to produce these apps. LinkedIn plan to monetize extra page visits by using advertisements.

Mobile devices, are best equipped for information consumption on the move, rather than content creation (mainly due to slowness and inaccuracies of touch-screen keyboards or tiny keys). The commute to London on the Oxford Tube is made much more palatable with a tablet to hand. Engaging daily articles from Pulse and simplified viewing and navigation provided by the other apps should make them much more appealing to this sort of audience. Additionally, regular site updates also improve Google and other search engine rankings and therefore increased 'hits' - the benefits of a dynamic site in the vast majority of cases can't be disputed!

Although LinkedIn is a successful company attaining yearly growth, as things currently stand, their takings are mainly obtained from recruiters paying for database access. When you compare its figures to other popular sites, it is clear there are better revenue models in existence: Facebook boasts over one billion users visiting at least once a month compared to LinkedIn's 200 million (out of more than 300 million members) coupled with a slower rate of income growth. Although LinkedIn has never called itself a 'social network' it realizes that the ad models used by content rich sites such as Twitter and Facebook will increase its growth, allowing it to keep pace as one of the world's most prominent websites. Increased phone and tablet usage from commuters and casual evening and weekend browsing is propelling a web-wide increase in content-driven sites.

Taking mobile development a step further, online photo and video sharing site Instagram, created in October 2010, was one of the first companies to adopt a 'mobile first' ethos; the Instagram website wasn't rolled out until early 2012, having existed purely as an app for Apple and Android products prior to this date. Instagram entered the market with a dynamic, innovative attitude and armed itself with endless quirky, retro photo filters to appeal to a growing hipster community. Its pioneering 'mobile first' approach: primarily designing for small screen access, worked well for the company. Their app pre-empted a genuine need of a public platform to upload and share photos taken on-the-go with phone cameras. However, the 'mobile first' design method is only suitable for certain applications which fulfil similar market demands. In truth, few such companies have achieved great commercial success: it has always been difficult to predict market paradigm shifts in technology development. As the pace of change quickens, predicting the next trend in technology usage is viewed by most as a black art.

Apps are currently only economically viable (and constructive) for large businesses. However, we'll discuss excellent alternatives for smaller companies in later sections of this article. In 'Part 2' of 'How Mobile Devices are Shaping Websites and Software', we expand further on the history of paradigm shifts in technology and discusses the widely criticized Windows 8 operating system.

]]>
2015-06-09 15:35:14
The website that grew - part 14 http://oxford-web.co.uk/blog/the-website-that-grew-part-14 (for previous installments, try the tWtG category)

As the position on search engines improved, the site's popularity gradually grew. But Kate knew that search engine position wasn't the only way of drawing in customers. Some customers would be interested in connecting with the shop via social media channels, or receiving a newsletter which would give them discounts from time to time. So it was time to look at some of these methods.

First of all, Hugh showed Kate a chart of some of the common methods of online communication with customers.

some social media channels - email, facebook, twitter, quora, pinterest, google plus, website

"You've got to take into consideration what suits your customer base too" said Hugh. "Facebook is a consumer oriented medium, and your customers are consumers, so putting up a facebook page and getting "liked" is important. Once you're on people's facebook streams, it would be crucial to maintain a slow but steady stream of special offers and customer feedback.  But for the non-facebook users, those offers should probably be repeated in a monthly email newsletter."

Kate agreed, and was also quite interested in setting up Google+, twitter, and pinterest accounts, but realised that she did not have time for everything.

"We've talked about return on investment with the Google ads." she asked; "How does it work here?"

"Although we're working with a digital medium, it's sometimes a bit more like traditional advertising when you work facebook," said Hugh, "but you can measure clicks and buys from social media and emails.  So it's really important to do that, and that will give you a very good feel for how much all this work is worth."

 

 

 

]]>
2014-06-08 20:19:52