I never thought about it before but the way a website shows up on different devices makes a huge difference on whether I like the site or not. The best worst example is of course the tracs site that it terrible on mobile. Its important to have something that looks nice and is easy to use.
Responsive Web Design
The first article explained how using a responsive layout helps adapt to different screen sizes by inspecting the physical characteristics of a device using media queries. I’m a visual learner so this article really helped me understand how different coding affects the layout.
I learned that responsive design can be used to create fluid grids, flexible images or a whole alternate layout using media queries. From what I understand, media queries are are lines of code that act as a test.
Media queries can load a completely different stylesheet or just manage a certain section within the same stylesheet. For example, if screen size is less than 480px then the alternate stylesheet for a mobile device will load. Otherwise it will be ignored.
Intro to CSS Media Queries
The second article goes more in depth on media queries. It explained that CSS3 allows targeting specific screen sizes by looking at:
- Height and width of device
- Height and width of browser
- Screen resolution
- Orientation of device
These are different situations that will cause the website to respond in a certain way. The most common attributes that are changed to allow responsiveness are width, height, float and margins. So instead of having to create a complete stylesheet for a specific test, you can modify with a couple lines of code within the same stylesheet.
Responsive Web Design vs Mobile Website vs Native App
Because of the way a responsive layout works, it has its cons as the third article explores. Since media queries use CSS3, some devices may be outdated and won’t display they way a site was intended. The article compares different ways to adapt a website: responsive web design, mobile website or a native app.
Responsive design can provide a good user experience given that the device isn’t outdated. A mobile website allows better user experience but requires more our of the web developer. An app is often the most useful to get information quick but it can take time for the developer to get updates into the app store.
None are right or wrong to use but when deciding which one to use keeping business goals, budget, and industry features are key.
I also really appreciated the visuals that were depicted in the articles because they did help me better understand what each code really meant. The media queries were very enlightening too, I never knew that we could adapt our web browsers like that until I read this article.
Agreed, the tracks site sucks. I don’t understand why the University or tech support doesn’t fix it? But I guess if it bothers someone so much, just get the app. The Texas State app has a section of tracs works just fine though.