Shop Forum More Submit  Join Login

CSS Tricks: Responsive dA?

Thu Jan 10, 2013, 4:05 AM
If you are at least slightly into web design and/or using mobile devices to browse, you should have come across the term "Responsive Webdesign". Basically it means that a website is set up in a way so it gives the best browsing experience no matter on what device you are viewing it.

One term that is often mentioned along with it are "Fluid Designs". This usually refers to web sites that use % instead of px values to define sizes inside the layout.

This necessary trend in web design made me think about the deviantART.com layout. Because it is a design that has been working responsive for several years! You can test this by going to any place on dA and changing your browser window. You will notice how the ratio of all elements in width remains the same no matter how wide the browser window.

Now that we know that dA is responsive, we will soon find out that there is a responsive element inside dA, which reacts in first instance to the page on dA you are and in second instance to the browser window: journals!

Journals can be found on various pages of dA:
  • User Profile
  • User Journal Tab
  • Deviation Page
  • Browsing Journals
  • Group Profiles (in 4 possible layout variants)
  • Group Journal Tabs


[Examples of journals in different parts of dA with a browser width of 1280px*]


What does this mean for a Journal Skin Design?


If you are about to design and code a fixed journal skin, you should usually start with a worst case scenario ;) In this case it means most likely the journal will be viewed on browsers with 1280px width (1024px and smaller has luckily become rare).
This means that the smallest width in which the journal will be viewed is around 600px.

For a layout with fixed width this means that it should not be wider than 600px:

.gr-box {

width: 600px;


}


Using width: 600px; on the whole journal aka .gr-box also means, that the journal will always be this wide, no matter how wide the browser is. For wide browsers (~1400 px) there will then be a lot of space on either or both sides of the journal. For smaller browsers there is a chance that contents of the journal will get cut off and won't be visible for the viewer.
There is no way to set a horizontal scrollbar (on dA at the moment) to prepare for the case of smaller resolutions, so it is best to make a fixed width as small as possible.

:lightbulb: Learn how to center your journal! Check out CSS Tricks: Limiting .text width.

You already code responsive, if you DON'T use fixed numbers for widths and height of elements.


Which, from experience, is the case with most journal skins on dA. Most skin suppliers change colors and fonts of elements only and don't touch the size of elements.
BUT the problem with many of those skins is actually that there is no editing of element's sizes. This is especially a danger when someone on a big monitor views a journal styled with such a skin. As I mentioned before not limiting elements can cause serious damage to the readability of a journal.

How responsive should you code?


Do you want to keep everything totally fluid? Then you should work with % in your design. Give the journal text a width: 50%; and it will always be half as wide as the journal. This can lead to issues regarding readability on very wide screens. As soon as there are more than 100 characters in one line, the reader will have issues following the text.
This is why working with a maximun width will work much better for most designs. Add padding and margin to keep it centered and at an even distance to surrounding elements.

I prefer limits to widths over a completely percentage driven layout. It gives me a bit of control like with fixed width journals, while keeping the layout responsive and readable.

This is an example of how to limit the width of the .text element within the journal element (.gr-box).


The journal has a general padding of 20px to give the containing elements room to breath. The text will be limited to be no wider than 400px and become less wide if the journal becomes itself narrower. The text will gain height, to make up for the missing width, but all elements will stay visible.

.gr-box {

padding: 20px;


}
.text {

margin: auto;


max-width: 400px;


background: #664d80;


color: #ffffff;


padding: 20px;


}


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et


Fixed vs. Responsive Overview


Fixed Layout:
  • Total control
  • Images can be used exactly as in the design
  • Complex designs are easier to code
  • Chance of contents being cut off
  • Limited to ~600px width
  • Scroll bars may be required or appear and disturb the design


Responsive Layout:
  • No content gets lost
  • Simple designs are easy to code
  • No unwanted empty space around the journal
  • Requires width limits to maintain readability on big screens
  • Some images need to prepared for big screens: use patterns, seemlessly repeatable images or very big images that take up server space


What it comes down to


The way you code a journal skin is totally up to you! But please keep in mind the purpose of a journal: if it is meant for text journals that ought to be read, keep them readable! For such skins it might be best to limit text and journal widths.
For a different purpose, different things may be paid attention to. But most people on dA write a journal to talk about something. Make it a pleasure to read what other deviants write!

So now all that's left to say is…

Happy coding! :la:



