6. How do websites work across
platforms?
• Progressive Enhancement
• Graceful Degradation
7. Content Management Systems
A CMS such as “Magnolia” can be very helpful in
creating content for a mobile device.
8. Difference in code?
• HTML for desktops and laptops
• WML, IOS, Android for mobile devices
9. Recommendations
• Use coding that will work across all platforms
• Make sure to check the URL in every browser
• Use CMS technology designed to work with
mobile devices
• Make sure the layout is mobile friendly
10. Would you want this to be you?
There is no difference between the mobile site
and the desktop site.
Desktop Mobile
15. Sources
• Dawson, A. (August 18th, 2010). “Mobile Web Design: Best Practices”. Retrieved from
http://sixrevisions.com/web-development/mobile-web-design-best-practices/
• Faletski, I. (November 18th, 2009). “7 Tips to Make your Mobile Site Friendly”. Retrieved from
http://www.sitepoint.com/7-tips-to-make-your-web-site-mobile-friendly/
• Ma, S. (January 17th, 2011). “Designing for the Mobile Web: Special Considerations”.
Retrieved from http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-
special-considerations.php
• Ma, S. (March 21, 2011). “10 Ways Mobile Sites are Different than Desktop Sites”. Retrieved
from http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-
desktop-web-sites.php
Editor's Notes
We live in a very progressive world. Technology has grown exponentially in the last hundred years and has become more advanced than in the previous thousand years. We went from big box desk tops to mobile devices that fit into the palm of your hand.
When a company creates a website for a desktop device, it usually doesn’t take into account what the website would look like on a mobile device. Companies need to be as progressive as technology has been. You should no longer concentrate on what the site will look like on a desktop, but now you must think about mobile devices as well.
Mobile devices need to be easy-to-use. A website cannot be too condensed or complicated for mobile devices. It needs to have the same type of usability as it does on desktops, as well as improved aesthetics so that it retains its professional look on a smaller device.
Take a look at how many more devices were shipped from 2009 through 2013. In 2009, there were 35 million smartphones shipped in the first quarter alone. At first glance it appears to be remarkable until you observe that just four years later, 315 million smartphones were shipped in the first quarter. That is about nine times more units shipped in in a period of four years.
Desktops and Notebooks were the way to go for many years. You can see the steady increase in shipments starting in 1995. Both took a while to get established and increased slowly. Today growth in the sales of tablets has been immense. In a four year period, the sale of tablets reached heights that desktops and notebooks had never reached in a twenty year span.
From May of 2013 to May of 2014, web usage on mobile devices has increased from 14 percent to 25 percent around the world. That means that mobile devices are starting to become more of the norm for web browsing. Again, this is not a small increase in a ten year span, this is over the course of one year. The world is changing drastically and quickly and its all headed in the direction of using mobile devices.
When working with websites across different platforms, the coding has to be literate across all of the platforms. Many mobile devices don’t support the coding of desktop viewed websites so there are certain actions that can be done to adjust to the newer technology.
Progressive enhancement is when the site establishes a base level experience for all of its users. As the browser is able to support more complex coding, more advanced functionality can be added to the site.
Graceful degradation is pretty much the opposite of progressive enhancement. The site is built for the newer browsers while the technology does not work to its full potential in older versions of the browser. While the basics of the site will be available, the advanced functions or pictures might not work.
With the growth of mobile devices, both progressive enhancement and graceful degradation must be taken into account when creating sites for all platforms.
A content management system is an application that allows for editing and modifying the content on websites. These programs are usually used by people who are not well-trained in website design. The program keeps things simple for the user and helps create what the user has in mind.
Magnolia makes you a rock star when it comes to creating and editing content. Magnolia specializes specifically in content management on mobile devices and can be a great asset to “The Adult Literacy League” moving forward.
HTML works across desktop and laptop platforms but sites must be done in different code in order to work on mobile devices. Some mobile devices support WML while certain companies support only their versions. Apple devices use IOS technology while Google devices use Android technology. Code must be written in a way that can be supported by all of these technologies. It isn’t in the best interests of your company if your website can be accessed only from a desktop but can’t be fully accessed on an I-phone or Droid.
Now, when it comes to the Adult Literacy League, I have a few suggestions on how to make sure its website can be used and accessed across all devices. The first is to make sure that the content is written in coding that can be read by all platforms. Time and energy should be spent to make sure that it can be accessed easily on all devices while ensuring that the site does not become out too cluttered on mobile devices. The Adult Literacy League should also check its URL in every browser to make sure it’s supported. A tiny mistake can prevent the website from showing up in certain browsers. If the site doesn’t work in a browser, it certainly won’t work in that browser on the mobile device. Another recommendation is to use a CMS program that can help. Not everyone can be an expert in designing websites, CMS technology will make life a lot easier. Lastly, it’s very important that the layout of the site fit perfectly in accordance with mobile device’s smaller screens.
When you create your website to show up on mobile devices, you want to make sure the site fits well with the device. Take a look at these pictures. The first is a picture of mets.com on a desktop and the second is mets.com on mobile. Are there any differences? The site was not created for mobile devices. Neither he text nor pictures fit the screen of a mobile device. Everything is cluttered and the small writing makes it difficult or impossible to read the captions.
The same can be said for steampowered.com. The desktop version is the same as the mobile version. Everything was shrunk in order to fit the screen of the mobile device. Anyone visiting this site on the mobile device is going to be unhappy with what comes up. No one wants to strain his eyes by trying to read the content. There is no style change or resizing of images. The change of the device (mobile vs. desktop), requires appropriate modification.
Now take a look at the UPS website. On the right you have the desktop version of the website. Everything is explained and the navigation is easy. On the left you have the mobile version of the website. It is completely different from the desktop version. The writing and captions fit the small screen and the navigation is incredibly easy. The main page doesn’t have everything that the desktop version has, but it specifically gives the user what he wants. There is no nonsense or searching around. If I want to check my shipment it’s in the middle of the screen and requires no scrolling. UPS makes sure to prioritize all the content that a customer might want.
If you take a look at the Chase website on the right, you can easily tell that it was set up for a desktop. When you take a look at the Chase website on the left, you will know that it was created for mobile use. A good mobile website should have be easy to use. Chase couldn’t fit everything on to the small screen of a mobile device that it could fit on to a desktop screen. For the mobile site, Chase limited the options to what people will need the most. Pictures and stories were eliminated because they are not necessary.
This brings us to the end of the presentation. It is imperative for us to see where technology is going. We cannot create websites that don’t take into account the mobile users. The use of mobile internet is growing every year. If we are left behind, we might never be able to catch up.
We have seen the differences of how sites appear on multiple platforms, it’s easy to understand what needs to be done. Be sure to create code that is used across all platforms in order to keep up with the competition. Understanding the need to update is probably the most important aspect I want you to take away from the presentation. Don’t try to be like other websites or other companies. Try to keep up-to-the-minute in this quickly changing world. Before we know it we will be creating new media because websites on mobile devices and desktops will be a thing of the pas!.