Altabel Group's Blog

Archive for the ‘Responsive web design’ Category

Every web designer, design agency or somebody who works with websites must keep themselves up to date with the latest goings on in the world of web design, because the web is a unique environment which is constantly changing and evolving. Every year some new trends are born, some fade and some just continue to prosper.

We’re in a golden era of tools for designers with new products coming out every month. Innovative tools are popping up in every part of the workflow. From brand/asset management (Lingo and Bynder), to prototyping and collaboration (Marvel, Zeplin, InVision, Flinto, Justinmind), to website creation (Webydo, Blocs, Webflow), to tools for the amateur or marketer (Canva, Stencil, PicMonkey), and of course, to professional creation tools (Sketch, Affinity). And those are just the larger, more successful ones.


In this article we will take a look at new web design predictions for 2017, which hopefully will help you design better websites.

Let’s start!

There is no doubt that 2017 is definitely the year for super-rich gradient colors. Gradients and bright colors are already being implemented much more than in the past. We will also see many companies rebranded their own brand with bright bold colors. Instagram, Stripe and Asana are some good examples that already started.

We can all notice that today every young adult is an expert web user. And even the amateurs are acting like pros: using multiple tabs, and swiping to go back a page.

The result is that everything is faster. And we’ve all learned to become impatient. If you want to make a mild mannered person explode with annoyance, just make their Internet really slow for a minute.

Now websites are forced not just to become faster, but to become faster to understand. Designs which slow the user down have the same impact on their audience as these websites which don’t load at all.

Simpler designs are easier to scan, which means they’re faster to appreciate.

This is the biggest reason for the death of skeuomorphic design: users are more perceptive, less patient, and clutter only slows them down.

Apps put most websites to shame with super-minimal, beautiful interfaces. And they’re doing this because minimal interfaces perform better.

What about animation?

If you want to make a website look dated, cover it with animated “Under Construction” GIFs and Flash animation. But several things are coming together to make animation a rising star in modern web design.

Flat design can end up looking too consistent, boring even. Animation helps a website to stand out and to pack more information into less space.

Mobile apps have redefined what a user expects. Mobile apps use motion to convey meaning, and websites are just starting to do the same.

Typography trends emerge every year. Everyone is aware of the importance of typography in UX design. Much more than just arranging pretty fonts on a nice background, typography is an essential part of every design, it can make or break a whole project. It enhances your story, emotions you want to drive. It helps you to communicate the message to your users. This year we will see an increase in bold fonts.

If you haven’t dived into flexbox yet, you’re in for a treat. This relatively “new” CSS layout module offers both incredible responsive-friendliness in its functionality, but also makes a lot of sense to visual designers used to manipulating objects on the canvas with the align and distribute tools offered in the likes of Sketch and Illustrator.

Coming up hot on the heels of flexbox in the race for newer, better layout modules is CSS grid. While flexbox helps us solve some seriously aggravating and long-standing web design problems like vertical centering, it really wasn’t intended for use in full-page layouts. Grid, on the other hand, was built for full-page layouts. And like flexbox, it allows you to easily rearrange content order for different media queries.

There will be more focus on conversation. You might call 2016 the year of the bot. 2017’s going to see a lot more bots popping up across your life.

What this might mean, exactly, we’ll have to wait and see. But possible impacts include:

  • An even greater interest in “human” language (more good news for content strategists!)
  • Increased capacities for writers and content strategists to act as UX designers and bot developers
  • More conversational/natural-language forms
  • Attempts to transform the comment section from the internet’s sewer into fonts of “engagement” and new content — an effort already kicked off by the Coral Project

These are the main trends we believe will be trending for web design in 2017, but we want to hear from all of you! What are your predictions? Waiting for your comments.

 

Kate Kviatkovskaya

Kate Kviatkovskaya

Business Development Manager

E-mail: Kate.Kviatkovskaya@altabel.com
Skype: kate.kviatkovskaya
LI Profile: Kate Kviatkovskaya

 
altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

People are increasingly making use of their mobile terminals (tablet and smartphones) to connect to the internet and it is important to adapt websites to the new browsing habits. Each terminal has its own features and limitations (such as the screen size) which will determine how a website will be displayed. The Responsive Design is a compelling solution if you want to have your website smoothly displayed on multiple screen sizes.

