Links: [[01 - Technology for Product Managers]] ### Desktop and Mobile Web #### Mobile UX: Understanding how a person's experience changes when moving from a desktop or laptop to a phone or tablet. - Differences: - No Mouse: There's no way to right-click for options when you see something you like. However, you can swipe and scroll and easily change the size of the content with pinch gestures. - Small Screen: The screen is much, much smaller, and simply shrinking an image often won't work. A chair might look great in a room setting on desktop, but shrink that picture to phone size and the image of the product becomes tiny. It might be that just a different picture showing the product you're selling is needed for a phone. - Smaller Memory and Lower Processor Power: mobile devices have much smaller memory and lower processor power than a desktop, and this makes it harder to show complex things like photos and videos. #### Optimization: `When you're on any device and connecting to a web server, the data stream that goes to the web server includes information about the operating system, browser and device type. This basically means the website knows what device it's talking to in terms of brand, model and related things like screen size. Armed with this information, there are two strategies that people use to develop sites that are optimized for the device it's being viewed on. The first is to use a fully separate mobile site.` 1. **Using a fully separate Mobile Site:** The first is to use a fully separate mobile site. This is where the server is programmed so that when it detects a phone, it sends it to a separate mobile-friendly site. That site will have text, images and designs specifically for a small screen. This is usually called having an m.site because the website it sends the phone to is m.whateversite.com. The method is one of the earlier ways of making websites and isn't really used much anymore, because it basically requires that the engineers build and maintain two separate websites and code bases. 2. **Responsive Sites:** A single design that responds to the device type by changing the content size, or actually changing the design for smaller screens. This can be done in the CSS code by setting what are called breakpoints. Breakpoints adjust the size and position of elements on the screen based on the width of the screen. This method may limit how complex your designs can get, but it's much faster and easier to maintain. #### Breakpoints: Adjust the size and position of screen elements, based on the width of the screen. --- ## Content Management System (CMS): *Software used to design and manage website content.* #### Benefits: - Easy to find, publish, and modify content. - Allows non-programmers to publish content. - Usually Browser based for easy access. This works because the content goes into predefined templates that maintain the site's design while still taking care of details, like how well the content will be found in web searches. eg. Wordpress (A modern CMS) #### WYSIWYG Development: - What you see is what you get (WYSIWYG). - Squarespace & Wix are WYSIWYG page builders as they offer template based development (Drag and Drop) through an interface.