środa, 26 Sierpień 2015

Responsive Web Design Techniques

The world of web design is constantly changing, we are in place where responsive web design is a standard. This technique let the website fit into all mobile screen size.

But what does responsive web design exactly is? Or rather, how it helps websites fit into any screen size? in short, responsive design focuses on creating a website with a grid-based layout, media queries and sizable images.

But following some concrete methodologies to make a flexible and working responsive site is crucial. The following techniques will shed some light on the ideal practices to be taken for responsive web designing:

Visitors Deserve RWD

The main goal when creating a responsive site is to make sure  that the online experience is the same for all. The site’s appeal and structure should not alter creating function and content losses for users of different devices and screen sizes. The browsing experience for a desktop user must be the same as for a visitor coming in through their tablet. This means anything and everything must be flexible – image, content, grids, etc.

Make sure the design looks good on all viewports

If you want your site to be mobile-friendly, your design has to be responsive-friendly. When framing your site layout, choose layouts that are perfect for responsive web design over those which are not. This means keeping your design simple yet functional with as simple HTML codes as possible. Using simple structure for components like navigation, menu options, using HTML5 doctype and a fresh core layout ensures your design fidelity. avoiding unnecessary complex elements in your design will just make things easy for you.

Take care of The Code

Remove unnecessary characters from your source code without changing its functionality to optimize website performance. enabling Gzip compression is also another method. This helps improve waiting time. along with shortening your code, combining your CSS and JavaScript into single files minimizes HTTP requests, which benefits you in more than one way.

Check Images

Tackling images in responsive design can be tricky. But with the following, you can make them flexible to a greater extent:
-Decide for scalable vector graphics over pixel-based ones
-Utilize high resolution images wherever possible
-Utilize best image compression practices

Keep only what’s needed

even though we seldom agree, some content and elements were never meant to be used in a mobile context. Identify such elements and discard them at once for mobile platform. This can be achieved by adding a .not_mobile class to specific elements that are to be removed when your site loads on a mobile platform.
Remember, as Da Vinci said, simplicity is the ultimate form of sophistication. if you want a perfect responsive design site that functions well, you need to keep it simple, organized, and brief.

Back to home
Flutter – Nawigacja pomiędzy widokami

Nawigacja pomiędzy widokami we frameworku Flutter.

Read more...
Alternatywne JavaScriptowe Frameworki

W JavaScriptowym świecie poza frameworkami React, Angular które podzieliły po między siebie popularność, a goniącym je Vue.js jest jeszcze miejsce na inne, mniej skompilowane frameworki, które nie zostały jeszcze dostrzeżone przez szersze grono ludzi.

Read more...
Flutter – pobieranie danych w formacie JSON

W tym wpisie zapoznamy się jak w prosty sposób pobrać dane w formacie JSON.

Read more...