Responsive web design (RWD), is an important evolution in an increasingly on-demand world. RWD is a design approach that lets you view content in a way that is optimized for the screen size that you are viewing it on. For example, if I access a RWD website on my laptop, I will see the content formatted in a way that is optimal for a larger screen. And if I access that same website on my smart phone, I will see the same content reformatted to fit that screen size. The important thing about this is that it is showing me the same content whether it is on a large screen or small screen, only the layout is different.

It wasn’t long ago that the prevailing practice, when considering how to make your website mobile friendly, was to create a separate website for mobile devices along with separate content. The content would be pulled from the existing site and edited down for brevity with some sections being omitted entirely. All of this was based on the assumption that visitors to the mobile site would only want certain kinds of information and not others. Specifically information that would be consumed while “on the go,” and therefore needed to be short, to the point, and informative. Anything less, wouldn’t make it into the mobile site. The implications are that some of the content on the non-mobile site may be potentially long, pointless, and ultimately not very valuable.

One interesting aspect of responsive website design is that it forces us to think about the value of content. If it’s going to be shared across all devices, then anything other than short, to the point, and informative, doesn’t make the cut.  This is a great filter because it helps us focus on the purpose of the information.

Does this mean you should convert your website to a Responsive design? Let’s consider the Advantages of Responsive web design:

  • The advantages of Responsive Design are numerous. This technique allows a website to automatically adapt itself to the different screen resolutions.
  • Columns and images are automatically adjusted, resized and moved automatically according to the screen resolution. This technique allows optimum ergonomics in preserving the layout and the display of the information from the website.
  • The Responsive Design is a strategic long-term solution and you don’t have to worry about redirecting users to another version of your website. Once deployed, there is very little maintenance to perform and the cost of development could be often lower than creating and maintaining a dedicated mobile site.
  • Responsive Design also implies having a unique URL: perfect for promotional campaigns.

There are certainly some Disadvantages to Responsive web design so I thought I would list these along with pros for RWD:

  • If there are many benefits, there are still some drawbacks to Responsive Design. These include a longer loading time. Most of the time, users (browsers) are obliged to download useless a HTML/CSS codes. Similarly, the images are often stretched and not simply resized causing a negative impact on the loading time.
  • Responsive Design won’t allow you to easily adjust the titles, descriptions and other content on mobile phones. In addition, the development of Responsive Design websites takes more time.
  • The Initial Cost. It is obviously takes longer to code and test a website that is to work on a wide variety of screen sizes and devices so the initial cost of having a website designed is usually could be higher than having a non responsive site designed.

The Responsive Design is definitely an effective solution to provide an optimal user experience. This is a major evolution of web design inviting designers to take a new challenge. Disadvantages and limitations of using this technique are easily overcome by putting more emphasis on the design and development stages of your website. But still I have added the advantages and disadvantages above so that people can make their own mind up about the responsive approach, whether you might be an individual looking for a new web site or a designer considering the expansion of your own design services, it is always nice to know the pros and cons of any concept.

What are your thoughts on Responsive web design?

Polina Mikhan

Polina Mikhan
Polina.Mikhan@altabel.com 
Skype ID: poly1020
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Responsive web design isn’t the future, it’s the present

In our humble opinion it’s late to debate whether responsive web design is the future because it’s already the present of everybody’s business represented online. Consumer/client behavior has been changing. According to statistics and analysts’ predictions, for instance, for the first time since 2001, PC sales are projected to be lower than they were in 2012; smartphone sales will double PC sales in 2014; tablet sales are expected to exceed 100 million this year and may top notebooks next year. So the shift to mobile is happening at an extraordinary speed, and tablets and smartphones are becoming extremely popular for business and pleasure matters. This means people view your content on thousands of oddly shaped and different sized screens. What’s more, according to Google research, mobile users “expect their mobile experience to be as good as their desktop experience” – this expectation poses a thorny challenge for both, business stakeholders and web designers and developers.

So this is no longer about “How do I make my website available to a smartphone or tablet?” – it’s “How do I make my business available in smartphone and tablet context?”. For some business it’s not important – it’s literally critical, for example: according to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app; the same percentage is quite common for e-commerce sites according to Google Analytics and that’s why RWD has been listed in E-commerce marketing checklist for 2013. If you wish to identify the percentage of your audience that use mobile devices use the Google Analytics Mobile Overview report feature: if mobile users are more than 5% of your total audience you should consider catering for them too.