*You may have noticed that in one of the examples I added a second number (350 px). This is an important height for the journal portal. Of each journal 350px can be seen when browsing the journals portal. That is why it makes sense to have a at least the headline of the journal to be visible within the first 350px height of your design.

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

Add a Comment:
 
:iconcythux:
cythux Featured By Owner Jan 27, 2013  Hobbyist Digital Artist
is it not easylier with mediaqueries like thies [link]
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 27, 2013  Professional Interface Designer
It does not work quite that easily on dA, see this journal explaining it [link]
But, and I may have totally said that wrong in the tutorial, the point of it was more to just make it clear to people that a journal will be viewed in many many different widths and raise awareness for smart design :)
Reply
:iconjrwenzel:
JRWenzel Featured By Owner Jan 10, 2013  Professional Digital Artist
   ☀      :clap:
 ☁ ⋮∖⋱  ☁   Very helpfull article!
  ‿̫͜‿̫͜‿̫͜‿̫͜⏅̫‿̫͜‿̫͜‿̫͜‿̫͜‿̫͜‿̫͜‿̫͜‿̫ Bravo!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2013  Professional Interface Designer
Thank you :aww: :hug:
Reply
:iconjrwenzel:
JRWenzel Featured By Owner Jan 11, 2013  Professional Digital Artist
I thought a typographer might possibly envoy a little glyph-art ;)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2013  Professional Interface Designer
Haha indeed, nice work of ASCII there :XD:
Reply
:iconjrwenzel:
JRWenzel Featured By Owner Jan 11, 2013  Professional Digital Artist
Unicode actually, but thank you. :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2013  Professional Interface Designer
ah yes, of course, you used elements not contained in ASCII, like the clouds :slow:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 10, 2013
Ich bin in der Materie jetzt noch nicht so bewandert, aber heißt responsive nicht eigentlich dass es Design durch CSS angepasst wird in Abhängigkeit von der Größe? Also das sich der Inhalt dem Browserfenster anpasst ist klar, aber eigentlich ist doch 'responsive' wenn xy zutrifft, dann gestalte das so und so oder nicht?

So hab ich das zumindest verstanden. Weil das andere ist ja 'fixed' oder 'fluid', wobei letzteres dann nur besagt, dass es ohne feste Werte arbeitet. (Was bei responsive aber doch geht.) :confused:

Wie auch immer, trotzdem interessanter und bestimmt hilfreicher Artikel für einige :la:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 10, 2013  Professional Interface Designer
Ah ja, man kann so genannte "break points" festlegen (1024 für iPad, 320 für iPhone etc) und dann jeweils ein anderes stylesheet nutzen :nod:

Ich meinte es jetzt eher im übertragenen Sinne, dass sich die journal box verändert, wenn sie auf einer anderen Seite auftaucht. Das Journal reagiert hier ja nur automatisch auf eine neue breite, ist also responsive, aber nicht responsive im web sinne… um… ich weiß was du meinst, ich bin glaub ich in ein etwas anderes Thema am Ende verfallen als ich ursprünglich geplant hatte :slow:

Also in diesem Falle meinte ich halt fixed vs nicht fixed design. fluid und responsive is nur ein anderer name für mehr oder weniger das gleiche, responsive setzt sich nur durch. Bzw. beim suchen nach diesem Thema doppelt es sich doch alles sehr.

Ging mir ja aber eh nur um journals, nicht um allgemeines webdesign :B (vielleicht muss ich den Anfang nochmal umformulieren)

Danke :hug:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 10, 2013
Ah gut, dann hab ich das doch richtig verstanden. Anfangs hat mich der Begriff nämlich doch etwas irritiert, weil ich immer dachte, dass man das ja doch eh schon 'fluid' gestaltet (also im besten Fall).

Ich denke nicht, dass du es groß ändern brauchst. Im Endeffekt geht es ja um das Gleiche - so mehr oder weniger. Wollte mich halt nur absichern :slow:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 14, 2013  Professional Interface Designer
ja, journals, wenn man keine fixe breite angibt, sind eh schon fluid :nod:
Reply
:iconikue:
Ikue Featured By Owner Jan 10, 2013  Hobbyist Digital Artist
:clap:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 10, 2013  Professional Interface Designer
:blush: Thanks <3
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections

... css tutorials by artbymba

CSS - HTML - help by kuschelirmel-stock


More from DeviantArt



Details

Submitted on
January 10, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
14,571 (1 today)
Favourites
62 (who?)
Comments
14
×