The third of a four part series called Getting your Project off the Ground: A practical guide.
Knowing how you want to represent yourself online can be a big decision! More so, because designing for the 21st century has gotten more complicated and involved then just making one design. Let’s take a look…
It’s often overlooked that when designing a website or online project we have to consider all the platforms that are being used. More to the point, you aren’t just designing for several different devices but reacting, potentially changing content, and adapting to the layout and size.
So what am I saying? Development and design for the 21st century has changed drastically from a one-size fits all mantry of design. You really end up designing differently or at least changing the layout of content based on various devices. For example, on desktop machines we can have two columns of information but on mobiles these become one section after another. But what if in one column, the second, you have important information that should be presented first. This is where development and design can do some of the heavy lifting to make this possible.
What I am trying to outline basically is that when you design for multiple devices you end up with 5 designs not 3. You have tablet and mobile devices that require different designs based on horizontal and vertical setups. Then you have desktop as well! This contributes at times to a higher price in budget to ensure that your website in an effective manner for all of these displays.
Now you might be asking yourself what solutions lie out there for smaller budget websites? As mentioned in PART 1: Comparing WordPress vs Drupal vs Joomla we indicated that frequently with WordPress you purchase a theme, which is then tweaked to your hearts desire to make things work. This solution works really well and there are a lot of themes out there that provide pretty solid responsive design for different displays.
The risk you could encounter is that your website is a lot more complicated, information wise, to really respond the way that it is setup in these custom themes. It’s important that at the onset the designer you work with truly understands all the moving parts, information, and content that you want to present to the world.
When integrating a final design created by a designer there are two schools of approach: Build this using Adaptive design or build this with Responsive design. You should really know which one you are getting and understand how these two differ. Here’s a crash course.
Adaptive Design
The way that adaptive design works is that there are several distinct designs that work for multiple screen sizes and adapts to the specific screen size provided. Therefore, you might have on integrated design for desktop, mobile, and tablets. This design is constrained to these design sizes and modifies based on the detection of a specific device screen size.
Responsive Design
The responsive design is the optimal option in design as it reacts to the modified screen to shift content around making it more usable. Literately, responsive design goal is to make the optimal viewing experience no matter what the screen size the user is viewing. You can test out websites for being responsive by resizing your browser window and seeing how they respond. If the content does not move then the website is more than likely adaptive.
Eeek which one to choose
There are pros and cons to both designs. As you can imagine, responsive designs are more involved and therefore can increase the price of the design and integration of the project. The added advantage is that with the growing non-standard market of mobile and tablet screen sizes you end up with a design that is flexible and can adapt to users needs and displays. This is because responsive designs are really more fluid and become free of constraints of display sizes.
Adaptive screens on the other hand are much cheaper to implement, because there are less design decisions and integration considerations as they are more rigid. The main drawback is that the final results may not cater well to the growing mobile screen sizes that exist. Why? Because adaptive screens are you are really designing for several limited screen sizes, which might not work as well with a larger mobile screen or tablet display.
The what? This new tag allows for developers to actually specify specific images with relation to varying screen sizes. This means that smaller and more scaled down images can be loaded for mobile and tablets. Having such support is significant in increasing your Google ratings as they determine your ranking in their mobile search results based on the speed of your website load times.
The basic concept is that the picture tag can provide a vast array of different image dimensions for different screen resolutions. Sometimes I hear people doubting that this would actually make a difference. But if you think about downloading an image of 2000px by 2000px on your mobile phone, which has some CSS to make it fit you get the idea. No only that, but the reality is Google is prioritizing websites that are faster and more robust. Sending a mobile a large image intended for a desktop that is scaled down for a mobile app is not that optimized nor is it going to help people’s mobile data.
The great thing is that most content management systems support this quite easily as long as you ensure that your developers are integrating them. One caveat, I have noticed that a large majority of WordPress plugins actually don’t always support this technology properly and so you are left loading the same image. WordPress, on the other hand, has added technology so that placing an image in Featured image and/or within body text will properly be converted into a picture format. These are scaled down based on a preset screen range, but this can be modified in a difficult way through the template files.
Drupal takes the cake for it’s implementation of the picture tag. You are required to set all the image breakpoints, and then can select the proper rendered Image style that you wish or even none if you want to hide it! This ups the game because it means that you have way more control over the image that is being served and how it’s cropped prior to be delivered to the user.
It depends on your target market and the type of your website, but there is new technologies beyond SEO that can help you gain better reach on social platforms and search engines. If you are building a simple website that won’t have a lot of blogs or other things feel free to skip this section.
So what do you mean? Well, Facebook has built the Instant Articles technology that caches your webpages to provide them faster on mobile devices. When Google caught wind of this new technology they also built the AMP pages technology, which, if implemented, turns your blogs into simplified pages, cached and served by Google.
So what’s exactly the advantage? Well serving pages from providers like Google and Facebook well certainly be quicker and have the advantage of potentially reaching people more effectively. Google, for example, prioritizes AMP pages over other webpages as they market that Google Search for mobile will provide faster webpages over slower ones first in the results. So it doesn’t just mean having an AMP enabled website, but also a fast running and cached website as mentioned above. It’s possible that Facebook also prioritizes their Instant pages, as it can guarantee the content will be served quickly.
I also mentioned security above, because this has also become an extremely big priority for Google. Presently, Google Chrome will not notify users when they are on any form that is not served over secure page that they are passing information insecurely. Should this concern me? Probably not. But it might concern others who are using your pages and cause them not to use the pages. We aid websites to setup the free Let’s Encrypt certificate, which grants websites with free encryption, security, and believe it or not the capacity to get better Google Search results.