Production & Development
Multi-device adjustment, design testing, etc. merged into development process to create a quality output.
Office hours: Monday–Saturday from 9AM-5PM (GMT+8)
Armed with knowledge and experience that we obtain from developing website from different industries, we’re able to provide web system environment. with optimum planning & design starts from new website development to renewal of existing website.
Please contact us if you have any website related issues that you might have.
In developing a website, design has become a very crucial element that will determine the success of website itself. A good design doesn’t only determine by its appearance. It’s very important to have a logical design concept that consider strategy background, technique, user trend, brand demand, etc.
Talking about design, people might think that taste and talent is highly required in this field. However, to create a great design, the most important thing that required is ‘Idea’. Especially on website development. We believe that logical website strategy for UI design will bring success to a website.
Marketing strategies, target analysis, UX design etc. are strongly reflected in content that is told as a design concept. In the category of design concepts, this is a case-by-case how to deal with this, but the material design concept mainly defines the following themes.
In visual design, process management is more important instead of designer skill. We create high quality visual design that direct to strategy execution, while appeal to suggested communication method.
Visual design term in design refer to process where entire concrete design and visual design are finished and attract interest from many company. However, because of its high demand, highly visible and technique tend to be missed out, most of the time discussion advance with more visual impression. Based on that design concept, from previous discussion have to be present. Furthermore, Development process management are required. Because of that, i will pursue high quality design without losing the sight of what kind of design should be done to ensure our business requirement are met instead of ad hoc.
The followings are visual design development process:
Monitoring design concept sources and reference design, while implementing ideas to deepen the discussion. We’ll also create an environment where design will be assessed correctly with all the expertise required for design consideration, such as marketing guideline, trend technology and basic usage theory.
First off, I will create 1 – 2 on screen design and discuss it. Not to confirm the design at the same time. but to narrow ambiguous idea within the concept. We will deepen the discussion while creating variation with color scheme as needed.
Accepting feedback on the initial design. We will narrow down the design direction and refine it. Normally after 2 – 3 times refinement, the design can be confirmed.
Based on the basic guideline that has been determined, we will expand design to other screen resolution.The target within this phase is main screen which has become the determined. If you’re considering responsive website, you’ll also see display for smartphone and tablet within this phase.
After the main design format has been determined, we will create design that required for further into HTML. Icon button as well as varying pictures based on each page, will be developed within this phase
Coding
Website coding will be made to support multi-device and multi-browser. We will create CSS description method, library which used in JavaScript, considering logical structure, processing speed, etc.
HTML and CSS coding is based on clear rules based on predetermined guidelines. The contents of the details depend on this case, but we will do the programming with the following policies.
OS | Windows OS 8 or Higher | Mac OS X 10.7 or The Newer Ones |
---|---|---|
Browser | Internet Explorer 11 Latest edition of Microsoft Edge Latest edition of Chrome Latest version of Firefox | Latest edition of Safari Latest edition of Chrome |
Screen Size | 1280×768 | 1280×768 |
OS | Latest Edition of OS Android | Latest Edition of iOS |
---|---|---|
Browser | Default browser | Latest edition of Safari |
Screen Size | Not set | Not set |
Unless specified, as explained on HTML 5.0. UTF-8 for character code and CR + LF will be adopted as a standard. We intend to provide source code that appropriate with web standard and possess a logical document structure.
To separate information and design and realize logical and very versatile coding, design specifications are all done in CSS. CSS 3 is the standard for the description format, and the design philosophy that fits the project is adopted. It aims at general purpose design and is very scalable, and even when updating on the client side of the company, you can easily interpret the CSS structure, modify and update.
We will prioritizing implementation of Javascript and jQuery (third series) with syntax equal to ES grade 2015. We store functional source code expendable and error/bug-free. Aside from that, because webpack are used to divide files are used to separate processing method, the size of description file will be very small since our intention is to create a simple interpretation even when updating from client’s side company. Furthermore we will respond if there is certain library or framework required.
Basically, plugin will not be used. If PDF are required, icon will be used instead
Most of the case the issue is multi-device complaint and another case is responsive web. Furthermore, we will utilize flexible layout to realize independent design from screen resolution.
We will create multipurpose code, that support, multi function and multi browser era. We will code the CSS description method and Javascript used in library considering logical structure and processing speed.
With our experience in handling CMS, it is safe to say that we’re familiar with WordPress implementation, especially realizing function similar to paid CMS based solution.There are a lot of plugin on WordPress, however we will only use a few that we have tested previously.
We will create easily used function that will dynamically check feedback with JavaScript such as inline validation. This will contribute to user’s completion upon visiting the website.
This will include one form that affect the success or failure of a website. For example, request page and request information page is a destination of one website and landing page is conversion point. Even if you spend money, attract user and show them a great content, if you lose visitor from landing page, intention to attract user and content will be a vain effort.
You can convert half-width and double-byte character correctly, inserting zip code and phone number automatically on server side with no concern on forcing the user to do the input. Specification that force input format to user should be totally eliminated.
The most constricting thing about input form is error message. After finishing all the input, error message will be displayed and letting user to do it over again is one factor that people are leaving behind. Make sure to apply inline validation on the form that we make and check the error where you place to ensure no retry form as much as possible.
In term of form where information change are based on choice, display/non-display item input are automatically activated. Based on that, we will only display fields that only required, decreasing psychological burden on input or avoiding unnecessary input as much as possible.
When entering zip code, you will be able to enter address automatically or you can automatically have Katakana inserted when you type more than 1 Kanji. By collecting this kind of intelligence, we will eliminate unnecessary as much as we possibly could.
By providing a big input field as wide as possible, you will encourage user to input data psychologically. Furthermore, by using label attribute, radio button and checkbox, you will facilitate user to do repeated click.
It will require to click to choose from, and everytime will be visible from the start, unlike pull-down menu where you can’t see every choices unless you click on it. Radio button that you will be able to choose will be entitled to users, with easily navigated UI. Based on the item selected, we will choose UI as minimum as possible.
Will explain to user how many item are left. To clarify how many items left that need to be filled will have a psychological impact on users constraint.
Because the input is not finished yet, or you accidently pushed the submit button, you may allow users to feel psychological constraint by showing error message. If input doesn’t finish during the first place, do consider to deactivate the submit button to avoid constraint as mentioned above.
Depend on the product being sold, by providing information on the confirmation screen, you might be able to drive upsells, cross-sells or providing a useful information. Do consider your confirmation page if you want to provide useful information without disturbing user’s experience.
When user are leaving the page once they reach confirmation screen. However, you can increase their interest or drive upsells or cross-sells based on your usage. We will arrange flow from confirmation page accordingly.
Complete security scope are highly required for website that utilize CMS and form. We will take a proper action toward 9 check-list item that focuses on specific security and create a very safe website.
We will develop through step in security measure and create a website that totally safe.
Security is not a serious measure unless you only run an organization website. Despite that, there is a number of consideration for security such as login to CMS management page. We will take a security measure for website by doing preventive action on the following item.
SSL conversion
We encourage not only every input that handle private information and login, but also every single page of a website. If SSL extension are done during the extended period, recycle will be initiated. In recent year, it’s said that Google have merged to SSL and that would impact SEO as well.
Cross Site Scripting
This refer to attack that attach dangerous on web page, extracting cookie information, or redirecting user to another page forcefully. This risk can happen if function such as bulletin and comment that can be submitted by user. it can be prevented by changing special character that will be used on the form.
SQL Injection
This is a type of attack that manipulate database by executing illegal SQL statement. When opening CMS, there’s a risk that management screen are exposed to the same threat. However, SQL Injection are applied with basic function, therefore it’s a rare case within website industry. Furthermore, we will counter action by building system that work with database, such as our own system management.
Traffic alteration request
illegal script attached to a page, and this attack is the cause behind undesirable purchase. Like Cross Site Scripting, this threat increase if there’s function that requires user input, such as posting. You can prevent it by taking action to eliminate dangerous script being executed.
Traserval/Directory
Attacker execute an undesirable file and backing up configuration file as well as important information. There’s a risk that CMS management screen being attacked with unique URL that very hard to track down and using basic and IP authentication, the attacker can last in most cases.
OS Command / Injection
Attack that order operating system (OS) from web server being executed from outside. Specifically, there are numerous case where shell function that starts a lot of function on one row. Once again, function that requires user input such as posting and comment would be the ideal place for the attack to initiate and like the other 3 case, you can prevent it by not allowing dangerous script being run.
HTTP header injection
Attack that manipulate perimeter to input an illegal information and manipulate website. A dangerous website that ruin HTTP response. You can deactivate value from request body, release feedback code, etc.
Hacking Session
This is an attack that trick and scrim carelessly which operated on website that identify user by ID session, such as organization website and EC website with login feature. Basically there’s no harm being done. This issue can be avoided by encrypting SSL without attaching the ID on the URL Talking about CMS, this issue can be avoided with basic authentification and applying IP limiting on the management screen.
Inapropriate Authority Control
Which means that private and confidentIal information can be seen. Information that needs approval on CMS can be released or website being developed can be released. CMS can be production environment and double structured environment. Preventive action can be done by adding another basic authentification and IP limitation to live environment or development environment.
Testing
There is a number of issue being experienced by multi-device and smartphone. We try to keep error level as low as possible by utilizing three step examination with check-list.
Use page with a lot of item check and try to keep error as low as possible.
It is said that hundreds of environment can be seen through website right now. It’s not something strange if variance within user reaching over 1000 even for website that has thousand of sessions. It is impossible to cause an display error or execution on website that being accessed by various device, operating system and browser. Furthermore, mistake happen within different probability regarding place that requires assessment visually because of inability to use the device and part that being developed.
Even though it’s hard for a website to prevent a 100% mistake like this, the possibility to decrease the frequency by developing production process and format checking. We do 100 item assessment with page check and three phase before, during and after production. By doing this, we try to decrease error from happening as much as possible.
Pre Production Check
Item that need to be done before starting the development, by not doing handover or extra work after the development, we decrease error probability. Page check are being used to determine initial confirmation about detailed specification. On this check, main item check will be explained.
Under Production Check
During production, we will check each pages separately. For part with different behavior depend on browser, check target browser type. During each item on the checklist are not modified or altered.
After Development Check
Web production have many phase that couldn’t be confirmed unless that’s visual inspection. Even if you’re checking using checklist, that will eventually happen and we tend to miss them. For this reason, we check each item that very crucial before production, production check and take out check system that will only bring critical mistake.
After Publication Check
If there’s no error on data delivery, perhaps not running well during production environment, or data delivery are not correctly stored or broken. Because of that, we always check the website even after publication.
Various tags are pinned on each website to monitor indicator and API link. Including insertion and setting, as well as management that tend to be troublesome.
Based on the KPI determined on strategy phase, to review a website performance, It’s very important to set log analysis tools and adjust it with Google Tag Manager. To us it appropriately, you need to adequate information on tools, marketing and programming when doing a complex measurement.
As a tag manager, we will do the following steps. This is especially for google analytics. It is important to know that we’re doing the same steps toward other measurement tools as well.
Web translation will emphasize on ‘what story that our audience want to know’ instead of ‘how to express it’, it’s more than a copy of advertisement. We will create specific copywriting for website, considering website and SEO are highly related.
A core value from a website is in it’s content. Therefore, it’s very clear that we only need to post content that meet the strategy concept on a website. There is a various selection of photo, illustration, picture and interactive assets on content representation, however, text selection still become a mainstream consideration. If this text quality is low, your key message will not be directed to users and it will be difficult for content to function in strategy. In conclusion it’s important to know that content is important.
Because its importance, we will actively support copywriting. Unlike what customer refer to advertising copy, Web copywriting is all about ‘how to express’ instead of ‘What need to be expressed’ by considering characteristic the corresponding each website media, we will copywriting based on the following item:
Regarding translation, we don’t need to actually create it due to we have a pattern. However, we will respond flexibly based on characteristic and project request.
Globalization is not only important on business but also on Website. We will consistently support multilinguization on website to give impression localized content with strategy as well on design optimization and translation.
With market globalization, website that required to handle multilinguization increase. Aside company that grow globally, website that require translation in addition to Bahasa Indonesia are increasing. In multilinguization, there are a number of option. By considering strategy, content efficiency and budget, we will propose an optimum method.
In multilingualization, there are the following choices. Taking into account the strategy, content content, efficiency, budget, etc., we propose an optimal method.
This is an multilinguization website that connect one-to-one with Japanese website. Aside from the specified language, it has similar to Japanese website. This is adopted in a business where business material, strategy and content are similarly the same in Japan and from global location. Normally used by software development company or relatively manufacturer.
Primary website structure with Japanese website, however its a form of multilinguization site that only localized a number of content and provide a partial original file. Basic strategy are the same, however this method will only adopted if product varies from one country to another.
This is multilinguization site that developed as a stand alone from Japanese website. This type will be chosen if the product and services are the same from one country to the other but with variety of strategy. Because of its marketing strategy are reflected within each country, in most case we’ll leave the strategy to the country related.
Even though only grow aboard. This is the type of multilinguization that only have less than 5 pages which adopted from small scale test expansion which has not become a full project yet. Because it’s not a good idea to add expenses, this web stored as minimally as possible, with information spread as cheap as possible.
By using automated machine translation without any human involvement. There is a huge disadvantage.in term of cost, rough translation, non translated image only offering the same content. The only advantage is small initial cost.
Furthermore, when translating manuscript it’s required for multilinguization to decide and obey external company that assess the content expertise. In regards of multilinguization including translation, we will continue with the following steps.
More importantly, we will do it together, including the character code and language layout.
Unusual not handling images, illustrations and drawings at all on the website in recent years. We consistently produce creative work.
Not used to handle picture, illustration and still image on a website, we will consistently produce a creative work.
Picture and illustration are very important to design a website, in recent year, video production has become more easier and this is a great decision for content representation.
For photo, we use high quality picture but with affordable price. In case of taking picture with immaterialize object and hard to picture, we will create design with appropriate photography material. However, based on the theme used, we can use paid picture from the internet but pleased remember that picture on the Internet might be used by another company. To avoid such issue, we advise you to conduct photography session.
For materialize object, the service will be difficult unless you have a picture with real image on it. Image will be needed in hiring real working website.The result depend on the picture taken and entry number might change.
In case of illustration and picture, we will propose our need after considering strategical needs. user need, content characteristics etc so its not going to be a stepping stone for expression. For the picture need, photographer, videographer and illustrator will be outsourced and i will help you with the selection process.
Illustration of production is carried out with the following process.