A website for all devices: Responsive Web Design
A responsive site – a site that goes along – adapts to the device being used. It is in this case mainly the available screen space meant.
Depending on whether you visit the site on your smartphone small, the 5 “ham, selection of a 7 or 10” tablet, netbook her, laptop, or your gigantic iMac, it presents itself in a layout that for the screen size is most appropriate.
That makes her side future-proof – because who knows what’s to come on the market for devices in the coming years.
The site presents thus always appropriate, but always has the same address. Your visitors can therefore divide without problems on Facebook and Google can index them.
Further, the page then of course also provide information on whether you are using a mouse, a keyboard or a touch screen, or you can query the GPS coordinates.
Reduction on the most important: Mobile First
The goal at the end of the relaunch is a site that not only the smallest screen simply and clearly feels, but on all devices.
After being on the small smartphone screen is not much space, they are forced to focus on what really matters: What are the applications? What information do your visitors?
This reduction and simplicity is good: you leave your visitors a sense of control and inspire confidence. This is exactly why you should maintain this reduction on larger screens.
For a new project that’s only once easier because you can start on the small screen with the information architecture. But get the work you put into the relaunch, also to improve the layout on large screens. The responsive design you need anyway the same information architecture.
The important thing is you may omit in any case on smaller screens content. You alienate so that your visitors who expect such content.
What is not important enough for the smallest screen is not important on a large screen.
Only make, then read: Interaction first
Also, if your existing website mainly simply provides information, there is sure to pages where user interaction is possible. For example, search forms and filters or simple contact forms.
Interaction is a top priority! The form or control element must first appear on the screen, scrolling may not be necessary. The user wants to be active .
Maybe you have an extremely well thought-form of the operation to which you have much to say.Let’s talk the interaction for yourself! If you want to know more, the information concerned itself, for example, by scrolling down.
User-friendly interfaces open up without saying a statement should not be necessary. YourResponsive relaunch is also a good opportunity to come the usability check.
Of course, at the launch of your existing site a design has been developed with different layouts – often simultaneously with a corporate design, perhaps even with style guides.
This can take up again to support the transfer on small screens. Small design prototypes make the adjustments for small screens and thus experi- discussion.
If you have previously given some thought to the order of the information on the screen is now clear how to arrange them on the smallest screen, and the decision for larger layout is simple.
So Deliver your designer for Responsive website with these documents.
It must be tangible (Touch Ability)
In the design of interactive elements, especially of links, the designer should of course be that these be large enough to be operated even with thick fingers.
Each handle next to the frustrated user. It is therefore important that all elements – including the font – enough space is given. Therefore, the prioritization is extremely important.
On the modern appliances much more direct interactions are possible than with a mouse and keyboard through the touch screen.
Examine your website on inputs that are only possible with keyboard and mouse or touch screen unnecessarily cumbersome. Consider yourself solutions for these cases. You may also find input options, the more fun on the touch screen.
It is important that you avoid the addition gripping, by making the elements large enough.
Clean up forms
Limit your forms on really important information.
In many cases, you can request additional information on market analysis later. The user is after reaching his goal also more willing to make such disclosures.
Ideally, you have also been made to each form considerations, would like to achieve that goal gives the reader. If not, now is the opportunity to do so.
With the goal of the user in mind, is it for you then easy to decide which entries are actually needed.
Is the need for a field not directly visible because it occurs only through the processes in the company, you should also explain to the user what this particular field is required. This creates trust.
Facilitate user input
Think about it, to facilitate the long term after the prelaunch user input.
Often by small changes you make entering information on modern appliances immensely.
A good example is the input field for e-mail addresses. White of the browser that such is expected, it can optimize the touch keyboard already for the input. For example, it is then keys for @ and .com.
Allowed in numbers, just numbers, the keyboard makes it easier to 11 keys and the number is much faster typing. The same applies to credit card information.
Various sensors of the device, such as GPS or camera input can even make totally unnecessary or offer the user a reselection.
Making content mobile capable
Much of the work is to make your content for all devices fit. Much of it is routine work and can be done by assistants, if not even be automated with scripts.
The authors nevertheless must of course understand the necessary changes to create future content capable mobile. Here you can help on the screen awareness training for reading.
It is best to ask the author team a smaller tablet available so that they can internalize the new form of presentation of their work.
Does this work once done, your content can in principle be used in apps, e-books or other websites because they are well structured.
Inventory and Prioritization
The weight of your offers and information to what has happened in the ideal case when creating your existing website and you can dig up old documents and update: Which articles, images, videos, and forms are currently on your site?
Without a proper content strategy it happens over time, that content is especially land on the home page, which have never been prioritized as high. Therefore, it is more important that you have a current inventory list your website and evaluate them accordingly.
Your CMS administrator can give you certainly export a current survey, which you can then weigh in the spreadsheet. By now you should Syndicate this prioritization also with the interests of your visitors that you find in the visitor analysis.
Once the content is set, you have to decide what is above. We recommend that you share and organize your content into smaller portions.
On the screen will read less attentive than on paper – that’s why orientation is the text for the user extremely important. Good lyrics (on screen) are portioned into paragraphs and have plenty of sub-headings that help the reader to find the right section quickly.
It is particularly important that the texts received the appropriate formats are, and are not held for example, simply flush with spaces, then on small screens lead to disastrous results.
A good step is to assist a programmer who you can find such critical points in large text collections here.
Even you can add text in a simple text editor copy (such as Notepad or Notepad) and the window larger and less drag (really small). To see where the text has weaknesses and revision is necessary.
Ideal is also here, if the CMS in this work support by making the structure of the article detected. One approach is simplified markup languages such as Markdown instead use a WYSIWYG editor.
On small screens it is very difficult to represent tabular data.
There are several Ansäzte that is simple to linearize the table: The cells of a row are then shown one above another on the small screen instead of side by side.
However, it strongly depends on the content of the table, if that works. It is often necessary to insert in each cell, the associated heading so that the connection is still not clear.
Your CMS can be extended so that the individual cells are automatically expanded to include table headings, and then displayed on small screens in the cell rather than, for example, in a header.
In any case, essential that the tables neatly formatted and are excellent. The award of the header is also important, so that it can be repeated in the expression on each side. Header cells must be labeled, and their relation (row or column) are defined.
One of the greatest difficulties in responsive web design are still graphics.
First of all, is that smaller screens require smaller graphics? This means that not only reduced graphics, but may also have to be re-designed to transport up less space on the same information.
Since the iPhone 4 with the Retina Display screens are always high resolution – so suddenly need even small screens the graphics in higher resolution.
Instead vorzuhalten graphics in different resolutions, it may make sense especially with illustrations, they equal in a more appropriate format, such as vector graphics to provide.
Your logo on your smartphone
The prime example is here probably your logo. The logo of the existing website on the small screen placed accepts your actual service, information, or interact much too little space. Again, your service speaks for you, not your logo.
And while we’re at it: How does your brand, especially if your logo looks blurry on modern equipment?
Editorial neat pictures
Your CMS must be able to deliver existing graphics in the appropriate size and resolution of the respective device.
Shrinking the graphics may happen automatically on demand, but it must in any case be possible that your authors themselves make editorial images for different screen sizes.
Technically, there are different approaches here. Course load times are important, especially in relation to the available bandwidth.
In order to assess the graphics need improvement, you can also ask a programmer here to provide you with all the images in a reduced form. Then Get the best a disinterested tester and let them explain to each image content. To identify images that are no longer reduced to understand.
Information-heavy websites often offer a collection of documents for download. Most PDF.
PDF function on the screen but everything else as well , also handles visitors your site if they find via Google a PDF on your side.
Your PDF files should therefore be kept in the same way as all other pages on your site, namely as HTML. The latter is not without reason behind the format eBooks.
If absolutely necessary, you can use the old PDF offer in addition to download, but not exclusively.
Converting PDF files to other formats is not automated possible – again highlighting how inadequate is the PDF for screens.
We have in the context of some projects with the migration of PDF collections busy.
To create moving images for different screen sizes, is technically extremely complex, especially as there is still no single format.
Scenes are especially important again for small screens that are no longer to recognize and understand. Also, the file size and the compression factor play a major role.
To check your videos, you can play it and drag the video window is very small.
The best way to show the videos to someone uninvolved, and let them or give him every minute summary. So you come across sites that are no longer evident in reduced form.
Technically, it is necessary to images, even with different video files for various devices. The CMS must be able to appropriately deliver the video to the screen, even compressed, ideally suitable for transmission speed.
Make sure that users of your site can be estimated before playing the video, how much time they have to invest, including download.
Reduce loading times
The myth of mobile users in spite be the portable devices on the go naturally used where poor bandwidth can be expected. There are in addition to technical improvements, other places where you can attack in order to improve the load time of pages:
- Optical effects can be reacted with modern web technologies instead of with images
- Where once inflexible graphics with text were used as headings, the Webfonts can obstruct
- The number of images can be reduced, for example by on small screens only the top news item gets a picture or the rest of smaller images. Alternative: Replace some images for small screens all through text
Relaunch! And now ‘ne app?
Finally, designers and programmers with the implementation of Responsive Website finished, and all its contents are readied for delivery to small screens.
Now it is important that the writers and editors are trained to publish future-proof content in the further operation of the page.
You can now also consider whether a complementary app would be useful for your regular users.Your content will relate the app from the CMS for the site – they can your usual workflow thus maintained for the app on.
Our experience shows that most customers are served much better with a Responsive Web site, and favorable to their destination mobile web.
In addition, we also like to create hybrid apps that can be installed and round off the offerings.What is clear is that a website much better spread when a link can be sent. Therefore, the app is only the second step of Responsive Web site.
Whether you are looking for one or more native or hybrid apps, along with or instead of aResponsive Website decide: In any case, you have the contents are made fit for all devices. That this every time can not be copied to should be understood: already maintain only a content collection, too much for many companies.
Your CMS must consist of a central point at the end of all supply Apps and websites.