sizeVariant

An ongoing research for the Transmedia Exhibition project on the browser characteristic "size variant".

[sizevariant]

Studio Feixen new post.

[sizevariant]

Graphic designers use paper as a medium to express their ideas. Similarly, we wanted to work with paper but approach it from a different angle.

Nendo

http://www.nendo.jp/en/works/un-printed-material/

[sizevariant]

un-printed material

[sizevariant]

Paper Sizes

A simple, free resource for finding the international standards for paper sizes.

[sizevariant]

[sizevariant]

Ideal Image Sizes for Your Blog and Social Media

You know those inconvenient tasks that always seem to creep up on you? Maybe it’s an email reply you always find yourself sending or a URL you often visit but c

[sizevariant]

The “toggle device toolbar” in web inspector is used to see the website in various device sizes, at various page zoom, and customized sizes. 

[sizevariant]

System Preferences->Accessibility->Display->"Shake mouse pointer to locate"

[sizevariant]

Little Fragments

LITTLE FRAGMENTS aka Tom Walter is a creative webdeveloper (and occasionally designer) who likes responsive websites, clean design, photography, animation and typograhy.

[sizevariant]

Draw a rectangle

Enter into the “Draw a rectangle” website and drag out a white rectangle randomly on this dark canvas with the cursor. Share F(facebook logo) is in the center of that white rectangle. Variant sizes of the rectangle can be created on this website and share or print as an image. The website was designed by Mikhail Maksimov and Valya Fetisov.

[sizevariant]

Safari tabs overview on 13′ Macbook, iPad mini 2, iPhone 7 plus, iPhone SE.

[sizevariant]

Page zoom setting in Chrome can adjust from:

100%

90%

80%

75%

67%

50%

33%

25%

[sizevariant]

100%

110%

125%

150%

175%

200%

250%

300%

400%

500%

[sizevariant]

Oto Nové Swiss: http://www.otonoveswiss.co.uk/

[sizevariant]

Which page layout? Static, Liquid, Adaptive, or Responsive

Page layout can be described with terms like fixed, static, liquid, adaptive, responsive, and more. Web designers and developers should know the difference.

When it comes to the screen experience, the designer has less control over what the user sees than the print experience. The layout is no longer static but dependent on various external factors, such as the screens our devices equipped with, browsers we use and its various versions.

This blog introduces, compares and explains different kinds of page layouts designer and developer used in web pages, including static (fixed), liquid (fluid width), adaptive, responsive. Using codepen demos, we could easily observe the webpage layout changing while manually scaling the browser window. Factors like relative units of measurement, multiple fixed units, and CSS media queries are used in different ways to achieve an ideal result for different websites.

It would be interesting to record the motions when different types of layout changes with the browser window. 

[sizevariant]

Various devices are used to browse the Internet today, and web pages are being displayed in all these possible sizes. This website presents the size of main devices in the today’s market and provides size guides for designers. The webpage should be easy for users to browse on different screens. Different screen size and user actions have naturally formed a distinct visual habit and design principles for mobile devices. Translating the content from desktop to mobile is as much an epic task as from print to web. The device size is also the canvas size designers could operate on. Understanding its principles and testing its boundary could be a potential graphic design exploration.