In general, there are three main approaches to providing information and interaction to mobile/tablet device users : responsive (and adaptive) web design, mobilized websites, and mobile apps. It’s important to understand that these are different marketing channels and their value proposition is very different. A mobile web site may do something very different from a mobile app – simply said, “if your goal is just to display and show content beautifully create a responsive or mobilized website; if your goal is to show productivity tools, build an app”. Which option is the best for your business will depend on your use case, your users’ habits and your budget.

Responsive web design vs mobile web development: advantages and challenges

To talk about advantages of responsive web design, let’s start from its definition. RWD is a front-end development approach aimed at crafting device agnostic sites. It uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. So responsive design provides easy reading and navigation with a minimum of resizing, panning, and scrolling, and eliminates the need for separate sites for different devices. Adaptive web design is either a subset of responsive design, or a related approach. “Responsive design will show more stuff or less, optimized for a mobile layout, but is likely to still provide access to the full desktop-view’s content. Adaptive design, by contrast, might show very different content, and also present a different UI, reflecting touchscreen’s tap/swipe/scroll versus desktop’s keyboard/mouse interaction.” In either case, responsive (and adaptive) web design will be based on the same code as a desktop site, and will locate on the same URL.

– In the definition above a couple of advantages of RWD are pointed out. Indeed, it improves user web browsing experience since a website adapts to the browser or device compatibility automatically and makes the content look good. For customers it shows that your business is receptive to changing technology and understanding of consumers’ needs.

– From business perspective, “one website – multiple devices” concept means that it’s easy to manage and focus on developing good content for your website. The same applies to analytics and strategy development and deployment since there is only one set of analytics to examine and a single strategy to develop and deploy. From maintenance standpoint, the technique is great too as one update affects all of your platforms.

– Additionally, responsive websites are easier for consumers to find than traditional or mobile web sites because they come up higher in search engines’ rankings. “In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.”

– One more advantage from the future perspective, as Resnick predicts, is: “As the internet transforms further into a platform of services and user interfaces that tie those services together, leveraging RWD technology in the future will allow companies to integrate a plethora of back-end services, such as Facebook, Twitter, Salesforce.com, and Amazon Web Services, and then present the integrated data back out the front-end iad layer on a responsive design so the application looks great on all devices without custom coding needed for each device or screen size. No longer are expensive back-end solutions needed to integrate legacy systems with business partners.”

Actually responsive web design is quite immature so it faces many challenges too.

– Even though we might view a responsive website on a smaller screen and it displays less visible content or smaller-sized images, this does not mean that the site will load faster. The thing is that from one side responsive websites are not much smaller in download size when viewed on smaller devices or screen resolutions compared to when being viewed on a desktop browser jacked into a broadband internet service provider, on the other hand mobile internet speeds still lag much behind broadband internet ones. Thus responsive web sites need advanced optimization, such as serving smaller images and conditionally loading scripts, and much more. An alternative may be found in dedicated mobile web development solutions since they specifically address mobile devices.

– The related issue concerns complexity. Responsive web designs are inherently complex because they are trying to support many viewing experiences without necessarily optimizing the experience for one particular device (or genre of devices). Mobile browsers will have to deal with a big HTML file, and the site would need to carefully avoid running specific scripts, loading certain CSS and download large images. Perfect implementation is possible, still avoiding over-resourcing requires scripts or code and therefore additional complexity. Typical “m dot” site wins in this case and is simple. It usually has a small amount of HTML, limited scripts, CSS, and images (if at all) as it is built specifically for its intended small-screen, touchscreen mobile devices viewing experience.

– As for UI and UX, responsive websites have limitations here. Not only in screen size, they are also limited for utilizing or recognizing key mobile features such as user location, connectivity, device limitations, software potential, and user needs. Mobilized sites and mobile apps will provide broader opportunities and advantages here.

Information architecture can be an issue. It needs to be carefully considered and should be hierarchically structured before the design implementation.

Advertising is an issue. Ads will have to shift with the sites, something that will wreak havoc with advertisers who want guaranteed placements on sites.

So, which approach will or do you use to present your business online?

HTML5’s momentum and Best tools for responsive web design

Responsive web design is not a specific technology but a whole design approach. However, responsive design is enabled primarily by CSS3 and JavaScript, which fall under the banner of HTML5. HTML5 is really maturing in terms of its functionality and, more importantly, its speed. So now HTML5 is the backbone of the new and interactive features of responsive web design.

