Responsive Web Design allows websites and pages to display screen sizes on all devices such as tablets, desktops, laptops, and smartphones. It simply works by using the viewport in the meta tag and media queries in the CSS. It helps to fit the web pages on every platform of the page. How do you know if your website has Responsive Web Design? You can simply go into Google Chrome or any other browser and right click on the screen and select Inspect or (Ctrl + Shift + I) on the keyboard. You can also go to the Google Mobile Friendly to check and see if your website is mobile friendly.
I believe this trend will be around for a long time because many design trends are used to make the websites fit properly on all devices. Without Responsive Web Design, web pages won't be able to fit correctly on devices because no viewposts and media queries are not defined.
Motion Design in User Interface can help bring animation to life. When the user visits your created app, they will see animation when you hover or click on buttons to see the cool transitions and animations play. Having animation in User Interface tells a story about what the mobile app is really about. You can use Motion Design to identify your brand name, create responsive gestures, creating cool and effective visuals, creating transitions for hovering or clicking on a specific buttton, and creating your mobile app with mobile first.
The Motion Design in User Interface is brand new for the mobile first platform and it will make user's comeback to the app again. People love stories and the best way to do that is with animation. It's just like how Walt Disney created the first animation cartoon "Steamboat Willie" with Mickey Mouse back in 1928.
In Mobile Apps, there are two design aspects called a UX Design and a UI Design. A UX Design, also known as User Experience Design, is a graphical layout that helps the user interact with the mobile app buttons. For example, if the user was so amazed by the styling and animation aspects of it, chances are they will visit the app in a day or so. It's just like playing an app game you really love to play, and you'd recommend it to all your friends and family members. A UI Design, also known as a User Interface, is where you can view how your products look and how they function. For example, if I was on an eCommerce site selecting an item to add in my cart, it will go to the next link to add your credit or debit card information and the form will want you to submit your confirmation on purchasing the specific items. Google is another great example for User Interface becuase instead of typing out what you want to search, you can click the microphone button and ask Google what you want to search for.
I believe this trend is already standard seeing that everyone is using a smartphone to access app games, social media, etc.
A Content Management System is a software that helps users create, manage, and modify content on a website without any knowledge of coding experience. It's very simple and it allows you more time to work on your website. You can create your website within a day or two depending on what you want added. Other than writing every bit of code in HTML, you can choose a theme in WordPress or get a template from Joomla to start off writing your paragraphs and changing your navigation links to different names such as Home, About, Portifolio, and Contact. There are many CMS systems out there that are free to use, but if you want to go for the Premium Package, it will come to extra costs; and same goes for templates. WordPress, Joomla, and Drupal can easily be installed in your Web Hosting Account like GoDaddy, BlueHost, and HostGator.
Content Management Systems will always be a future standard because many people who want to build their own web site won't really want to take the time to learn how to code. I've used CMS systems such as WordPress and Joomla and think that if I had a client who wants a website within a day or two that I would work with either of them to save time and money. CMS systems help people a lot and will in the future.
HTML5 is a document markup language that helps to construct web pages. To create a web page, you'll need to put in an opening and closing html tag, head tag, and the most important object for the overall page: the body tag. You can then put all your selected tags between the opening and closing body tag. For example, h1-h6 for header, p for paragraph, etc.
CSS3 is a cascading styling sheet. The file helps to style your website with colors, background colors, font-styling, font-sizing, and so much more. When you want to select a tag you want to style, it helps to put your CSS in an external file in the same folder as your HTML, and add the link tag between the opening and closing head, internal where you can add a style tag to the header, or an inline where you can add your CSS styling in your tags by selecting style="background-color: blue;" in any of your HTML tags.
I think HTML5 and CSS3 are already standard for the future because there already new properties and values added to CSS3 and new tags added to HTML5. These file extensions will be around for a very long time!
In this learning, I learned how to create a mobile friendly site by using media queries for tablet and smartphone use. I started with a basic template and worked my way around it. I added new colors, font-sizes, and restructured my mobile site with media queries. The most difficult part of the problem was I was testing my site for mobile friendliness in the Google Developer Tools because my screen would swipe to the right and it showed white spaces on the right side. I managed to find out that it was my container class that surrounded my whole-body document. So, I looked up the property value to fix it which is overflow: hidden; and kept my width at 100% and that did the trick. I was able to increase my knowledge of media queries more than I did in my CSS Technologies class last semester which I find very surprising. I wanted to make sure that I kept my mobile site readable, simple, easy to navigation, and not adding a black background color since that increase glare on the screen. I also learned about the picture tag since it's so useful for choosing an image and setting the size on when the image should show up depending on what device you're viewing it on.
In Learning Plan 1 Part 2, I managed to make a mobile friendly site that can fit for tablets and smartphones. I added Media Queries for both the tablet and smartphone screen sizes so that my web page will be easier to view on all devices.
Mobile FriendlyIn Learning Plan Part 3, I chose to learn how to create a Parallax Scrolling page with Motion Design. I added a div class called parallax to incorporate my background-attachment, background-size, background-repeat, and 100% height. I also gave my animation names called parallax-head, parallax, and social to work the animations to the @keyframes.
Parallax Scrolling With Motion DesignIn this learning plan, I learned how to incorporate Parallax Scrolling With Motion Design. When hearing the term Parallax Scrolling, I didn't know what it meant. Parallax Scrolling is a web site trend where the background content is moved at a different speed than a foreground content while scrolling. For example, when the background attachment of the image is fixed in the CSS, the background will not scroll with the content, it will stay flowing. To incorporate a Parallax Scrolling content, I had to add a div class called parallax. Then, I added the class name to my CSS and added the background.gif image to center my background-position, no-repeat to background, setting the height to 100%, and making my background-size to cover. In the Motion Design, I added animation effects with names so that when I add the name to the @keyframes, it will animate the selector area where the name is shown. For example, if I were to call my animation Patrick, then all you'll have to do is add some animation property and give it a value. After that, you'll need to add the @keyframe with the name Patrick (@keyframes Patrick { {code here} }) and add the given properties and values you want to change. I changed my animation with transition-duration when hovering over the social media icons, moving the margin from smallest to largest in the parallax background, changing the animation-durations of the header colors, and changing the font-sizes. I used Media Queries for mobile size for users to view on all smartphones. I really enjoyed creating a Parallax Scrolling Site With Motion Design because I learned that even though it's difficult to create, you can make it fun in the end.