How to create engaging responsive design

We touched upon responsive design not too long ago, in our article 4 Things you need to know about Responsive Web Design. Responsive design is becoming increasingly more and more popular and it isn’t hard to see why. The real question that faces web designers working with responsive is ‘does it engage’?


Responsive design; experts laud it and many brands are switching to it. It seems like the logical choice really, not only is it the best way to create a mobile-ready site, but it also means that your site is visible on any browser size; be it desktop, smartphone or tablet, your site is accessible to all.


The tricky thing about designing a responsive site is creating a site that engages a user on all browser formats. Though in the end responsive design usually ends up well worth the work when it comes time to release the final product; you have a lot to consider before you go to work designing.


As a designer tackling a responsive web design, you need to plan out in advance how you will create an engaging responsive website. A website that was designed trying to tackle responsive design without the consideration of a number of key elements will stick out like a sore-thumb; a really unexciting and boring one at that.


With more and more people using tablets and smartphones as their medium for browsing the internet, it is more imperative than ever that a web designer harnesses all of their creativity when tailoring a responsive site; you need to make sure that every user on every platform can assess your site in high fidelity.


Here are a few creative tips that you should keep in mind, to help you create engaging responsive design.


1. Use Great Typography

When designing a responsive site, you need to consider what’s going to look great on a small screen as well as a large, the latter being the easier of the two. Of course it goes without saying that great typography is a staple of any seriously good web design but when it comes to responsive design it becomes a mandatory feature.


When using typography in responsive design, you need to ensure that as the screen decreases in size, most of the elements should transform and shrink (or move) in unison. It’s an absolute must that your typography has this capability.


Furthermore, you should be using different headings and various text sizes. For desktop designs, you will be used to using very large sized headlines and headers; this isn’t a quality that you have to entirely eradicate when it comes to thinking smaller in size when designing responsive, just ensure that when the text decreases its elements maintain fidelity and still look great.


There are plugins that can help you to do this; one that is particularly great is FitText .


One website that uses great responsive conscious typography is the Deren Keskin site. The typography readapts fluidly to decreases in browser sizes and maintains its fidelity perfectly. While the same font is maintained throughout different browser sizes, what is really cool is the way that the on-page elements re-adapt through different browser sizes; such as the site navigation menu and the ‘DK’ logo.


2. Use excellent imagery

Like typography, imagery is extremely important in all types of web design, and like typography, imagery is something that needs to be considered and thought out very carefully when it comes to responsive design.


The images that you use on your responsive site will need to scale down or shrink in unison with the browser size that it is being viewed on, therefore it is important to pay important to the images you use and how they will adapt to changes in the browser size; as screens get larger or smaller, images change shape and reveal or crop out certain bits of an image. Thankfully, there are tons of layouts that you can use in responsive design, which will help you get around this.


Ideally, when working with images in a responsive design, you want to make sure that your large images have no graphical content on them that will suffer cropping out when the browser size changes. To add to this, when you are creating graphical images, you need to ensure that you are creating ones that will load fast and will appear visibly on a smaller screen.


An example of a website that uses great responsive imagery is Pandiscio Co’s. Pandiscio Co.  is a website that is lauded for using imagery that fulfils the imagery requirements of responsive design fantastically. When viewing the site on a full-size browser it looks great; it’s full, high-quality and extends across the whole page: it’s a feast, but not over satiating. Then as you begin to decrease the screen size, the images get smaller and adjust shape accordingly and get cropped. Pandiscio Co. have found a formula when it comes to responsive design imagery that works excellently.


3. Don’t forget the navigation

A staple of logic that you should always apply when designing the navigation for a responsive site is that if a user can’t work out how to get around your site, then they wont: period. Due to the fact that website navigation hitherto has been designed to cater for horizontal screen orientation. Now, you throw in the portrait orientation that we get with responsive design, all of a sudden a whole new realm of design is opened.


Obviously, more problems come with more site pages. If your site has more pages (and therefore more links) then you may find it catering responsive design to accommodate them all on a smaller space a bit more difficult. When it comes to websites that are a bit lighter then this doesn’t pose too much of a problem, you can make the menu smaller or you can condense all of your links into a drop down menu at the top of the page.


A great example of a site that utilises responsive navigation exceptionally well is The Haberdash Fox. The navigation on this site is extremely intuitive and clearly thought out to accommodate users on all browser sizes. I really like the way that the category menu becomes drop down on smaller browsers. It’s navigation design like this, that is made easy for users across all browsers, that makes a site intuitive and great to use whatever device you are viewing it on.


4. Keep it enjoyable to use

We all like websites that are fun to use, but so often designers gloss over this; especially when it comes down to responsive design. There are many common flaws that come with responsive design that are just so irksome that it can be infuriating; for example when a website is shrunk to mobile size and you can’t find the buttons to keep the content moving. It’s things like this that make a responsive site annoying to use and will bite you back.


By keeping enjoyability in mind, not only are you making your website more intuitive but you are making its potential to be shared on a wider scale; which is what we all want in the end game. When designing a responsive website, think about what features you like of when using a website on any browser size; think about what you like about how websites you like respond to call to actions and find these things and apply them to your site. As a web designer you should know what makes a website enjoyable to use and know how to implement in your own creations.


Neue Yorke website is extremely enjoyable to use. The website is infused with constant movement; take a look at the portfolio items for example. This makes for an exciting and unpredictable website. Also, when you decrease the browser size, the site’s UI changes almost completely. While the website doesn’t maintain a rigid consistency, all of the elements are clearly engineered for responsive design (the images and typography all maintain well as the browser increases and decreases in size) which makes you appreciate the site and enjoy using it.


5. If all else fails, be creative

When we are talking in terms of ‘to-dos’ sometimes it is easy to try too hard to stick to the ‘rules’ and forget that at the heart of design is creativity. So, if you’re not getting any luck with the methods listed above then why not throw it all to the wind and try something super creative and totally original.


Take Stuff & Nonsense site for example. This website is super humorous, fun and therefore memorable. The use of illustrations creates a fun and lighthearted experience and the best part is how they have adapted these illustrations to responsive design. As you will see, you have a pretty cool animation going on when the screen is at its full size but as you decrease it the characters become more compacted and then fall out of the crowd one by one. Ok, while this doesn’t make the most sleek or cutting-edge design is it fun and super creative which creates an agreeably enjoyable experience.


When designing responsive…

It isn’t something that you can just throw yourself into and hope for great results off the cuff. Responsive Design is something that requires fastidious planning and meticulous sense for detail. By hoping that you can create a responsive website as you go along will only result in a bare and boring creation; on the other hand by taking these points into account you can create a great responsive website that looks and feels great on all browser sizes.


Responsive design doesn’t need to be a big and exhausting task, it just requires some good planning, great design and a lot of creativity. By adding these tips to your own creativity then you can guarantee a great responsive website.


If you would like any information on our responsive web design or what we could do for your website then why not get in touch with us here at Kalexiko HQ.