To achieve a smooth flow from a large screen to a small one it takes a lot of patience and perseverance. To reach a seamless result there are a number of tools that help you with it. Below you will find a list of best responsive design tools broadly recommended in the web as well as by Altabel’s dev team:

1. Gridset
A tool that helps you design, prototype and build any type of grid layout required – columnar grids, asymmetrical, fixed, fluid or responsive grids. It even lets you create a library of your own grids, with a variety of presets available. It will allow you to build responsive prototypes (without all the calculations) very quickly and easily, providing all the measurements and tools to integrate with your existing markup.
Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap
An intuitive and powerful front-end framework from Twitter to start a responsive website fast and easy. It addresses the most popular user interface components and interactions, uses a 12-column responsive grid system with simple and flexible HTML, CSS, and Javascript and features dozens of components, styles and JavaScript plug-ins, with basic global display, typography and link styles all set. It also gives the option of customizing components of your website for instance by using the Customizer .
Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Upand Gumby.

3. Wirefy
Clients wish to see how wireframes will adapt to different device sizes. Static wireframes aren’t particularly useful to show a client how responsive your design is, or what functionality is being suggested. But rapid prototyping by building flexible wireframes may. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. Wirefy focuses on key elements such as typography, tables, images, slideshow, forms, tab panel, paginator, menu, etc., focusing on the users.
Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify.

4. FlevNav
Navigation strategy is a really critical component of any responsive website design. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.
Alternatives: TinyNav.js, Navigation Patterns for Responsive Design, MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu.

5. Adaptive Images
Previously, making your website images responsive was tricky and usually meant using a “hack-around”. Now several tools may simplify this task. Using a one htaccess file, one php file and a single line of JavaScript, Adaptive Images detects screen size of browsing devices, cashes and delivers device appropriate re-scaled versions of your web page’s embedded HTML images without any mark-up changes. Also it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything. Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options.
Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

6. FitText
As content scales according to a user’s viewport, the text will naturally wrap as the container is narrowed; and this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. FitText is a jQuery plugin specifically for headlines and big text. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. Still FitText is only for headlines, and shouldn’t be used with paragraph text.
Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter and Slabtext.

7. Responsive Slides
This lightweight plugin allows you to create a responsive slider using elements inside a container. The images have to be the same size and jQuery 1.6 and up should be used. You can keep captions and other non-HTML elements inside the slides, while also using CSS3 transitions with JavaScript fallback. It works in all major desktop and mobile browsers, can support multiple slide shows, have settings for transition and timeout durations, automatic and manual fade, and have options for customization.
Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, BlueberrySequence.js and Galleria.

8. Responsive Tables
Data tables in responsive design can be troublesome: you want it to not break responsive layouts, not hide content, let you see entire rows and columns, not be too small to read easily or zoomed in too far requiring scrolling. Here ZURB comes out – a simple JavaScript/CSS combination containing two key files: responsive-tables.js and responsive-tables.css. It works by taking the first column, which is often the unique key for a table, and “pinning” it to the left of the table, allowing you to scroll the other columns under it.
Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables.

9. Responsive Design Testing
Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an extremely simple tool that allows you to see how a page displays on different screen sizes, in a single view. With Matt Kersley’s RWD testing tool you just have to enter your website’s URL into the address bar to test a specific page in different widths and device sizes. Also you can share the results of the test with others by adding any URL to the end of the testing page address. One major benefit of this tool is that it can be self-hosted (available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.
Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive ViewportResponsive.is, and Resize My Browser.

10. Respond.js
The problem with media queries in responsive web design is that they are a part of CSS3 specifications so they do not work with older browser versions such as IE8 and lower. Respond.js comes to the rescue for browsers that don’t support media queries directly, translating any media queries it finds into equivalent JavaScript.The script itself is incredibly small and lightweight. It works unobtrusively, and doesn’t rely on any other scripts or frameworks to run.
Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries and Enquire.js.

The tools above are ultra useful for any RWD project from the planning and designing phase right through to testing, and what’re your favorites?

Welcome to share your view points.

Helen Boyarchuk

Helen Boyarchuk
Helen.Boyarchuk@altabel.com
Skype ID: helen_boyarchuk
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

%d bloggers like this: