Want to design a responsive website you can be proud of? This is definitely not an easy feat. Even though your project looks pretty good from a design point of view, there are still many things that can break it along the way. Fortunately, We’ve got some useful advice for you to save your time and nerves. So, today we are going to discuss couple (seven) of suggestions and tips you should consider achieving your goal. Let’s dive in
1 – Focus on content
Mobile-first, desktop-first or whatever approach you use or like, the most important thing to keep in mind is content (and then context). The content should always drive the structure and organization of the website. So, the first thing to do is to become familiar with the content of the website. This should be done before getting your hands dirty – before creating any wireframes or mockups. The sooner you will take this step, the better. When you omit this part of the process, you are only putting yourself at risk of trashing your current work and starting all over again. You certainly don’t want to waste the time of your and your client.
2 – Forget the resolutions
Yes! Remember this, spray this on your wall if you have to because this is (after being content-focused) one of the most important rules of responsive web design. Understand, you are not creating for fixed dimensions. Your creation will have to adapt to various sizes of screens. What’s more, if you are not able to see the future, the range of resolutions in use will only expand. So, if you are still working in resolution-focused approach, you are about to get into big troubles.
A quick way to get out of this dead end is to adopt the content-focused approach. What this means is simply testing your website on different resolutions and dimensions to see where the content (layout) starts to break and use this dimension (width or height) as a breakpoint. In a case of some websites, this will probably mean adding a bit more breakpoints than you are used to but don’t worry. It will benefit you (or your client) in the future because, if done right, your website will be ready for devices that are about to come.
3 – Think about bandwidth
Another thing to keep in mind is available bandwidth. To make this topic even better, users will have the different resource to use according to their devices. All this means is that you have to consider thoroughly what to provide with and to optimize everything you can. so We just mention here that you should always optimize the CSS and JS files through minification and proper coding style and also optimize other assets.
4 – Phones, tablets, desktops and …
Do you also live in the illusion that there are only three types or categories of devices you are designing or developing for? Well, in that case, you should finally wake yourself up. In the world, the plethora of various devices exist and with time, even more, will come. Now we have wearables like smart-watches, eBook readers, phones, smartphones, tablets, notebooks, notebooks, ultrabooks, desktops and more. Give it enough time and your t-shirt will be connected to the web too.
This all means only one thing. When you create a website, responsiveness means seamless experience on all of these devices that already exist and also that not. Excuses aside. You have to tailor your design in such a way that no device, no matter its resolution or pixel density, will be an issue.
5 – Typography
The Web is about 95% typography. The most of the content we consume on a daily basis is in a certain way dependent on typography, whenever it is a blog post or infographic. When working with type, plan and test how it should look at different devices. Some article can look amazing (from a typographic point of view) on a desktop, but when you visit the same article on phone, it looks like a crap. The only way to avoid these situations is to always test different scales of the fonts.
You should always preview the content on as many resolutions as possible. Make sure the content looks great in every case. There is no “perfect” way to achieve this goal. You will have to learn about psychology and laws of typography and then go through trial and error to see what works and what not. If you feel that increasing the font-size will benefit the legibility and readability of text, then go with your gut. Only by doing this, you can bulletproof your website. And please, don’t believe that bullshit about smaller font-size on a smaller resolution.
Ask yourself if this or that fancy stuff provided by JS is really necessary or consider using that feature only on certain devices with more available resources and performance like tablets and desktops. You can do this easily by using dedicated commands and event listeners in your scripts.
7 – Retinas!
The last thing we want to touch is retina displays. These screens have higher pixel-density which means an ability to display more pixels and so much better, smoother viewing experience. In a short, you are able to see much more details in high-resolution pictures or little flaws in low-res images. It is similar to DVD VS blue-ray. Conclusion? Think about including high-resolution versions of images that will be served only for the devices with retina displays.
Responsive design is not just about making website looking great on smartphones, tablets, and desktops. To create truly responsive experience there is much more to keep in mind. We hope that these seven tips will help you in achieving your goals we are providing.
Get more information about web designing & development at DiligentCreators.com
Anyone who owns a website needs to realize that monitoring Google’s algorithm updates is most important. While you will usually find small updated that may not impact your online campaigns significantly, every now and then you will see that there are meaningful updates that will inevitably affect your marketing efforts. Google’s latest update focuses on its mobile ranking algorithm that encompasses usability factors for mobile experience as well as app indexing. In contrast to days gone by, your mobile site must now have everything in place to enable a mobile-friendly experience.
Two Mobile Algorithm Changes
- There are two major changes being made to the mobile search algorithm that will impact your mobile site’s search result rank.
- Google is set to implement mobile-centric elements on April 21 for improving search results. Mobile apps that take part in App Indexing will be ranked better.
Google to Rank Mobile-Friendly Web Sites Higher in Mobile Searches
Google’s mobile ranking will encompass tag sites as mobile-friendly ones while also using this label to ascertain whether or not a site ought to have a better ranking. The new algorithm changes are expected to have a meaningful impact on mobile search results and will affect all languages globally.
The new developments in Google’s mobile ranking algorithm are said to be an expansion on Google’s mobile ranking demotion algorithm that was launched almost 3 years ago. Google says that users would now have an easier time obtaining pertinent, quality-driven search results that match their device formats.
Why Google Has Chosen to Announce Its Intentions a Month in Advance
Users have a month to prepare for Google’s new implementations and make sure their sites are mobile-friendly. The giant search engine had been experimenting for a significant time with mobile ranking elements, and now it’s time for implementation. You can leverage the usability reports that Google offers in order to test your site for all recommendations. There are also numerous sources that offer help for this purpose.
Types of Apps that Google Indexes for Improved Mobile Search
At the time of its announcement, Google implemented ‘App indexing for improved mobile search’ with immediate effect. It said that indexed apps will start reflecting a better ranking in mobile search almost immediately. However, they representatives said that this would only take effect with signed-in users. Users will now be able to see indexed app content more often in search results.